Javascript HTML5 Canvas项目符号指向鼠标

Javascript HTML5 Canvas bullets towards mouse

本文关键字：鼠标 符号 项目 HTML5 Canvas Javascript      更新时间：2023-09-26

我试图用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);
    }
}

子弹在从子弹创建的初始点{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/

相关文章：