HTML5 Canvas JS：子弹朝目标最后位置射击方向异常问题求助

你猜的完全没错！问题核心就是所有子弹共享了同一个全局速度变量。每次开火时你更新了velxf和velyf，但老子弹在移动时也会使用这个新的速度值，导致它们中途被迫改变方向——这就完全违背了"子弹一旦发射就保持初始角度直线运动"的设计要求。

核心解决思路 #

给每一颗子弹单独存储专属的速度数据，而不是用全局变量共享。当子弹被创建的瞬间，就把当时计算好的速度绑定到这颗子弹对象上，后续移动时只使用这颗子弹自己的速度值。

修改后的完整代码 #

function fire(){
    counter++;
    if (37 in keys && counter >= firerate ) {
        var by = enemy1.y - posY;
        var bx = enemy1.x - posX;
        var fangle = Math.atan2(by, bx);
        // 计算当前这颗子弹的专属速度
        var bulletVelX = Math.cos(fangle) * 1;
        var bulletVelY = Math.sin(fangle) * 1;
        
        // 创建子弹时，把速度作为属性附加到子弹对象上
        bullets.push(new Box({
            x: posX,
            y: posY,
            width: 4,
            height: 4,
            color: '#7FFF00',
            velX: bulletVelX, // 新增：子弹自身的X方向速度
            velY: bulletVelY  // 新增：子弹自身的Y方向速度
        }));
        counter = 0;
    }
}

function movebullets(){
    for (var z=0; z < bullets.length; z++){
        // 每颗子弹使用自己存储的速度来移动，方向永不改变
        bullets[z].x += bullets[z].velX;
        bullets[z].y += bullets[z].velY;
    }
}

关键修改点说明 #

1. 移除全局速度变量：不再依赖velxf和velyf全局变量，而是每次开火时为当前子弹计算专属速度
2. 子弹对象绑定速度：创建子弹时，将计算好的速度作为属性存入子弹对象，让每颗子弹都有自己的"运动记忆"
3. 移动时使用自身速度：在movebullets函数中，每颗子弹调用自己的velX和velY更新位置，确保发射后方向始终不变

这样修改后，不管射手怎么移动，每颗子弹都会沿着发射瞬间计算的角度直线飞行，静止的目标必然能被命中，完全符合你的设计需求。

内容的提问来源于stack exchange，提问作者user2420951