当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript游戏触摸操作优化技巧

JavaScript游戏触摸操作优化技巧

2025-09-20 16:18:37 0浏览收藏

想要让你的 JavaScript 游戏在移动设备上大放异彩，支持触摸操作是关键！本文以热门的 Flappy Bird 游戏为例，深入浅出地讲解如何将原有的键盘事件监听巧妙地替换为触摸事件监听，让玩家仅需轻触屏幕，就能轻松操控游戏。我们将详细分析如何修改游戏代码，特别是 `handleJump` 函数，使其完美响应触摸事件。更有示例代码助你快速上手，解决可能遇到的问题。让你的游戏不再局限于电脑，随时随地畅玩无阻！掌握这些技巧，提升用户体验，让你的游戏更具吸引力！

使你的 JavaScript 游戏支持触摸操作

本文将指导你如何修改 JavaScript 游戏，使其能够响应触摸事件，从而在移动设备上获得更好的用户体验。我们将以一个 Flappy Bird 游戏的示例代码为例，详细讲解如何将键盘事件监听改为触摸事件监听，并解决可能遇到的问题。

触摸事件监听

在 JavaScript 中，我们可以使用 touchstart 事件来监听触摸屏幕的动作。与键盘事件（如 keydown 或 keypress）不同，touchstart 事件专门用于检测用户在触摸屏上的操作。

替换键盘事件监听

在游戏代码中，通常会有一个函数处理玩家的输入。在 Flappy Bird 游戏中，这个函数可能是 handleJump，负责控制小鸟的跳跃。原先的代码可能监听键盘的空格键：

document.addEventListener("keydown", handleJump);

为了支持触摸操作，我们需要将 keydown 事件监听器替换为 touchstart：

document.addEventListener("touchstart", handleJump);

处理触摸事件

handleJump 函数需要进行相应的修改，以正确响应触摸事件。

原始代码：

function handleJump(e) {
  if (e.code !== "Space") return; // 检查是否按下空格键
  timeSinceLastJump = 0;
}

这段代码检查按下的键是否是空格键。对于触摸事件，e.code 将不再适用。因此，我们需要删除此检查。

修改后的代码：

function handleJump(e) {
  timeSinceLastJump = 0;
}

现在，每次触摸屏幕时，timeSinceLastJump 都会被设置为 0，从而触发小鸟的跳跃。

示例代码

下面是修改后的 Bird.js 文件的示例代码：

const birdElem = document.querySelector("[data-bird");
const BIRD_SPEED = 0.5;
const JUMP_DURATION = 120;
let timeSinceLastJump = Number.POSITIVE_INFINITY;

export function setupBird() {
  setTop(window.innerHeight / 2);
  document.removeEventListener("touchstart", handleJump); // 移除之前的监听器
  document.addEventListener("touchstart", handleJump); // 添加触摸事件监听器
}

export function updateBird(delta) {
  if (timeSinceLastJump < JUMP_DURATION) {
    setTop(getTop() - BIRD_SPEED * delta);
  } else {
    setTop(getTop() + BIRD_SPEED * delta);
  }
  timeSinceLastJump += delta;
}

export function getBirdRect() {
  return birdElem.getBoundingClientRect();
}

function setTop(top) {
  birdElem.style.setProperty("--bird-top", top);
}

function getTop() {
  return parseFloat(getComputedStyle(birdElem).getPropertyValue("--bird-top"));
}

function handleJump(e) {
  timeSinceLastJump = 0;
}