Pixi JS中蛇形对象按键控制圆周移动异常问题求助

问题根源分析 #

你的代码里有几个关键错误导致蛇移动异常：

• 角度单位不匹配：JavaScript的Math.cos/Math.sin只接受弧度作为参数，但你的angle变量用的是度数，直接传入会计算出完全错误的三角函数值，导致移动方向乱跳。
• 错误使用Math.floor：Math.floor只需要一个参数，你写的Math.floor(Math.cos(angle),16)是无效语法，而且强行取整会把三角函数的小数部分全部砍掉，结果要么是0要么是±1，蛇的移动步长就变成了0或±v，自然会出现静止、瞬移的情况。
• 角度边界处理不全：负数角度没有处理逻辑，当angle减到负数时，会导致三角函数计算进一步出错。
• 按键事件选择不当：keypress事件对持续按键的支持不好，换成keydown能更稳定地响应按住按键的操作。

修复后的代码 #

// 初始化角度，默认让蛇直线移动（比如0度朝右）
let angle = 0;
// 移动速度
let v = 0.1;

// 改用keydown事件，支持持续按键
window.addEventListener('keydown', e => {
  if(e.code === "KeyD") {
    angle -= 1;
  } else if(e.code === "KeyA") {
    angle += 1;
  }
  
  // 统一处理角度边界，确保始终在0-360度之间
  angle = (angle % 360 + 360) % 360;
  console.log("Angle: " + angle);
});

// 游戏循环中的移动逻辑（假设这部分在requestAnimationFrame或定时器里）
for (let i = 0; i < segments.length; i++) {
  // 将角度转为弧度，去掉错误的Math.floor，保留浮点计算实现平滑移动
  const radian = angle * Math.PI / 180;
  segments[i].y += v * Math.cos(radian);
  segments[i].x -= v * Math.sin(radian);
  
  console.log(`X: ${segments[i].x}, Y: ${segments[i].y}, Angle: ${angle}`);
}

额外说明 #

1. 圆周运动实现：按住A/D时，angle持续增减，三角函数计算出的方向不断变化，蛇就会做圆周运动；松开按键后，angle保持不变，蛇就会沿当前方向直线移动，符合你的需求。
2. 平滑移动：去掉Math.floor后，移动步长是连续的浮点值，蛇的移动会更流畅，不会出现跳变。
3. 角度边界优化：(angle % 360 + 360) % 360可以同时处理正负数角度，确保angle始终在0到360度的有效范围内。

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