JavascriptHTML5Canvas子弹朝向鼠标-JavascriptHTML5Canvasbulletstowardsmouse

0  

Bullets fly in a strait line that goes from the initial point {x, y} of the bullet creation. So, the canvas should be rotated around the initial bullet point. Bullet position can be described by another property: traveled distance.

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

To rotate objects it is not needed to translate and rotate canvas back to initial state. It is possible to use Context.context.save(); and then Context.context.restore();:

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

this.update = function(){
    for (var i = 0, len = playerBullets.length; i = 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();
    }
}

There is another bug. Mouse mouse handler is attached during drawing each frame. So, number of attached mouse handlers continuously grow. The handler should be attached only once in the function ready().

还有另一个错误。在绘制每个帧期间附加鼠标鼠标处理程序。因此,附加的鼠标处理程序的数量不断增长。处理程序应该只在函数ready()中附加一次。

Note that the sprite function rotate() does not really have to draw that sprite. It is enough to store new angle. The sprite is refreshed by the frame animation handler animloop().

请注意,精灵函数rotate()实际上不必绘制该精灵。存储新角度就足够了。精灵由帧动画处理程序animloop()刷新。

Of course it makes sense to think about deletion of bullets that are already not active.

当然,考虑删除已经不活跃的子弹是有意义的。

Fixed runable example: https://jsfiddle.net/5cmn9s86/

修复了可运行的示例:https://jsfiddle.net/5cmn9s86/