JavaScript跑酷游戏如何通过按键触发角色图片切换实现冲刺功能

你可以按照以下步骤修改代码实现冲刺+角色图片切换的效果：

1. 准备资源 #

先将你做好的第二张冲刺状态老鼠图放到项目的images目录下，命名为player_dash.png（也可以自定义文件名，后续代码对应修改路径即可）。

2. 修改JS代码 #

打开你的script.js文件，按如下内容调整：

2.1 新增冲刺相关变量 #

在原有变量定义部分新增以下代码：

// 原有变量定义保持不变
var character = document.getElementById('character');
var obstacle = document.getElementById('obstacle');
var score = 0
var dead = false

// 👇 新增冲刺相关变量
var characterImg = character.querySelector('img');
var isDashing = false;
const DASH_DURATION = 1000; // 冲刺持续时间，单位毫秒，可自行调整
const NORMAL_CHARACTER_IMG = "images/player.png";
const DASH_CHARACTER_IMG = "images/player_dash.png"; // 对应你准备的冲刺图路径

2.2 新增键盘监听与冲刺函数 #

在jump函数下方新增以下代码：

// 监听键盘按下事件触发冲刺
document.addEventListener('keydown', function(e) {
  // 这里用左Shift作为触发按键，可自行替换为其他按键：比如Space是空格，KeyA是A键
  if (e.code === 'ShiftLeft' && !dead && !isDashing) {
    dash();
  }
});

// 冲刺逻辑
function dash() {
  isDashing = true;
  // 切换为冲刺状态图片
  characterImg.src = DASH_CHARACTER_IMG;

  // 👇 可选：冲刺效果示例：让障碍物移动速度加快，不需要可以删掉这段
  obstacle.style.animationDuration = "1s";

  // 冲刺结束后恢复默认状态
  setTimeout(() => {
    isDashing = false;
    characterImg.src = NORMAL_CHARACTER_IMG;
    // 👇 和上面的可选效果对应，不需要也删掉
    obstacle.style.animationDuration = "2s";
  }, DASH_DURATION);
}

3. 调整游戏提示（可选） #

打开HTML文件，把原本的操作提示弹窗修改为包含冲刺操作的内容：

// 原有第二个alert改为
alert("使用鼠标左键跳跃，按下左Shift键冲刺！")

如果你需要自定义冲刺的效果，比如增加冲刺时角色的移动位移、或者冲刺期间免疫碰撞，只需要在dash函数里对应添加逻辑即可。

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