html画布元素闪烁然后跳出

如何解决html画布元素闪烁然后跳出

我正在尝试让小行星在屏幕上移动来进行游戏。前几个小行星开始工作，然后每个小行星将开始闪烁并窃听到它们不会在屏幕上移动的地步。 acx和acy变量分别是小行星的x和y坐标。

setInterval(throwAsteroid1A,5000); 

function throwAsteroid1A() {
    var asteroidCanvas = document.getElementById('asteroidCanvas');
    var context = asteroidCanvas.getContext('2d');
    var acx = Math.floor(Math.random() * 200); 
    var acy = Math.floor(Math.random() * 10); 
    setInterval( () => {
        asteroid.onload = function() {
           context.drawImage(asteroid,asx,asy,aswidth,asheight,acx,acy,20,20); 
           acx += 1;
           acy += 1;
       }
       asteroid.src = 'https://i.imgur.com/WfQKE6T.png';
       },10)  
       setInterval(asteroidPath,50)
}
function asteroidPath() {
    // let computedStyle = getComputedStyle(canvasDisplay)
    var asteroidCanvas = document.getElementById('asteroidCanvas');
    let ctx = asteroidCanvas.getContext("2d");
    ctx.clearRect(acx,canvasDisplay.width,canvasDisplay.height);

}

解决方法

很显然，您的方法在概念上存在问题。我认为该闪烁是由您设置的多个单个间隔计时器之间的计时问题引起的。回调函数asteroidPath()清除了画布的一部分，这可能是在屏幕上添加了一个新的Asteroid的同时发生的，这将根据其屏幕位置全部或部分删除它。

要解决此问题，您应该：

• 保留所有小行星物体的列表
• 完全清除屏幕一次
• 一次更新所有小行星-并非每个小行星都有自己的计时器

因此，基于您的代码的示例可能看起来像这样（只需单击“运行代码段”）：

Asteroid = function() {
  this.acx = Math.floor(Math.random() * 200);
  this.acy = Math.floor(Math.random() * 10);

  this.image = new Image();
  this.image.onload = function(e) {
    this.loaded = true;
    this.aswidth = e.target.naturalWidth;
    this.asheight = e.target.naturalHeight;
  }
  this.image.src = 'https://i.imgur.com/WfQKE6T.png';
}

var asteroidCanvas = document.getElementById('asteroidCanvas');
var context = asteroidCanvas.getContext('2d');
let asteroids = [];

function spawnAsteroid() {
  asteroids.push(new Asteroid());
}

function updateCanvas() {
  context.clearRect(0,asteroidCanvas.width,asteroidCanvas.height);
  let asteroid;
  for (let a = 0; a < asteroids.length; a++) {
    asteroid = asteroids[a];
    if (asteroid.image.loaded) {

      context.drawImage(asteroid.image,asteroid.image.aswidth,asteroid.image.asheight,asteroid.acx,asteroid.acy,20,20);
      asteroid.acx += 1;
      asteroid.acy += 1;
    }
  }
}
setInterval(spawnAsteroid,2000);
setInterval(updateCanvas,50);
spawnAsteroid();

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