Javascript HTML5 Canvas子弹指向鼠标

Question

我试图用Javascript开发游戏以学习新知识，到目前为止，我已经弄清楚了如何让玩家精灵看着鼠标，但是我无法使子弹以相同的方式工作，我尝试添加了笔译，但是它只是臭虫出来。 我非常感谢您的帮助:) https://jsfiddle.net/x9heq7qa/

this.update = function(){
    for (var i = 0, len = playerBullets.length; i < len; i++) {
        if(playerBullets[i].x >= 400 || playerBullets[i].y >= 400){continue;}

        Context.context.rotate(playerBullets[i].angle);
        playerBullets[i].x += playerBullets[i].vel;
        Context.context.fillRect(playerBullets[i].x,playerBullets[i].y,4,1);
        Context.context.rotate(-playerBullets[i].angle);
    }
} 

Answer 1

子弹以从子弹创建的初始点{x，y}开始的海峡线飞行。 因此，画布应绕初始项目符号点旋转。 子弹位置可以用另一个属性来描述：行进距离。

要旋转对象，不需要平移画布并将其旋转回初始状态。 可以使用Context.context.save(); 然后是Context.context.restore(); ：

this.update = function(){
    for (var i = 0, len = playerBullets.length; i < len; i++) {
        // XXX: Check that bullet is out of canvas
        if(playerBullets[i].distance >= 600) {continue;}

        playerBullets[i].distance += playerBullets[i].vel;

        Context.context.save();
        Context.context.translate(playerBullets[i].x, playerBullets[i].y);
        Context.context.rotate(playerBullets[i].angle);
        Context.context.fillRect(playerBullets[i].distance,0,4,1);
        Context.context.restore();
    }
}

还有另一个错误。 绘制每个框架时，将附加鼠标处理程序。 因此，附加的鼠标处理程序的数量持续增长。 处理程序应仅在函数ready()附加一次。

注意，精灵函数rotate()并不一定要绘制该精灵。 足以存储新角度。 通过帧动画处理程序animloop()刷新精灵。

当然，考虑删除已经不活动的项目符号是有意义的。

固定的可运行示例： https ： //jsfiddle.net/5cmn9s86/