如何使JavaScript游戏触摸友好？

Question

我通过遵循YouTube教程创建了Flappy Bird。在bird.js内部有一个称为handing jump的功能，当我放置“空间”时，该功能在该功能中，每当我在键盘上按Space键时，鸟就会跳跃，但是当我将其更改为“ TouchStart”时，当我触摸时，鸟不会跳跃屏幕！我在做什么错？我应该怎么办？

主页（F.JS）：

import { updateBird, setupBird, getBirdRect } from "./Bird.js";
import {
  updatePipes,
  setupPipes,
  getPassedPipesCount,
  getPipesRects,
} from "./Pipe.js";

//document.addEventListener("keypress", handleStart, { once: true });
document.addEventListener("touchstart", handleStart, { once: true });
const title = document.querySelector("[data-title]");
const subtitle = document.querySelector("[data-subtitle]");

let lastTime;
function updateLoop(time) {
  if (lastTime == null) {
    lastTime = time;
    window.requestAnimationFrame(updateLoop);
    return;
  }
  const delta = time - lastTime;
  updateBird(delta);
  updatePipes(delta);
  if (checkLose()) return handleLose();
  lastTime = time;
  window.requestAnimationFrame(updateLoop);
}

function checkLose() {
  const birdRect = getBirdRect();
  const insidePipe = getPipesRects().some((rect) =>
    isCollision(birdRect, rect)
  );
  const outsideWorld = birdRect.top < 0 || birdRect.bottom > window.innerHeight;
  return outsideWorld || insidePipe;
}

function isCollision(rect1, rect2) {
  return (
    rect1.left < rect2.right &&
    rect1.top < rect2.bottom &&
    rect1.right > rect2.left &&
    rect1.bottom > rect2.top
  );
}

function handleStart() {
  title.classList.add("hide");
  setupBird();
  setupPipes();
  lastTime = null;
  window.requestAnimationFrame(updateLoop);
}

function handleLose() {
  setTimeout(() => {
    title.classList.remove("hide");
    subtitle.classList.remove("hide");
    subtitle.textContent = `${getPassedPipesCount()} Pipes`;
    document.addEventListener("touchstart", handleStart, { once: true });
  }, 100);
}

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); //keydown
  document.addEventListener("touchstart", handleJump); //keydown
}

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) {
  if (e.code !== "touchstart") return;

  timeSinceLastJump = 0;
}

Answer 1

删除退货来修复它

我通过在以下方式之前

function handleJump(e) {
  if (e.code !== "touchstart") return;

  timeSinceLastJump = 0;
}

：

function handleJump(e) {
  if (e.code !== "touchstart");

  timeSinceLastJump = 0;
}