如何循环通过 function 随机次数？

Question

I'm trying to create a random amount of squares on canvas each time I press the button and then I want them to move up. Right now it completely ignores the for loop and only generates one square instead of random amount. How to solve this?

// 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

Your function has no parameters:
function spawnRandomObject()
but when you call it you are passing one:
spawnRandomObject(i);
Maybe that was meant to be parameter

The other thing I see is that you are correctly calling the function a random number of times,
but the function is drawing the rectangle at the same location:
ctx.fillRect(posX, posY, 60, 60);
you set the posX, posY at the beginning and they do not change.
So yes you do draw multiple just on top of each other

Maybe you meant to do something like this:

 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>