在Java Script中按随机数的顺序生成数字答案

【问题标题】：Generate number in sequence insted of Random number in Java Script在Java Script中按随机数的顺序生成数字
【发布时间】：2020-09-17 18:35:46
【问题描述】：

点击时我想访问 keyData 数组，但点击时会生成随机数我如何才能访问数组 keyData 中的元素，而不是随机序列就像在第一次点击时访问第一个元素，然后在第二次点击第二个元素是访问，等等。 AThiscode 来自 Paper js 库。

我想用上面提到的数字序列来改变这个 randomNumber。我认为使用循环不是解决方案。

function onKeyDown(event) {
            var maxPoint = new Point(view.size.width, view.size.height);
            var randomPoint = Point.random();
            var point = maxPoint * randomPoint;
            var newCircle = new Path.Circle(point, 250);
            var randomNumber = Math.floor(Math.random() * 27);
            newCircle.fillColor = keyData[randomNumber].color;
            keyData[randomNumber].sound.play();
            circles.push(newCircle);
    }

【问题讨论】：

请分享您的尝试以及您遇到的问题。

标签： javascript html for-loop paperjs

【解决方案1】：

您可以在函数外部定义一个名为 number 的变量，将函数中的 randomnumber 替换为 number 并在每次单击时递增 number。

注意，keyData 似乎有索引为 0-26 的条目，因此您需要确保数字不超过该值，因此点击事件中的 %。此外，颜色和声音将是非随机的，但圆的中心点仍然是。

<button onclick="onKeyDown(event);">Click me to go to create the next circle</button> 
<script>
var number=0;
function onKeyDown(event) {
            var maxPoint = new Point(view.size.width, view.size.height);
            var randomPoint = Point.random();
            var point = maxPoint * randomPoint;
            var newCircle = new Path.Circle(point, 250);
            newCircle.fillColor = keyData[number].color;
            keyData[number].sound.play();
            circles.push(newCircle);
            //set up for the next time
            number = (number + 1)%27;
    }
</script>

【讨论】：

【解决方案2】：

如上一个答案所述，您必须使用计数器。
这是一个sketch，演示了一个简化的解决方案。

let counter = 0;

const keyData = [
    { color: 'red' },
    { color: 'yellow' },
    { color: 'blue' }
];

function onKeyDown(event) {
    const index = counter % keyData.length;
    const newCircle = new Path.Circle(Point.random() * view.size, 50);
    newCircle.fillColor = keyData[index].color;
    counter++;
}

【讨论】：