如何精准计算对角线移动？角色对角线移动逻辑异常求助

1. 直接代码逻辑错误 #

你当前代码中bottomleft方向的x轴处理存在错误：
left方向要求x坐标减小，但你写的是this.player_x += Math.sin(rad) / 16，这会让角色向右偏移，直接导致左下对角线移动方向错误。

2. 三角函数依赖导致的方向偏移 #

即使修正了上述错误，依赖rad的sin/cos值计算步长也存在风险：
如果rad不是严格的45度（π/4），sin(rad)和cos(rad)的比例会导致x、y方向移动速度不一致，时间一长角色就会偏离预期对角线。

修正方案（针对固定四个对角线方向） #

直接使用等长的x、y步长，保证移动方向严格为对角线，同时保持和上下左右移动一致的速度：

// 基础步长（和上下左右移动的步长一致）
const baseStep = 1 / 16;
// 对角线步长：基础步长除以√2，保证合速度与上下左右相同
const diagStep = baseStep / Math.sqrt(2);

if (obj[i].direction == "topleft") {
    this.player_x -= diagStep;  
    this.player_y -= diagStep;  
    this.player_walking = 1;
    this.player_direction = 0;
} else if (obj[i].direction == "bottomleft") {  
    this.player_x -= diagStep;  // 修正：left方向x减小
    this.player_y += diagStep;  
    this.player_walking = 1;
    this.player_direction = 2;
} else if (obj[i].direction == "topright") {
    this.player_x += diagStep;  
    this.player_y -= diagStep;  
    this.player_walking = 1;
    this.player_direction = 1;
} else if (obj[i].direction == "bottomright") {
    this.player_x += diagStep;  
    this.player_y += diagStep;  
    this.player_walking = 1;
    this.player_direction = 3;
}

备选方案（支持动态朝向角度） #

如果rad是角色的实时朝向角度，需要对方向向量归一化，确保任何角度下移动方向准确：

const baseStep = 1 / 16;
// 计算方向向量（注意坐标系：若y轴向下，dy的符号可能需要调整）
let dx = Math.cos(rad);
let dy = Math.sin(rad);
// 归一化向量，避免因角度误差导致方向偏移
const vectorLength = Math.sqrt(dx * dx + dy * dy);
if (vectorLength > 0) {
    dx /= vectorLength;
    dy /= vectorLength;
}

if (obj[i].direction == "topleft") {
    this.player_x -= dx * baseStep;  
    this.player_y -= dy * baseStep;  
    this.player_walking = 1;
    this.player_direction = 0;
} else if (obj[i].direction == "bottomleft") {  
    this.player_x -= dx * baseStep;  // 修正left方向逻辑
    this.player_y += dy * baseStep;  
    this.player_walking = 1;
    this.player_direction = 2;
} else if (obj[i].direction == "topright") {
    this.player_x += dx * baseStep;  
    this.player_y -= dy * baseStep;  
    this.player_walking = 1;
    this.player_direction = 1;
} else if (obj[i].direction == "bottomright") {
    this.player_x += dx * baseStep;  
    this.player_y += dy * baseStep;  
    this.player_walking = 1;
    this.player_direction = 3;
}

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