一个基于 Phaser 游戏引擎开发的 HTML5 幸运硬币游戏，玩家可以点击硬币旋转获得积分，并使用积分购买更多硬币。
- 三种硬币类型：铜币、银币、金币，每种硬币有不同的价值和价格
- 点击旋转机制：点击硬币进行旋转，有 50%几率获得积分
- 商店系统：使用积分购买更多硬币，价格随拥有数量增加
- 本地存储：游戏进度自动保存到浏览器本地存储
- 动画效果：硬币旋转、闪光、移动等丰富的动画效果
- 音效系统：硬币旋转时的音效反馈
直接访问 GitHub Pages 即可开始游戏
- 克隆项目到本地：
git clone https://github.com/coderxiao24/coin-game.git- 进入项目目录：
cd coin-game- 使用任意 HTTP 服务器运行：
# 使用Python 3
python -m http.server 8000
# 或使用Node.js http-server
npx http-server
# 或使用PHP
php -S localhost:8000- 打开浏览器访问
http://localhost:8000
- 点击硬币：旋转硬币，有 50%几率获得积分（正面），50%几率不获得积分（反面）
- 购买硬币：在右侧商店使用积分购买更多硬币
| 硬币类型 | 翻币价值 | 基础价格 | 中文名称 |
|---|---|---|---|
| 铜币 | 1$ | 10$ | 铜币 |
| 银币 | 10$ | 100$ | 银币 |
| 金币 | 100$ | 1000$ | 金币 |
硬币价格计算公式：基础价格 × 当前拥有数量
- 如果没有该类型硬币，价格为
基础价格 × 0.5 - 每多拥有一个该类型硬币，价格相应增加
- 游戏引擎：Phaser 3
- 前端技术：HTML5, JavaScript, CSS3
- 存储方案：浏览器 LocalStorage
coin-game/
├── index.html # 主游戏文件
├── package.json # 项目配置
├── README.md # 项目说明文档
└── public/ # 静态资源目录
├── phaser.min.js # Phaser游戏引擎库
├── coin_spin.mp3 # 硬币旋转音效
├── CopperCoinSpin.png # 铜币旋转动画精灵图
├── CopperCoinFlash.png # 铜币闪光动画精灵图
├── SilverCoinSpin.png # 银币旋转动画精灵图
├── SilverCoinFlash.png # 银币闪光动画精灵图
├── GoldCoinSpin.png # 金币旋转动画精灵图
└── GoldCoinFlash.png # 金币闪光动画精灵图
- GameState：游戏状态管理，负责积分和硬币数据的本地存储
- CoinGame：游戏主类，包含游戏初始化、场景管理、动画控制等核心逻辑
- 旋转动画：硬币持续旋转效果
- 闪光动画：获得积分时的闪光效果
- 移动动画：硬币旋转后的随机位置移动
- 缩放动画：硬币点击时的放大缩小效果
- 文本动画：积分提示和失败提示的渐隐效果
- 硬币旋转时播放音效
- 音量设置为 70%
- 适配移动端和桌面端
- 禁用用户缩放以确保游戏体验
游戏的主要配置参数在 GAME_CONFIG 对象中定义：
const GAME_CONFIG = {
WIDTH: 600, // 游戏区域宽度
SHOP_WIDTH: 200, // 商店区域宽度
HEIGHT: 600, // 游戏区域高度
BACKGROUND_COLOR: "#52c41a", // 背景颜色
SHOP_COLOR: 0xfa8c16, // 商店背景颜色
// ... 更多配置
};- 商店新增多种购买项，比如自动翻币机器人、翻币技能等
- 实现成就系统
- 添加背景音乐
- 支持多语言
- 添加游戏统计功能
- 支持所有现代浏览器（Chrome, Firefox, Safari, Edge）
- 移动端浏览器支持
- 需要启用 JavaScript
欢迎提交 Issue 和 Pull Request 来改进这个游戏！
ISC License
xiaokaixuan
享受游戏！ 🎉