如何随机遍历函数?

Question

每次按下按钮时，我都会尝试在画布上随机创建一定数量的正方形，然后我希望它们向上移动。现在它完全忽略了 for 循环，只生成一个平方而不是随机量。如何解决这个问题？

// Spawn
var numberArray = [0, 60, 120, 180, 240, 300, 360, 420];
var posX = numberArray[Math.floor(Math.random() * numberArray.length)];
var posY = 240;
function spawnRandomObject() {
// Game Object
ctx.fillStyle = '#f2a365';
ctx.globalCompositeOperation = "destination-over";
ctx.beginPath();
ctx.fillRect(posX, posY, 60, 60);
ctx.stroke();
}

// Blocks moving up
document.getElementById("button").addEventListener("click", function(){
// Spawn random amount of objects
for (var i=0; i<Math.floor((Math.random()*8)+1); i++){
spawnRandomObject(i);
}
posY -=60;
});

Answer 1

你的函数没有参数：function spawnRandomObject()
但是当你调用它时，你传递了一个：

spawnRandomObject(i);
也许这意味着参数

我看到的另一件事是，您正确地随机调用了该函数，
但是该函数在同一位置绘制矩形：
ctx.fillRect(posX, posY, 60, 60);
您在开始时设置了posX, posY并且它们不会更改。
所以是的，你确实在彼此之上绘制多个

也许你打算做这样的事情：

function spawnRandomObject(x, y, w, h) {
ctx.beginPath();
ctx.fillRect(x, y, w, h);
ctx.stroke();
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var rand = Math.floor((Math.random() + 1) * 8)
for (var i = 0; i < rand; i++) {
spawnRandomObject(i*15, i*8, 10, 10);
spawnRandomObject((rand-i)*8, i*6, 5, 5);
}

<canvas id="canvas"></canvas>