动画圈 Javascript Canvas

Question

我正在尝试为从一个位置到另一个位置的移动圆圈设置动画。在下面的示例中，它是从 (10, 10) 到 (50, 50) 以下是我的 Bullet class 的代码。当用户单击 space 时，我会创建一个新的 Bullet 对象并尝试为其设置动画。如何制作流畅的动画？

class Bullet{
    
    constructor(x, y){
        this.x = x;
        this.y = y;
        this.size = 10;
    }

    draw(){
        ctx.fillStyle = "green";
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI)
        ctx.fill();
    }
    fire(locationX, locationY){
        
    }
}

document.addEventListener('keydown', function(e){
        if(e.key == ' '){
            var currBullet = new Bullet(10, 10);
            currBullet.fire(50, 50);
        }
});

function reset(){
    ctx.clearRect(0, 0, w, h);
}

Answer 1

您可以使用 requestAnimationFrame 为子弹设置动画。这样做的总体目标是什么？你打算从 (10, 10) 到 (50, 50) 发射子弹吗？行驶距离是否需要限制？或者会根据玩家面向的方向射击它？是否要限制子弹数量？

此代码可以满足您的要求，但非常有限。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;

let bullets = [];

class Bullet{
    constructor(x, y){
        this.x = x;
        this.y = y;
        this.size = 10;
    }

    draw(){
        ctx.fillStyle = "green";
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI)
        ctx.fill();
    }
    update(){
        this.x += 1
        this.y += 1
    }
}

document.addEventListener('keydown', function(e){
        if(e.code === 'Space'){
            fire()      
        }
});

function fire() {
    bullets.push(new Bullet(10, 10))
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i=0; i < bullets.length; i++) {
    bullets[i].draw()
    bullets[i].update()
    if (bullets[i].x >= 50 && bullets[i].y >= 50) {
      bullets.splice(i, 1)
    }
  }
  
  requestAnimationFrame(animate)
}
animate()

<canvas id='canvas'></canvas>

动画圈 Javascript Canvas

Animate Circle Javascript Canvas

javascript

animation

html5-canvas