Question

我做了一个程序，应该让几个球沿路径移动。到目前为止，我只能让一个球成功地穿过球场，因为无论何时我添加另一个球（从球阵列）它开始闪烁并且痉挛地消失。如果您有任何帮助，我将不胜感激。

<!DOCTYPE html>
<html>

<head>
 <style>
  * {
   padding: 0;
   margin: 0;
  }

  canvas {
   background: #eee;
   display: block;
   margin: 0 auto;
  }
 </style>
</head>

<body>
 <canvas id="Circuit" width="500" height="320"></canvas>

 <script>
  var dad = [];
  var canvas = document.getElementById("Circuit");
  var ctx = canvas.getContext("2d");
  var bool = false;
  var dx1 = 2;
  var dx2 = -2;
  var dy1 = 0;
  var dy2 = 2;

  var memes = [{
   x: 0,
   y: 100,

  }, {
   x: 0,
   y: 100,

  }, {
   x: 0,
   y: 100,

  }, {
   x: 0,
   y: 100,

  }];

  function drawCircle(index) {
   ctx.beginPath();
   ctx.arc(memes[index].x, memes[index].y, 10, 0, Math.PI * 2);
   ctx.fillStyle = "#0095DD";
   ctx.fill();
   ctx.closePath();
  }

  function draw(index) {
   if (index == 0) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
   }
   if (memes[index].x < 490 && memes[index].y < 291 && !bool) {
    drawCircle(index);
    memes[index].x += dx1;
    memes[index].y += dy1;
   }
   else if (memes[index].x == 490) {
    drawCircle(index);
    memes[index].x += 1;
   }
   else if (memes[index].x > 490 && memes[index].y < 291) {
    drawCircle(index);
    memes[index].y += dy2;
   }
   else if (memes[index].y == 291) {
    drawCircle(index);
    memes[index].y += 1;
   }
   else if (memes[index].y > 291 && memes[index].x > 2) {
    drawCircle(index);
    bool = true;
    memes[index].x -= 2;
   }
   else if (memes[index].x == 2 && memes[index].y > 291) {
    drawCircle(index);
    memes[index].x -= 1;
   }
   else if (memes[index].x < 2) {
    drawCircle(index);
    memes[index].y -= dy2;
    if (memes[index].y < 100) {
     clearInterval(dad[index]);
     ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
   }
   ctx.strokeStyle = "red";
   ctx.strokeRect(2, 101, 490, 190);

   ctx.strokeStyle = "blue";
   ctx.strokeRect(2, 82, 40, 40);
  }


  setTimeout(function() {
   setTimeout(function() {
   dad[1] = setInterval(function() {
    draw(1);
   }, 20);
  }, 1000);
   dad[0] = setInterval(function() {
    draw(0);
   }, 20);
  }, 1000);
 </script>

</body>

</html>

Answer 1

当第二个球试图渲染帧时发生闪烁。你有两个精灵（动画的东西）清理和绘制框架。您还有多个计时器，在制作动画时，您通常需要一个 nextFrame 函数来处理精灵的移动并绘制框架。

sprites 数组是需要移动和绘制的事物列表。我在meme sprite中添加了一些属性，这样你就可以看到他们的状态需要像＃34; bool＆＃34;值。没有它你最终影响其他球。你需要弄清楚如何在他们不再玩精灵时删除精灵。

＆＃13;

var dad = [];
  var canvas = document.getElementById("Circuit");
  var ctx = canvas.getContext("2d");
  var bool = false;
  var dx1 = 2;
  var dx2 = -2;
  var dy1 = 0;
  var dy2 = 2;

  var memes = [{
   x: 0,
   y: 100,
   color: "#0095DD",
   draw: drawMeme,
   move: moveMeme,
   vx: 1.2,
   vy: 1.5,
  }, {
   x: 0,
   y: 100,
   vx: 1.5,
   vy: 1,
   color: "#DD9500",
   draw: drawMeme,
   move: moveMeme
  }, {
   x: 0,
   y: 100,
   vx: 2,
   vy: 1,
   color: "#FF0000",
   draw: drawMeme,
   move: moveMeme
  }, {
   x: 0,
   y: 100,
   vx: 3,
   vy: 2,
   color: "#009999",
   draw: drawMeme,
   move: moveMeme
  }];

  function drawMeme(meme) {
   ctx.beginPath();
   ctx.arc(meme.x, meme.y, 10, 0, Math.PI * 2);
   ctx.fillStyle = meme.color;
   ctx.fill();
   ctx.closePath();
  }

  var sprites = [];

  function nextFrame () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    var len = sprites.length;
    for (var i = 0; i < len; i++) {
      var sprite = sprites[i];
      sprite.move(sprite);
      sprite.draw(sprite);
    }
    ctx.strokeStyle = "red";
    ctx.strokeRect(2, 101, 490, 190);
    ctx.strokeStyle = "blue";
    ctx.strokeRect(2, 82, 40, 40);
    requestAnimationFrame(nextFrame);
  }

  function moveMeme(meme) {

   if (meme.x < 490 && meme.y < 291 && !meme.bool) {
    meme.x += dx1 * meme.vx;
    meme.y += dy1 * meme.vy;
   }
   else if (meme.x == 490) {
    meme.x += 1 * meme.vx;
   }
   else if (meme.x > 490 && meme.y < 291) {
    meme.y += dy2 * meme.vy;
   }
   else if (meme.y == 291) {
    meme.y += 1 * meme.vy;
   }
   else if (meme.y > 291 && meme.x > 2) {
    meme.bool = true;
    meme.x -= 2 * meme.vx;
   }
   else if (meme.x == 2 && meme.y > 291) {
    meme.x -= 1 * meme.vx;
   }
   else if (meme.x < 2) {
    meme.y -= dy2 * meme.vy;
    if (meme.y < 100) {
     // stop drawing this sprite
     meme.draw = function(){};
     meme.delete = 1; // for a cleanup function
    }
   }

  }

  nextFrame();

  function startMeme(index) {
    var meme = memes[index];
    sprites.push(meme);
  }

  setTimeout(function() {
    
    setTimeout(function() {
      startMeme(1);
    }, 1000);
    
    startMeme(0);
    startMeme(2);
    startMeme(3);
  }, 1000);

＆＃13;

<canvas id="Circuit" width="500" height="320"></canvas>

＆＃13;

如何管理多个球动画？

1 个答案: