HTML 赛车游戏：实现动态加速与精准计分逻辑

本文详解如何修复 html 赛车游戏中「速度未按 5 秒递增」「得分误判频繁」等核心缺陷，通过时间戳控制、边界坐标比对和状态去重机制，实现每 5 秒稳定+1 速度（起始为 5），且仅在己方车尾完全超越敌方车尾时 +10 分。

要构建一个可玩性强、逻辑严谨的 HTML 赛车游戏，关键不在视觉炫酷，而在于物理模拟的准确性与游戏规则的严格兑现。原代码存在多个根本性缺陷：速度递增无时间锚点导致重启后失控；计分逻辑缺失“相对位置判定”，误将敌车离屏当作得分；更严重的是 player.score++ 被写死在每帧执行中，造成分数爆炸式增长。下面我们将逐层重构，确保满足全部需求。

✅ 核心修复点一：基于时间戳的精准加速系统

原逻辑 player.speed++ 被错误地放在 runGame() 帧循环内，导致每秒调用数十次。正确做法是：

• 记录游戏启动时间 startTime；
• 每帧计算已运行秒数 elapsed = (Date.now() - startTime) / 1000；
• 速度 = 初始值 5 + Math.floor(elapsed / 5)（即每满 5 秒 +1）；
• 关键：避免使用 setInterval，因其与 requestAnimationFrame 不同步，易累积误差。

let startTime = 0;
let lastSpeedLevel = 0;

function updateSpeed() {
  const elapsed = (Date.now() - startTime) / 1000;
  const newLevel = Math.floor(elapsed / 5);
  if (newLevel > lastSpeedLevel) {
    player.speed = 5 + newLevel;
    lastSpeedLevel = newLevel;
  }
}

⚠️ 注意：initializeGame() 中必须重置 startTime = Date.now()，否则重启后时间未归零，加速立即触发。

✅ 核心修复点二：基于车尾坐标的精准计分逻辑

需求明确：“仅当我的车（黄色）后端越过敌车（绿色）后端时，+10 分”。这要求：

• 获取两车 getBoundingClientRect()；
• 己方车尾 Y 坐标 = myCarRect.bottom；
• 敌方车尾 Y 坐标 = enemyCarRect.bottom；
• 判定条件：myCarRect.bottom > enemyCarRect.bottom 且此前未触发过该敌车计分（需记录已计分敌车 ID）。

// 在 player 对象中新增
player.scoredEnemies = new Set(); // 存储已计分的 enemyCar 元素引用

function checkScoring(myCar) {
  const myRect = myCar.getBoundingClientRect();
  document.querySelectorAll('.enemyCar').forEach(enemyCar => {
    const enemyRect = enemyCar.getBoundingClientRect();
    // 仅当我的车尾严格超过敌车尾，且该敌车未被计过分时触发
    if (myRect.bottom > enemyRect.bottom && !player.scoredEnemies.has(enemyCar)) {
      player.score += 10;
      player.scoredEnemies.add(enemyCar);
      score.innerText = `Score: ${player.score}\nSpeed: ${player.speed}`;
    }
  });
}

? 为什么不用 top 或 y？因为 top 是相对视口的绝对值，受滚动/缩放影响；getBoundingClientRect() 返回当前渲染位置，最可靠。同时，Set 确保每个敌车只计分一次，杜绝重复。

Otter.ai

一个自动的会议记录和笔记工具，会议内容生成和实时转录

下载

立即学习“前端免费学习笔记（深入）”；

✅ 完整整合：runGame() 重构示例

将上述逻辑注入主循环，并移除所有错误计分与加速代码：

function runGame() {
  if (!player.start) return;

  // 1. 更新速度（基于真实流逝时间）
  updateSpeed();

  // 2. 移动道路线与敌车
  moveLines();
  moveEnemy(document.querySelector('.myCar'));

  // 3. 处理玩家输入与位移
  const car = document.querySelector('.myCar');
  const road = gameArea.getBoundingClientRect();

  if (keys.ArrowUp && player.y > road.top + 150) player.y -= player.speed;
  if (keys.ArrowDown && player.y < road.bottom - 85) player.y += player.speed;
  if (keys.ArrowLeft && player.x > 0) player.x -= player.speed;
  if (keys.ArrowRight && player.x < road.width - 50) player.x += player.speed;

  car.style.top = player.y + 'px';
  car.style.left = player.x + 'px';

  // 4. 关键：精准计分（每次只检查一次，避免重复）
  checkScoring(car);

  // 5. 请求下一帧
  window.requestAnimationFrame(runGame);
}

function initializeGame() {
  startScreen.classList.add('hide');
  gameArea.innerHTML = '';

  player.start = true;
  player.score = 0;
  player.scoredEnemies.clear(); // 重置已计分集合
  player.x = 0;
  player.y = 0;
  player.speed = 5;
  lastSpeedLevel = 0;
  startTime = Date.now(); // ✅ 时间锚点在此重置

  // ...（初始化道路线、玩家车、敌车的代码保持不变）
}

? 最终验证清单

此方案摒弃了脆弱的帧数累加或定时器嵌套，转而依托浏览器高精度时间 API 与 DOM 布局真实坐标，从根本上保障了游戏逻辑的确定性与可重现性。对于学习者而言，理解「时间驱动」而非「帧驱动」的状态更新，是进阶前端游戏开发的关键一步。