浏览器里写一个赛车游戏，Canvas加十几行代码就能让车动起来，但真正决定手感的，是速度的递进节奏和计分的准确性。速度提升太快玩家会觉得挫败，太慢又会无聊；计分如果依赖帧数累加，在不同刷新率的屏幕上分数会差出一大截。这篇文章把这两个核心问题讲透，并给出一份可以直接跑起来的完整实现。
一、游戏基础结构：Canvas绘制与循环骨架
先搭好骨架。整个游戏由三层构成：赛道背景（滚动线条制造前进感）、玩家车辆（左右移动躲避）、障碍物（随机生成、从上往下移动）。渲染统一交给Canvas的2D上下文，逻辑更新和画面绘制分离，这样后面做速度控制时思路才清晰。
核心循环使用requestAnimationFrame而不是setInterval。原因很简单：前者与浏览器刷新率同步，页面切到后台时会自动暂停，不会出现后台疯狂跑逻辑的浪费；后者的回调时机不精确，掉帧严重。循环骨架如下：
// 游戏主循环
let lastTime = 0;
function gameLoop(timestamp) {
// 计算这一帧距上一帧的毫秒数
const delta = timestamp - lastTime;
lastTime = timestamp;
update(delta); // 更新逻辑，传入真实时间差
render(); // 绘制画面
requestAnimationFrame(gameLoop);
}
requestAnimationFrame(gameLoop);这里最关键的变量是delta。所有位移、计分都必须乘以这个时间差，才能保证在60Hz、144Hz屏幕上运动速度一致。这是后面精准计分的基础，先记住这一点。
赛道滚动感用一个简单的偏移量实现：维护一个roadOffset变量，每帧根据当前速度增加，超过虚线间距就取模回绕，绘制时按这个偏移量画路面虚线，车辆不动也能产生飞驰的错觉。
二、动态加速：速度曲线的三种设计思路
加速逻辑决定了游戏的可玩性。常见做法有三种，各有取舍。
第一种是线性提速：每秒固定增加一点速度，实现最简单，speed += ACCEL * delta一行搞定。缺点是前期提升感知明显，后期玩家对速度已经麻木，而且没有上限的话后期会完全不可玩。所以线性提速必须配合速度上限，适合原型验证阶段。
第二种是分段提速：把游戏划成几个阶段，每达到一定分数或存活时间就整体换挡，速度跳一档，同时障碍物生成频率也跟着提高。这种方式的节奏感最强，玩家能明显感觉到关卡变化，是街机类游戏最常用的方案。
第三种是对数或幂次曲线：速度增长随时间衰减，前期快后期慢，无限逼近上限。公式可以写成speed = MAX * (1 - Math.exp(-t / TAU))，其中TAU控制到达最高速的快慢。这种方式手感最顺滑，不会出现突然的难度跳变。
实际项目中推荐第二种与第三种结合：用指数曲线兜底做平滑增长，再在特定分数节点手动加一档，兼顾顺滑与节奏感。下面是可用的加速实现：
const BASE_SPEED = 200; // 初始速度：像素每秒
const MAX_SPEED = 700; // 速度上限
const ACCEL = 12; // 每秒提速量
let speed = BASE_SPEED;
let playTime = 0; // 已存活秒数
function updateSpeed(delta) {
playTime += delta / 1000;
// 平滑逼近上限，越接近越慢
speed = MAX_SPEED - (MAX_SPEED - BASE_SPEED) * Math.exp(-playTime / 25);
// 每30秒额外触发一次换挡事件，提高障碍密度
if (Math.floor(playTime / 30) > gearLevel) {
gearLevel = Math.floor(playTime / 30);
obstacleInterval *= 0.85;
}
}还有一个容易被忽略的细节：速度要同时作用于赛道滚动、障碍物下移和计分速率，三处必须引用同一个speed变量。有些新手分别写死三处速度值，加速后画面和逻辑就错位了，表现为车在动、路不动，或者障碍物飘得比路快，看起来非常怪异。
三、精准计分：为什么帧数累加会出问题
先看一个常见的错误写法：
// 错误示范：依赖帧数累加
function update() {
score += 1; // 每帧加一分
scoreEl.textContent = score;
}这种写法假设每秒60帧，但144Hz显示器上每秒会执行144次，分数凭空多了一倍多。就算在同一台设备上，一旦画面复杂导致掉帧，分数又会变少。本质上，帧数是渲染频率，不是时间单位，拿它当计分依据天然不可靠。
正确做法是基于行驶距离计分：分数等于总位移除以一个系数。因为位移等于速度乘以时间，而速度是我们精确控制的变量，所以分数在任何刷新率的设备上都完全一致：
let score = 0;
const PIXELS_PER_POINT = 10; // 每前进10像素得1分
function updateScore(delta) {
const distance = speed * (delta / 1000); // 本帧位移
totalDistance += distance;
score = Math.floor(totalDistance / PIXELS_PER_POINT);
scoreEl.textContent = score;
}两个细节值得注意。一是用Math.floor而不是直接累加浮点分：显示层取整数，内部保留浮点距离，这样既不会丢精度，界面也不会闪跳小数。二是分数展示不必每帧更新DOM，可以用一个累积器控制每100毫秒刷新一次文本，减少无谓的布局开销。
另外分数建议与速度挂钩而不是与时间挂钩：速度越快得分越快，加速就有了实际收益，玩家的追求目标很自然。如果想要更深的策略性，还可以加入近距离超车的奖励分，检测玩家车辆与障碍物的最小距离，距离小于阈值且成功通过时额外加分，这类险中求胜的设计能明显提升紧张感。
四、完整可运行示例
把前面的模块拼起来，下面是一份精简但完整的实现，保存为html文件双击即可运行：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body { margin:0; background:#222; display:flex; justify-content:center; }
canvas { background:#333; }
</style>
</head>
<body>
<canvas id="game" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
const BASE_SPEED = 200, MAX_SPEED = 700;
let speed, playTime, roadOffset, totalDistance, score;
let player, obstacles, gearLevel, spawnTimer, spawnInterval;
let lastTime = 0;
function reset() {
speed = BASE_SPEED; playTime = 0; roadOffset = 0;
totalDistance = 0; score = 0; gearLevel = 0;
spawnTimer = 0; spawnInterval = 1.2;
player = { x: W/2, y: H-100, w: 40, h: 70 };
obstacles = [];
}
function update(delta) {
const dt = delta / 1000;
playTime += dt;
speed = MAX_SPEED - (MAX_SPEED - BASE_SPEED) * Math.exp(-playTime / 25);
const dist = speed * dt;
totalDistance += dist;
roadOffset = (roadOffset + dist) % 60;
score = Math.floor(totalDistance / 10);
spawnTimer += dt;
if (spawnTimer >= spawnInterval) {
spawnTimer = 0;
obstacles.push({ x: 20 + Math.random()*(W-80), y: -80, w: 40, h: 70 });
}
// 键盘控制左右移动
if (keys.left) player.x -= 300 * dt;
if (keys.right) player.x += 300 * dt;
player.x = Math.max(10, Math.min(W-50, player.x));
obstacles.forEach(o => o.y += dist);
obstacles = obstacles.filter(o => o.y < H);
// 碰撞检测
for (const o of obstacles) {
if (player.x < o.x + o.w && player.x + player.w > o.x &&
player.y < o.y + o.h && player.y + player.h > o.y) {
reset();
}
}
}
function render() {
ctx.clearRect(0, 0, W, H);
// 路面虚线
ctx.strokeStyle = '#888'; ctx.lineWidth = 4;
ctx.setLineDash([30, 30]);
ctx.lineDashOffset = -roadOffset;
ctx.beginPath();
ctx.moveTo(W/2, 0); ctx.lineTo(W/2, H); ctx.stroke();
ctx.setLineDash([]);
// 障碍物
ctx.fillStyle = '#c0392b';
obstacles.forEach(o => ctx.fillRect(o.x, o.y, o.w, o.h));
// 玩家
ctx.fillStyle = '#2ecc71';
ctx.fillRect(player.x, player.y, player.w, player.h);
// 分数
ctx.fillStyle = '#fff'; ctx.font = '20px monospace';
ctx.fillText('Score: ' + score, 10, 30);
}
const keys = { left:false, right:false };
addEventListener('keydown', e => {
if (e.key === 'ArrowLeft') keys.left = true;
if (e.key === 'ArrowRight') keys.right = true;
});
addEventListener('keyup', e => {
if (e.key === 'ArrowLeft') keys.left = false;
if (e.key === 'ArrowRight') keys.right = false;
});
function gameLoop(ts) {
if (lastTime === 0) lastTime = ts;
update(ts - lastTime);
lastTime = ts;
render();
requestAnimationFrame(gameLoop);
}
reset();
requestAnimationFrame(gameLoop);
</script>
</body>
</html>这份代码里加速、计分、碰撞、控制四个模块互相独立，方便单独替换。想进一步扩展，可以考虑加入音效、排行榜（分数存localStorage）、双人对战，或者把碰撞改成扣血机制让单局更耐玩。核心原则不变：所有运动和计分都基于时间差计算，帧率就永远影响不了游戏的公平性。
HTML赛车游戏Canvas游戏开发动态加速修改时间：2026-09-14 06:46:41