Как я могу использовать функцию l oop случайное количество раз? - PullRequest
Новая
       8

Как я могу использовать функцию l oop случайное количество раз?

0 голосов
/ 28 мая 2020

Я пытаюсь создать произвольное количество квадратов на холсте каждый раз, когда нажимаю кнопку, а затем хочу, чтобы они двигались вверх. Сейчас он полностью игнорирует for l oop и генерирует только один квадрат вместо случайного количества. Как это решить? 

// 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;
});

1 Ответ

0 голосов
/ 28 мая 2020

Ваша функция не имеет параметров:
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>
...