经典雅达利街机游戏的现代重制版！保护你的城市免受敌方导弹的攻击。
- 经典玩法：忠实还原1980年雅达利原版游戏机制
- 世界城市主题：17个世界知名城市，每个城市都有独特的建筑特色和视觉效果
- 现代视觉：使用HTML5 Canvas技术，带有粒子效果和爆炸动画
- 完整音效系统：基于Web Audio API的经典游戏音效
- 背景音乐：沉浸式的复古电子音乐BGM
- 关卡递进：随着关卡增加，敌方导弹速度和数量会增加，城市主题会循环切换
- 计分系统：击毁敌方导弹获得分数，保护城市获得奖励
- 视觉效果：炫酷的轨迹、爆炸和粒子效果
- 响应式设计：支持不同屏幕尺寸，移动设备也可正常游玩
# Windows
.\start_game.bat
# macOS/Linux
./start_game.sh# 启动本地服务器
python -m http.server 8000
# 然后在浏览器中打开
# http://localhost:8000
⚠️ 重要提示：由于背景音乐使用了Web Audio API，必须通过HTTP服务器运行游戏才能正常播放音效。直接双击HTML文件会导致音效无法播放。
- 🚀 发射音效：锯齿波频率下降模拟导弹发射
- 💥 爆炸音效：三层合成的真实爆炸声（冲击声+隆隆声+质感噪声）
- ⚡ 链式爆炸：短促的二级爆炸音效
- 🏚️ 城市被摧毁：低沉的哀鸣声
- 💀 游戏结束：下降音阶的悲伤旋律
- 🎉 关卡完成：上升音阶的胜利旋律
- 复古电子风格：80年代街机游戏风格的BGM
- 循环播放：无缝循环的背景音乐
- 智能控制：游戏暂停时自动暂停，恢复时自动恢复
- 音量平衡：低音量设计，不会掩盖游戏音效
- 🔊/🔇 音效开关：控制所有游戏音效的开关
- 🎶/🎵 音乐开关：独立控制背景音乐的开关
- 鼠标点击：在屏幕任意位置点击发射拦截导弹
- 空格键：暂停/继续游戏
- R键：重新开始游戏
- 按钮控制：使用界面上的按钮进行游戏控制
保护底部的6座城市不被敌方导弹摧毁
- 发射导弹：点击屏幕任意位置，拦截导弹会飞向该点并爆炸
- 击毁敌弹：用爆炸范围摧毁飞向城市的敌方导弹
- 关卡递进：清空所有敌方导弹后进入下一关
- 游戏结束：所有城市被摧毁时游戏结束
- 击毁敌方导弹：25分
- 关卡结束城市奖励：每座存活城市100分
| 元素 | 描述 |
|---|---|
| 主题建筑 | 你需要保护的城市，每关会展示不同世界城市的特色建筑 |
| 白色发射台 | 位于屏幕底部中央，你的导弹发射基地 |
| 青色轨迹 | 你发射的拦截导弹轨迹 |
| 红色轨迹 | 敌方攻击导弹轨迹 |
| 黄色爆炸 | 你的导弹爆炸，可以摧毁敌方导弹 |
| 红色爆炸 | 敌方导弹爆炸，会摧毁城市 |
游戏包含17个精心设计的世界城市主题，每个城市都有独特的建筑特色和视觉效果：
| 城市 | 特色建筑 | 视觉特点 |
|---|---|---|
| 🏮 北京 | 天安门风格门楼、传统飞檐屋顶 | 古都新貌，传统中国建筑风格 |
| 🗼 上海 | 东方明珠塔、现代玻璃幕墙 | 现代化都市，发光球体装饰 |
| 🌆 深圳 | LED屏幕建筑、信号塔波纹 | 科技新城，动态LED像素效果 |
| 🏢 纽约 | 帝国大厦阶梯建筑、美式窗户网格 | 不夜之城，摩天大楼群 |
| 🎌 东京 | 东京塔、霓虹灯效果 | 科技之都，红白相间塔身结构 |
| 🕰️ 伦敦 | 大本钟、维多利亚式窗户 | 雾都风情，动态时钟指针 |
| 🗼 巴黎 | 埃菲尔铁塔、法式阳台 | 浪漫之都，钢架结构和浪漫灯光 |
| 🎭 悉尼 | 悉尼歌剧院、海港灯塔 | 海港明珠，帆状屋顶和港口灯光 |
| 🏯 京都 | 清水寺、传统日式纸窗 | 古都风韵，多层屋顶和寺庙灯笼 |
| 🕌 新德里 | 印度门、莫卧儿圆顶 | 印度风情，拱形建筑和永恒之火 |
| ⛪ 莫斯科 | 圣瓦西里大教堂、洋葱头圆顶 | 红场风情，多彩圆顶和雪花效果 |
| 👑 马德里 | 皇宫、红瓦屋顶 | 西班牙风情，弗拉门戈色彩光效 |
| ⚓ 里斯本 | 贝伦塔、葡式瓷砖 | 航海之都，蓝白瓷砖和船舱窗户 |
| 🏗️ 柏林 | 勃兰登堡门、现代德式建筑 | 现代之都，胜利女神四马战车和德国色彩 |
| 🦁 开普敦 | 桌山、非洲传统图案 | 非洲之星，平顶桌山和传统几何装饰 |
| 🥝 惠灵顿 | 议会"蜂巢"、毛利螺旋图案 | 新西兰之心，独特建筑和自然元素 |
| 🏙️ 新加坡 | 滨海湾金沙、现代摩天楼 | 狮城明珠，无边泳池和热带装饰 |
- 每关显示一个城市主题，共17关为一个循环
- 关卡18重新从北京开始，关卡35再次从北京开始，如此循环
- 每个城市都有独特的色彩搭配、建筑风格和动画效果
- 预判轨迹：提前预测敌方导弹的落点
- 合理爆炸：利用爆炸范围一次摧毁多个敌方导弹
- 节约导弹：同时最多只能发射3枚导弹，合理分配
- 保护重点：优先保护剩余较少的城市
- HTML5 Canvas：游戏渲染引擎
- JavaScript ES6+：游戏逻辑和类结构
- Web Audio API：实时生成的经典游戏音效
- HTML5 Audio：背景音乐播放
- CSS3：界面样式和动画效果
- 模块化架构：代码拆分成多个逻辑清晰的文件
- 原生Web技术：无需额外依赖，直接在浏览器中运行
Missile_Command/
├── index.html # 主页面
├── style.css # 样式文件
├── README.md # 说明文档
├── start_game.bat # Windows启动脚本
├── start_game.sh # macOS/Linux启动脚本
├── music/ # 背景音乐资源
│ └── Untitled.mp3 # 游戏背景音乐
└── js/ # JavaScript模块
├── AudioManager.js # 音效和音乐管理系统
├── GameConfig.js # 游戏配置和常量
├── GameObject.js # 游戏对象类定义
├── render/ # 模块化渲染系统
│ ├── BackgroundRenderer.js # 背景和星空渲染
│ ├── ObjectRenderer.js # 城市和发射台渲染（使用城市渲染器工厂）
│ ├── cities/ # 城市渲染器模块
│ │ ├── BaseCityRenderer.js # 城市渲染器基类
│ │ ├── BeijingRenderer.js # 北京城市渲染器
│ │ ├── ShanghaiRenderer.js # 上海城市渲染器
│ │ ├── ShenzhenRenderer.js # 深圳城市渲染器
│ │ ├── NewYorkRenderer.js # 纽约城市渲染器
│ │ ├── TokyoRenderer.js # 东京城市渲染器
│ │ ├── LondonRenderer.js # 伦敦城市渲染器
│ │ ├── ParisRenderer.js # 巴黎城市渲染器
│ │ ├── SydneyRenderer.js # 悉尼城市渲染器
│ │ └── CityRendererFactory.js # 城市渲染器工厂
│ ├── MissileRenderer.js # 导弹渲染
│ ├── EffectRenderer.js # 爆炸和粒子特效
│ ├── UIRenderer.js # 用户界面渲染
│ └── GameRenderer.js # 主渲染协调器
├── game/ # 模块化游戏逻辑系统
│ ├── GameCore.js # 游戏核心基础类
│ ├── GameEvents.js # 事件处理模块
│ ├── GameMissiles.js # 导弹管理模块
│ ├── GameLogic.js # 游戏逻辑和碰撞检测
│ └── GameLevel.js # 关卡和状态管理
├── MissileCommand.js # 主要游戏协调器
└── main.js # 游戏初始化
- AudioManager.js: 完整的音效系统，包括音效生成和背景音乐播放
- GameConfig.js: 包含所有游戏参数、颜色、字体等配置，以及17个城市主题的完整配置
- GameObject.js: 定义导弹、爆炸、粒子、城市等游戏对象类
- 渲染模块: 模块化的渲染系统，提供高质量的视觉效果
BackgroundRenderer.js: 多层背景主题和星空效果ObjectRenderer.js: 城市和发射台渲染，使用城市渲染器工厂模式- 城市渲染器模块: 基于工厂模式和继承模式的城市渲染系统
BaseCityRenderer.js: 城市渲染器基类，提供通用方法和色彩处理BeijingRenderer.js: 北京渲染器（天安门、传统飞檐）ShanghaiRenderer.js: 上海渲染器（东方明珠塔、现代玻璃幕墙）ShenzhenRenderer.js: 深圳渲染器（LED屏幕、信号塔波纹）NewYorkRenderer.js: 纽约渲染器（帝国大厦、美式窗户网格）TokyoRenderer.js: 东京渲染器（东京塔、霓虹灯效果）LondonRenderer.js: 伦敦渲染器（大本钟、维多利亚式窗户）ParisRenderer.js: 巴黎渲染器（埃菲尔铁塔、法式阳台）SydneyRenderer.js: 悉尼渲染器（歌剧院、海港灯塔）KyotoRenderer.js: 京都渲染器（清水寺、传统纸窗）NewDelhiRenderer.js: 新德里渲染器（印度门、莫卧儿圆顶）MoscowRenderer.js: 莫斯科渲染器（圣瓦西里大教堂、洋葱头圆顶）MadridRenderer.js: 马德里渲染器（皇宫、弗拉门戈色彩）LisbonRenderer.js: 里斯本渲染器（贝伦塔、葡式瓷砖）BerlinRenderer.js: 柏林渲染器（勃兰登堡门、现代德式建筑）CapeTownRenderer.js: 开普敦渲染器（桌山、非洲传统图案）WellingtonRenderer.js: 惠灵顿渲染器（议会蜂巢、毛利文化）SingaporeRenderer.js: 新加坡渲染器（滨海湾金沙、热带装饰）CityRendererFactory.js: 城市渲染器工厂，管理渲染器实例
MissileRenderer.js: 发光轨迹和火箭造型导弹EffectRenderer.js: 层次丰富的爆炸和粒子特效UIRenderer.js: 发光文字和界面元素GameRenderer.js: 统一的渲染协调器
- 游戏逻辑模块: 模块化的游戏系统，代码结构清晰易维护
GameCore.js: 游戏核心基础类，包含初始化和渲染GameEvents.js: 事件处理模块，管理鼠标键盘和按钮交互GameMissiles.js: 导弹管理模块，处理玩家和敌方导弹逻辑GameLogic.js: 游戏逻辑模块，处理更新、碰撞检测和爆炸效果GameLevel.js: 关卡管理模块，处理游戏状态、关卡切换和音频
- MissileCommand.js: 主要游戏协调器，组合所有功能模块
- main.js: 游戏初始化入口和UI控制
城市渲染系统采用了经典的设计模式组合：
- 工厂模式:
CityRendererFactory负责创建和管理不同城市的渲染器实例 - 继承模式: 所有城市渲染器都继承自
BaseCityRenderer基类 - 单一职责原则: 每个城市渲染器只负责一个城市的特色建筑渲染
-
基类 (BaseCityRenderer):
- 提供通用的建筑基础绘制方法
- 实现颜色处理辅助函数（变亮、变暗、色彩转换）
- 定义标准的窗户绘制方法
- 强制子类实现
render()方法
-
具体城市渲染器:
- 每个城市都有独立的文件和类
- 实现独特的地标建筑（东方明珠塔、大本钟等）
- 自定义窗户样式和建筑风格
- 添加特色动画效果（如时钟指针转动、LED像素闪烁）
-
工厂管理器 (CityRendererFactory):
- 根据关卡号自动选择对应的城市渲染器
- 实现8关循环：关卡1→北京，关卡9→北京，关卡17→北京...
- 提供默认渲染器作为备选方案
要添加新的城市主题，需要以下步骤：
- 在
GameConfig.js中添加城市主题配置:
18: { // 新城市
name: '城市名',
nameEn: 'City Name',
background: '#颜色代码',
skyGradient: ['#颜色1', '#颜色2'],
// ... 其他配置
}- 创建新的城市渲染器 (
js/render/cities/NewCityRenderer.js):
class NewCityRenderer extends BaseCityRenderer {
constructor() {
super();
this.name = '城市名';
this.nameEn = 'City Name';
}
render(city, index, cityTheme, time, ctx) {
// 实现城市特色建筑渲染
}
}- 在工厂中注册新渲染器:
// CityRendererFactory.js
this.renderers.set(18, new NewCityRenderer());- 更新循环数量:
// CityRendererFactory.js - getRenderer方法
const themeIndex = ((level - 1) % 18) + 1;- 在
index.html中引入新的渲染器文件:
<script src="js/render/cities/NewCityRenderer.js"></script>- 模块化: 每个城市独立管理，易于维护和扩展
- 可扩展性: 添加新城市无需修改现有代码
- 性能优化: 工厂模式避免重复创建实例
- 代码复用: 基类提供通用功能，减少代码重复
- 视觉一致性: 统一的色彩处理和基础渲染方法
A: 请确保通过HTTP服务器运行游戏（使用启动脚本），而不是直接双击HTML文件。
A: 这是浏览器的CORS安全策略导致的，必须通过HTTP服务器访问。使用提供的启动脚本即可解决。
A: 游戏采用响应式设计，支持触屏操作，在移动设备上也能正常游玩。
重温经典，保卫地球！ 🌍💥🚀