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/

Javascript HTML5 Canvas子弹朝向鼠标

1 个答案: