塔防游戏

这是一个使用HTML5 Canvas和JavaScript开发的模块化塔防游戏。

项目结构

tafang/
├── index.html              # 主HTML文件
├── style.css              # 样式文件
├── favicon.ico            # 网站图标
├── game.js                # 原始单文件版本（已废弃）
├── js/                    # 模块化JavaScript文件
│   ├── main.js           # 主入口文件
│   ├── Game.js           # 主游戏类
│   ├── config.js         # 游戏配置
│   ├── utils.js          # 工具函数
│   ├── themes.js         # 主题系统
│   ├── settings.js       # 设置管理器
│   ├── entities/         # 游戏实体
│   │   ├── Enemy.js      # 敌人类
│   │   ├── Tower.js      # 防御塔类
│   │   └── Bullet.js     # 子弹类
│   ├── effects/          # 特效系统
│   │   ├── Particle.js   # 粒子效果
│   │   ├── VisualEffect.js # 视觉特效
│   │   └── ThemeEffects.js # 主题特效系统
│   ├── managers/         # 管理器
│   │   ├── GameRenderer.js # 渲染管理器
│   │   ├── ThemeMapRenderer.js # 主题地图渲染器
│   │   └── UIManager.js    # UI管理器
│   └── renderers/        # 渲染系统
│       └── EntityRenderer.js # 精致实体渲染器
├── docs/                  # 文档目录
└── README.md              # 项目说明

模块化优势

• 代码组织清晰：按功能分离，每个模块职责明确
• 易于维护：修改某个功能时只需关注对应模块
• 可重用性：工具函数和组件可以在不同地方重用
• 易于测试：每个模块都可以单独测试
• 扩展性好：添加新功能时不会影响现有代码

模块说明

核心模块

• Game.js: 主游戏类，负责游戏循环和状态管理
• config.js: 游戏配置参数，包括各种游戏对象的属性
• utils.js: 通用工具函数，如距离计算、角度计算等
• themes.js: 主题管理系统，包含所有主题配置和ThemeManager类
• settings.js: 设置管理系统，包含游戏设置和SettingsManager类

游戏实体 (entities/)

• Enemy.js: 敌人类，包括移动、受伤、绘制等功能，支持主题化显示
• Tower.js: 防御塔类，包括攻击、升级、目标选择等，支持主题化图标
• Bullet.js: 子弹类，处理子弹飞行和命中判定

特效系统 (effects/)

• Particle.js: 粒子效果，如爆炸、烟雾等
• VisualEffect.js: 视觉特效工厂，创建各种特效
• ThemeEffects.js: 主题化特效系统，处理各主题的特效渲染

管理器 (managers/)

• GameRenderer.js: 渲染管理器，负责所有的绘制操作
• ThemeMapRenderer.js: 主题化地图渲染器，处理主题化背景和装饰
• UIManager.js: UI管理器，处理界面更新和交互，包含弹框式控制面板

渲染系统 (renderers/)

• EntityRenderer.js: 精致实体渲染器，使用Canvas原生绘制所有炮塔和敌人

主题系统

游戏支持多种主题，每个主题都有独特的视觉风格和故事背景：

🏰 经典主题

• 背景：传统的塔防游戏风格
• 敌人：基础入侵者、突击兵、重装甲兵
• 防御塔：标准防御塔、高射速塔楼、重型火炮
• 特色：简洁的设计和经典的颜色搭配

👹 兽人入侵

• 背景：中世纪奇幻世界，对抗野蛮的兽人部落
• 敌人：兽人步兵 👹、兽人狼骑 🐺、兽人酋长 👺、兽人萨满 🧙‍♂️、兽人酋王 🐉
• 防御塔：精灵弓箭手 🏹、魔法奥术塔 🔮、矮人火炮 💥
• 特色：精致的Canvas绘制，精灵风格的炮塔和充满力量的兽人造型

🤖 机械战争

• 背景：未来科技世界，对抗机器人军团
• 敌人：侦察无人机 🤖、突击攻击机 🚁、重型战斗机甲 🦾、隐形暗杀者 🕵️、AI母舰 🛸
• 防御塔：脉冲激光炮 ⚡、等离子加速器 💫、轨道破坏炮 🔥
• 特色：赛博朋克风格，科技感十足的Canvas绘制效果和炫酷的动画

防御塔类型

• 基础塔（50金币）：平衡的攻击力和射程，适合初期防御
• 快速塔（100金币）：射击速度快但攻击力较低，适合对付快速敌人
• 重炮塔（200金币）：攻击力高但射击速度慢，适合对付高血量敌人

敌人类型

• 基础敌人：50血量，中等速度，奖励10金币
• 快速敌人：30血量，高速移动，奖励15金币
• 坦克敌人：150血量，缓慢移动，奖励25金币

控制面板系统

游戏包含一个功能丰富的控制面板，可通过点击"⚙️ 控制面板"按钮打开：

主题设置

• 主题切换：在控制面板中选择不同主题
• 实时预览：每个主题都有颜色预览
• 自动保存：主题设置会自动保存到本地存储

游戏设置

• 游戏速度：调整游戏运行速度（0.5x - 3x）
• 音效音量：控制游戏音效音量（0% - 100%）
• 音乐音量：控制背景音乐音量（0% - 100%）
• 难度选择：简单、普通、困难三种难度
• 自动开始波次：开启后自动开始下一波
• 显示FPS：显示游戏帧率信息

难度说明

• 简单模式：敌人血量-20%，移动速度-10%，金币奖励+20%
• 普通模式：标准游戏体验
• 困难模式：敌人血量+50%，移动速度+20%，金币奖励-10%

游戏机制

• 防御塔升级：提高攻击力、射程和射击速度
• 经济系统：消灭敌人获得金币和分数，每波结束额外奖励100金币
• 生命系统：敌人到达终点会扣除生命值，生命值归零游戏结束
• 波次系统：共有3波敌人，每波难度递增，全部抵御即胜利

游戏目标

成功抵御3波敌人攻击即可获得胜利！

常见问题与解决方案

问题：游戏无法启动，显示模块加载错误

原因：直接打开HTML文件会使用file://协议，浏览器出于安全考虑不允许加载ES6模块。

解决方案：

1. 使用HTTP服务器运行游戏（参考上面的运行方式）
2. 检查浏览器控制台是否有CORS或模块加载错误

问题：游戏界面显示但地图空白

原因：模块导入错误或渲染器初始化失败。

解决方案：

1. 打开浏览器开发者工具（F12）
2. 查看控制台是否有错误信息
3. 确保所有模块文件都存在且路径正确

问题：游戏卡顿或卡死

解决方案：

1. 刷新页面重新开始
2. 检查浏览器性能，关闭不必要的标签页
3. 面对复杂场景时可能需要降低游戏特效

技术特点

• 模块化架构：使用ES6模块系统，代码结构清晰
• HTML5 Canvas绘图：高性能的图形渲染
• 精致Canvas绘制：脱离Emoji符号，使用原生Canvas绘制所有炮塔和敌人
• 主题化视觉效果：每个主题都有独特的视觉风格和动画效果
• 面向对象设计：JavaScript ES6类结构
• 响应式设计：支持移动设备
• 粒子系统：丰富的视觉特效和动画
• 智能算法：碰撞检测和路径寻找算法
• 性能优化：高效的游戏循环和渲染管道，优化的动画速度
• 主题系统：动态主题切换，支持主题化显示
• 设置系统：可配置的游戏参数，支持本地存储
• 弹框式UI：现代化的用户界面设计

开发者注意事项

模块依赖关系

• Game.js 是核心模块，依赖所有其他模块
• config.js 是配置中心，被多个模块引用
• utils.js 提供通用工具函数
• themes.js 是主题系统核心，被实体类和UI管理器引用
• settings.js 管理游戏设置，与UI管理器紧密集成
• 各类和管理器之间有清晰的职责分工

扩展指南

1. 添加新的敌人类型：在config.js中添加配置，在Enemy.js中添加对应的属性设置，在EntityRenderer.js中添加绘制方法
2. 添加新的防御塔：类似于敌人，修改配置和对应类，并添加Canvas绘制方法
3. 添加新特效：在VisualEffect.js中添加静态方法
4. 修改游戏地图：修改config.js中的GAME_PATH数组
5. 添加新主题：在themes.js中添加主题配置，更新UI管理器中的主题列表，在EntityRenderer.js中添加对应的绘制方法
6. 添加新设置项：在settings.js中添加设置项，在UI管理器中添加对应的界面元素
7. 优化动画效果：在EntityRenderer.js中调整动画速度参数，保持视觉效果的平缓自然

调试技巧

• 打开浏览器开发者工具（F12）查看控制台输出
• 使用console.log添加调试信息
• 游戏实例在window.game中可访问，方便调试

操作说明

鼠标操作

1. 选择防御塔：点击右侧商店中的防御塔按钮
2. 放置防御塔：在游戏区域的空地上点击放置（不能放在路径上）
3. 管理防御塔：点击已放置的防御塔进行升级或出售
4. 游戏控制：使用右侧控制面板的按钮

控制面板操作

1. 打开控制面板：点击右侧的"⚙️ 控制面板"按钮
2. 主题切换：在主题设置区域点击不同的主题卡片
3. 游戏设置：使用滑块和开关调整各种游戏参数
4. 难度选择：点击简单、普通、困难按钮切换难度
5. 应用设置：点击"应用设置"按钮保存更改
6. 重置设置：点击"重置设置"按钮恢复默认设置

键盘快捷键

• 空格键：暂停/继续游戏
• R键：重新开始游戏
• ESC键：取消当前选择或关闭弹框
• S键：打开设置面板

重要提示：由于使用了ES6模块系统，游戏必须通过HTTP服务器运行，不能直接双击HTML文件打开！

推荐方式：使用Python（最简单）

1. 确保安装了Python 3
2. 在项目目录下运行：python -m http.server 8080
3. 在浏览器中访问：http://localhost:8080

方式2：使用Live Server（VS Code用户推荐）

1. 如果您使用 VS Code，可以安装 "Live Server" 扩展
2. 右键点击 index.html 文件，选择 "Open with Live Server"

方式3：使用Node.js

1. 安装简单的HTTP服务器：npm install -g http-server
2. 在项目目录下运行：http-server
3. 在浏览器中访问显示的地址

❌ 不能使用的方式

• 直接双击HTML文件：会导致CORS错误，无法加载ES6模块
• file://协议访问：浏览器安全限制会阻止模块加载

祝你游戏愉快！