使用 jQuery 实现角色跳跃动画及常见问题排查

// 假设 personnage 是一个包含角色状态和方法的对象
// personnage.enSaut: 标识角色是否正在跳跃
// personnage.resetSaut: 跳跃结束后的回调方法

sauter: function () {
    // 检查角色是否已经在跳跃，避免重复触发
    if (!personnage.enSaut) {
        let lePersonnage = $("#personnage"); // 使用 jQuery 选择器获取角色元素

        // 链式调用 animate() 实现向上和向下动画
        lePersonnage.animate({ top: "-=100px" }, 300) // 向上跳跃 100px，耗时 300ms
                  .animate({ top: "+=100px" }, 300) // 向下落地 100px，耗时 300ms
                  .promise() // 返回一个 Promise 对象，表示动画链的完成
                  .done(personnage.resetSaut); // 当所有动画完成时，调用 resetSaut 方法

        // 在跳跃开始时，停止行走/奔跑的计时器，并设置跳跃状态为 true
        clearInterval(personnage.threadMarcherCourir);
        personnage.enSaut = true;
    }
},

/*
 * Méthode qui permet de réinitialiser l'objet et le personnage à la fin du saut.
 * Cette méthode sera appelée lors de l'événement "animationend" à la fin d'un saut ou lors du début d'une nouvelle partie.
 */
resetSaut: function () {
    let timeoutMouvement = 60; // 默认移动间隔

    personnage.enSaut = false; // 将跳跃状态设置为 false，允许再次跳跃

    // 根据角色期望的方向和按键状态，恢复行走/奔跑的计时器
    if (personnage.directionSouhaitee !== personnage.ARRET) {
        if (clavier.touchesAppuyees.includes(clavier.MAJUSCULE)) {
            timeoutMouvement /= 2; // 如果按住 Shift 键，则加快移动速度
        }
        if (partieEnCours) { // 确保游戏正在进行中
            clearInterval(personnage.threadMarcherCourir); // 清除旧的移动计时器
            personnage.threadMarcherCourir = setInterval(personnage.marcher, timeoutMouvement); // 启动新的移动计时器
        }
    }
},

$(document).ready(function() {
  // 假设这里定义了全局或可访问的 personnage, clavier, partieEnCours 等对象和变量
  // 例如：
  const personnage = {
      enSaut: false,
      directionSouhaitee: null, // 例如：'GAUCHE', 'DROITE', 'ARRET'
      ARRET: 'ARRET',
      threadMarcherCourir: null,
      marcher: function() { console.log("角色正在移动..."); },
      resetSaut: function() { /* 上述 resetSaut 方法内容 */ } // 提前声明或定义
  };

  const clavier = {
      touchesAppuyees: [] // 例如：['SHIFT']
  };

  let partieEnCours = true; // 游戏是否正在进行

  // 确保 resetSaut 方法在 personnage 对象中可用
  personnage.resetSaut = function() {
      let timeoutMouvement = 60;
      personnage.enSaut = false;
      if (personnage.directionSouhaitee !== personnage.ARRET) {
          if (clavier.touchesAppuyees.includes('MAJUSCULE')) { // 注意这里根据实际按键定义
              timeoutMouvement /= 2;
          }
          if (partieEnCours) {
              clearInterval(personnage.threadMarcherCourir);
              personnage.threadMarcherCourir = setInterval(personnage.marcher, timeoutMouvement);
          }
      }
  };

  // 触发跳跃的函数
  const sauter = function () {
      if (!personnage.enSaut) {
          let lePersonnage = $("#personnage");
          lePersonnage.animate({ top: "-=100px" }, 300)
                      .animate({ top: "+=100px" }, 300)
                      .promise()
                      .done(personnage.resetSaut);
          clearInterval(personnage.threadMarcherCourir);
          personnage.enSaut = true;
      }
  };

  // 绑定事件，例如点击按钮或按键触发跳跃
  $("#boutondesaut").click(function() {
      sauter();
  });

  // 假设有一个元素 ID 为 "personnage"
  // <div id="personnage" style="position: relative; top: 0px; left: 0px; width: 50px; height: 50px; background-color: blue;"></div>
  // <button id="boutondesaut">跳跃</button>
});