Question

我正在为Uni的一个项目工作，并想用JavaScript制作一个代表Guitar Heroes（https://www.gameinformer.com/s3/files/styles/body_default/s3/legacy-images/imagefeed/Reunion%20Tour%3A%20The%20Best%20And%20Worst%20Of%20Guitar%20Hero/Gh3_2D00_337_2D00_610.jpg）的迷你游戏我只是一个月前才开始学习JavaScript，但是被画布库所吸引，并决定使用它来做我的项目。

我设法制作了一个圆形对象数组，每个对象具有不同的速度和y位置，并使它们一起出现在屏幕上。

import "bytes"

data := []byte("success")
readSeeker := bytes.NewReader(data)

接下来我要做的是使圆形对象彼此依次出现在屏幕上。最好是在随机间隔之后。但是我无法理解setInterval方法。我的想法是在内部创建另一个setInterval方法，但这似乎不起作用。谁能告诉我如何或指向我一个教程？谢谢！

Answer 1

如果您希望两次绘制之间有随机的时间间隔，则

setInterval可能不是您想要的。尝试执行以下操作：

let randomDelay
for(int i = 0; i < circleArray.length; i++){
    randomDelay = Math.random() * 100 //maximum number of milliseconds to wait
    setTimeout(() => {
         circleArray[i].update()
    }, randomDelay)
}

您的代码未达到预期效果的原因是因为您的for循环在间隔内，这意味着它们每隔1秒就“同时”更新

Answer 2

为了实现这一点，我要声明一个新变量：frames，并且帧每增加animate()帧就增加它的值。

仅在以下情况下，我将在animate()内创建圈子

if(frames % 27 == 0 && //you can choose a different number
   Math.random() < .5 && // for randomness
   circleArray.length <= 10){//limiting the total number of circles at 10
   circleArray.push(new Circle());}

我希望这是您想要实现的目标。

var canvas = document.getElementById("canvas");
var g = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var frames = 0;

//object
function Circle() {
  this.array = [100, 300, 400, 200];
  this.radius = 40;
  this.x = innerWidth + this.radius;
  this.y = this.array[Math.floor(Math.random() * 4)];
  this.speed = -Math.floor(Math.random() * (20 - 4)) + 4;
  

  //methods for the object

  this.draw = function() {
    g.beginPath();
    g.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    g.closePath();
    g.fill();
    
  };

  this.update = function() {
    this.x += this.speed;
    // if the circle goes out of the canvas put it back 
    if(this.x < -this.radius){this.x = innerWidth + this.radius;}
    this.draw();
  };
}

var circleArray = [];


function animate() {
  requestAnimationFrame(animate);
  
  g.clearRect(0, 0, innerWidth, innerHeight);
  
  
  if(frames % 27 == 0 && 
     Math.random() < .5 && 
     circleArray.length <= 10){circleArray.push(new Circle());}
    for (var i = 0; i < circleArray.length; i++) {
      circleArray[i].update();
    }
  
  
  
  drawLines();
  frames++

 
  
}

animate();




function drawLines(){
   //lines
  g.beginPath();
  g.moveTo(0, 100);
  g.lineTo(innerWidth, 100);
  g.strokeStyle = "red";
  g.stroke();
  g.closePath();

  g.beginPath();
  g.moveTo(0, 200);
  g.lineTo(innerWidth, 200);
  g.strokeStyle = "red";
  g.stroke();
  g.closePath();

  g.beginPath();
  g.moveTo(0, 300);
  g.lineTo(innerWidth, 300);
  g.strokeStyle = "red";
  g.stroke();
  g.closePath();

  g.beginPath();
  g.moveTo(0, 400);
  g.lineTo(innerWidth, 400);
  g.strokeStyle = "red";
  g.stroke();
  g.closePath();
}

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

间隔一段时间后如何绘制每个对象（JavaScript迷你游戏）

2 个答案: