🚀 手把手用 HTML5 Canvas 从零建立飞机大战游戏，代码全开源！话说回来，

📌 前言

上周我让 AI 帮我写个飞机大战。它给了我一个「蓝色方块」的 demo——飞机是一个蓝色方块，子弹是一条直线…，这正是很多初学者的痛点：示例太简陋、缺乏交互、根本玩不起来。于是我决定从零撸一个真正能玩的版本。

这篇文章记录了整个开发过程。从 Canvas 基础 API 到完整的飞机大战游戏，包含视差星空、粒子特效、波次难度递增等机制。所有代码已开源，文末附项目地址。其实，

🎯 这篇文章适合谁

• 想入门 Canvas 2D 绘图的前端开发者
• 对游戏开发感兴趣但不知从何下手的同学
• 想了解 requestAnimationFrame、碰撞检测、粒子程序等游戏开发主要概念的读者

🎮 效果预览

HTML5 的 标签提供了一块画布配合 JavaScript 的 Canvas API。你可以在上面自由绘制任何图形——从简单的矩形、圆形，到复杂的游戏角色和粒子特效。怎么说呢，

你的浏览器不支持 Canvas

主要三步走

// . 获取 canvas 元素
const canvas = document.querySelector;其实，// . 获取绘图上下文
const ctx = canvas.getContext;说起来，// . 开始绘制
ctx.fillStyle = '#4299ee';ctx.fillRect;// 矩形

getContext 是关键——它返回一个 CanvasRenderingContext2D 对象，所有绘制操作都通过它完成。按理说，如果要做 3D，则使用 getContext配合 Three.js 等库可以实现 WebGL 渲染。

二、Canvas 2D 基础 API

矩形绘制

Cavnas 提供了三种矩形方法：

// 填充矩形
ctx.fillStyle = '#4299ee';ctx.fillRect;// 描边矩形
ctx.strokeStyle = '#f56565';
ctx.lineWidth = 4;ctx.strokeRect;// 清除矩形区域
ctx.clearRect;

参数说明：fillRect

• x。y: 矩形左上角坐标
• width,height: 宽高值

颜色程序

ctx.fillStyle = '#4299ee';怎么说呢，// 填充色
ctx.strokeStyle = '#f56565';// 描边色
// 支持十六进制 / RGB / CSS关键字
// 示例：rgba

方法绘制

Cavnas 真正强大的地方在于方法绘制：

ctx.beginPath;ctx.moveTo，// 起点
ctx.lineTo;ctx.lineTo，ctx.closePath;老实说，// 闭合方法
ctx.fillStyle = '#ff6600';说起来，ctx.fill;

绘制圆形/弧线：

ctx.beginPath;话说回来，ctx.arc;ctx.fill，

渐变填充 & 文本绘制略...

三、动画的灵魂：requestAnimationFrame

为什么不能用 setInterval？

A lot of beginners write animations like this:

// ❌ 错误示范
setInterval => {
// 更新 + 绘制
},16);// 大约60fps

The problems are:

1. setInterval's timing is not synchronized with display refresh rate.
2. The callback keeps running even when tab is hidden → waste of CPU.
3. No automatic adaptation to high‑refresh screens .
4. You’ll often see “卡顿” or “帧率忽高忽低” – typical pain points for novices.

说到正确姿势，requestAnimationFrame

function animate{
// 清除画布
ctx.clearRect;// 更新位置
x += speed;不过，// 绘制对象
ctx.fillRect;// 下一帧回调
requestAnimationFrame;}
animate，// 启动动画

. 优势：

• # 浏览器自动匹配刷新率 # 后台标签页自动暂停 → 节省资源 # 避免掉帧，让动画更流畅 —— 正是解决「卡顿」痛点的根本办法

  ...