从零构建「雷霆战机」：一个完整的Canvas飞机大战游戏

从零构建「雷霆战机」一个完整的Canvas飞机大战游戏项目概述「雷霆战机」是一款基于 HTML5 Canvas 开发的移动端飞机大战游戏采用原生 JavaScript 面向对象设计无需任何第三方游戏引擎。项目包含完整的游戏逻辑、UI 界面、本地数据持久化和 PWA 支持。项目结构Plane_game/ ├── index.html # 主页面包含游戏画布和UI ├── js/ │ ├── Game.js # 游戏主控制器 │ ├── Player.js # 玩家战机类 │ ├── Enemy.js # 敌机类 │ ├── Bullet.js # 子弹类 │ └── main.js # 入口文件处理登录和数据存储 ├── manifest.json # PWA 配置 ├── sw.js # Service Worker └── server.js # 本地开发服务器技术架构核心类设计整个游戏采用经典的面向对象架构各个类职责清晰Game 类 - 游戏大脑[Game.js]是整个游戏的核心控制器负责游戏循环使用requestAnimationFrame实现流畅的 60fps 渲染状态管理控制游戏的开始、暂停、结束状态对象管理维护玩家、敌机、子弹、粒子等所有游戏对象碰撞检测实现基于 AABB 的碰撞算法难度调节根据分数动态调整敌机生成频率gameLoop(){if(!this.gameRunning)return;constcurrentTimeperformance.now();constdeltaTimecurrentTime-this.lastTime;this.lastTimecurrentTime;this.update(deltaTime);this.render();requestAnimationFrame(()this.gameLoop());}Player 类 - 玩家战机[Player.js]封装了玩家的所有行为双发射击系统按下空格键发射双发子弹闪电技能按 J 键释放三发闪电弹带有 3 秒冷却无敌机制被击中后有 2 秒无敌时间期间闪烁提示火焰尾焰动画使用正弦函数实现动态火焰效果Enemy 类 - 敌机系统[Enemy.js]设计了两种敌机类型类型血量速度分数移动模式普通12.5100直线/正弦/余弦强化31.5300直线/正弦/余弦敌机采用三种不同的移动模式增加游戏的随机性和挑战性。强化敌机还配有血条显示。Bullet 类 - 子弹系统[Bullet.js]支持三种子弹类型玩家子弹青色双发子弹敌机子弹红色单发子弹闪电技能黄色闪电形状带有分段动画效果核心功能实现碰撞检测采用带 padding 的 AABB 碰撞算法减少误判isColliding(obj1,obj2){constpadding10;returnobj1.x-obj1.width/2paddingobj2.xobj2.width/2-paddingobj1.xobj1.width/2-paddingobj2.x-obj2.width/2paddingobj1.y-obj1.height/2paddingobj2.yobj2.height/2-paddingobj1.yobj1.height/2-paddingobj2.y-obj2.height/2padding;}粒子爆炸效果当敌机或玩家被摧毁时生成粒子系统模拟爆炸效果createExplosion(x,y,type){constcolorstypeenemy?[#ff6600,#ff0000,#ffff00]:[#00ffff,#0088ff,#ffffff];for(leti0;i15;i){this.particles.push({x,y,vx:(Math.random()-0.5)*8,vy:(Math.random()-0.5)*8,size:Math.random()*42,color:colors[Math.floor(Math.random()*colors.length)],life:1});}}数据持久化使用 IndexedDB 存储玩家信息和游戏分数实现本地排行榜functioninitDatabase(){constrequestindexedDB.open(ThunderFighterDB,1);request.onupgradeneededfunction(event){constdatabaseevent.target.result;if(!database.objectStoreNames.contains(players)){constplayerStoredatabase.createObjectStore(players,{keyPath:id,autoIncrement:true});playerStore.createIndex(name,name,{unique:false});}if(!database.objectStoreNames.contains(scores)){constscoreStoredatabase.createObjectStore(scores,{keyPath:id,autoIncrement:true});scoreStore.createIndex(playerId,playerId,{unique:false});scoreStore.createIndex(score,score,{unique:false});}};}交互设计多端适配游戏同时支持键盘和触屏操作键盘控制方向键/WASD移动战机空格键普通攻击J 键闪电技能触屏控制左右按钮水平移动普攻/闪电按钮释放技能屏幕触摸直接移动战机位置难度动态调整游戏难度随分数增加而提升this.enemySpawnIntervalMath.max(500,1500-this.score*2);敌机生成间隔从 1500ms 逐渐缩短到 500ms后期战斗更加激烈。PWA 支持项目完整支持 PWA 标准可安装到手机桌面manifest.json配置应用名称、图标、启动方式等sw.js缓存所有资源支持离线运行响应式设计适配不同屏幕尺寸// sw.js - 缓存策略constCACHE_NAMEthunder-fighter-v1;constASSETS[/index.html,/js/main.js,/js/Game.js,...];self.addEventListener(install,(event){event.waitUntil(caches.open(CACHE_NAME).then((cache)cache.addAll(ASSETS)));});运行方式# 启动开发服务器nodeserver.js# 访问游戏# PChttp://localhost:8080# 手机http://你的IP:8080总结「雷霆战机」展示了如何使用纯前端技术构建一个完整的游戏应用。核心技术亮点包括Canvas 2D 渲染实现流畅的游戏画面和动画效果面向对象设计清晰的类职责划分和代码组织本地数据存储IndexedDB 实现持久化和排行榜PWA 特性离线运行和桌面安装能力多端适配同时支持键盘和触屏操作整个项目代码结构清晰易于理解和扩展是学习 Canvas 游戏开发的优秀案例。