JavaScript开发网页棋盘游戏 火柴人朝向移动方向问题求助

问题根因 #

• 眼睛嘴巴朝向与移动方向相反：左右方向移动逻辑中，五官的right定位值设置颠倒，导致显示朝向和移动方向反向
• 手臂异常摆动：每次触发方向键时直接覆盖animation属性，未清除原有动画状态，导致动画帧跳变；且仅修改了单只手臂的动画规则，另一只手臂仍沿用原方向动画，出现动作冲突

修复代码 #

JavaScript 代码 #

// 提前获取所需DOM元素
const arms = document.querySelectorAll('.arm');
const moveBy = 75; // 可保留你原有的步长值
const icon = document.querySelector('.stickman');
const eye = document.querySelector('.eye');
const mouth = document.querySelector('.mouth');

window.addEventListener("keyup", (e) => {
  // 切换动画前先重置所有手臂动画，触发重绘避免跳变
  arms.forEach(arm => {
    arm.style.animation = 'none';
  });
  // 强制重绘清除动画缓存
  void arms[0].offsetWidth;

  switch (e.key) {
    case "ArrowLeft":
      update();
      icon.style.left = parseInt(icon.style.left || 0) - moveBy + "px";
      // 互换原左右方向的五官定位值，修正朝向
      eye.style.right = "25%";
      mouth.style.right = "0%";
      arms.forEach(arm => {
        arm.style.animation = "walk-arm2 1s infinite";
      });
      // 通过类控制伪元素动画，避免直接操作伪元素样式
      icon.classList.add('facing-left');
      icon.classList.remove('facing-right');
      break;
    case "ArrowRight":
      update();
      icon.style.left = parseInt(icon.style.left || 0) + moveBy + "px";
      eye.style.right = "65%";
      mouth.style.right = "40%";
      arms.forEach(arm => {
        arm.style.animation = "walk-arm 1s infinite";
      });
      icon.classList.add('facing-right');
      icon.classList.remove('facing-left');
      break;
    case "ArrowUp":
      update();
      icon.style.top = parseInt(icon.style.top || 0) - moveBy + "px";
      // 可自行补充上下方向的朝向逻辑，比如设置五官居中
      break;
    case "ArrowDown":
      update();
      icon.style.top = parseInt(icon.style.top || 0) + moveBy + "px";
      // 可自行补充上下方向的朝向逻辑
  }
  verifyAllPositions();
});

// 合并冗余的位置校验函数，减少重复代码
function verifyAllPositions() {
  const checkPoints = [
    {left: "650px", top: "50px"},
    {left: "375px", top: "325px"},
    {left: "700px", top: "600px"},
    {left: "875px", top: "75px"}
  ];
  const currentLeft = icon.style.left;
  const currentTop = icon.style.top;
  const isMatch = checkPoints.some(point => point.left === currentLeft && point.top === currentTop);
  if (isMatch) {
    const rn = Math.floor(Math.random() * 45) + 1;
    console.log(rn);
    document.querySelector("#modal" + rn).classList.add("show");
  }
}

function openShop() {
  // 原有逻辑保留即可
}

CSS 补充代码（控制手臂伪元素动画） #

/* 向左朝向时的手臂伪元素动画 */
.stickman.facing-left .arm::after {
  animation: walk-arm-after2 1s infinite;
}
/* 向右朝向时的手臂伪元素动画 */
.stickman.facing-right .arm::after {
  animation: walk-arm-after 1s infinite;
}

HTML 代码无需调整 #

优化建议 #

• 可将朝向逻辑统一封装为单独函数，后续拓展上下朝向时更易维护
• 建议将移动事件改为监听keydown配合防抖逻辑，操作响应会更流畅
• 可以给火柴人添加静止状态，松开方向键时停止走路动画，提升使用体验

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