【新春创造营】小马接元宝 
项目介绍
「小马接元宝」是一款专为马年设计的新春趣味小游戏，玩家通过鼠标或键盘控制底部的小马，接住从天而降的元宝和红包，同时要避开小石头。游戏融合了传统新春元素与现代交互体验，是一款老少皆宜的轻度休闲游戏。
游戏特色：
-
双模式控制：支持鼠标滑动和键盘方向键 -
新春元素：元宝、红包、小石头等道具 -
难度递增：掉落速度随时间逐渐加快 -
限时挑战：90秒倒计时，考验反应速度
使用工具
本项目使用 iFlow CLI 辅助开发，通过其强大的文件操作和项目管理功能，快速完成了从创意到实现的全过程。
主要使用的功能：
-
write_file- 快速生成 HTML 文件 -
read_file- 读取参考文件样式 -
run_shell_command- 文件预览和验证 -
todo_write- 项目任务规划
实现过程
1. 核心架构设计
采用经典的 HTML5 + CSS3 + 原生 JavaScript 三层架构，无需任何依赖即可运行：
┌─────────────────────────────────────┐
│ HTML 结构层 │
│ - 游戏容器 .game-area │
│ - 小马元素 #pony │
│ - 道具容器（动态生成） │
│ - UI信息栏（分数/时间） │
├─────────────────────────────────────┤
│ CSS 样式层 │
│ - 渐变背景 │
│ - 绝对定位布局 │
│ - 动画效果（得分浮动） │
├─────────────────────────────────────┤
│ JS 逻辑层 │
│ - 游戏状态管理 │
│ - 事件监听（鼠标/键盘） │
│ - 碰撞检测算法 │
│ - 游戏循环控制 │
└─────────────────────────────────────┘
2. 关键技术实现
2.1 小马坐标跟随（核心亮点）
鼠标控制实现：
gameArea.addEventListener('mousemove', (e) => {
const rect = gameArea.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
// 边界限制
const maxX = gameArea.offsetWidth - 50;
const minX = 25;
gameState.ponyX = Math.max(minX, Math.min(mouseX, maxX));
pony.style.left = gameState.ponyX + 'px';
});
键盘控制实现：
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
gameState.ponyX = Math.max(25, gameState.ponyX - CONFIG.ponySpeed);
} else if (e.key === 'ArrowRight') {
const maxX = gameArea.offsetWidth - 25;
gameState.ponyX = Math.min(maxX, gameState.ponyX + CONFIG.ponySpeed);
}
pony.style.left = gameState.ponyX + 'px';
});
2.2 道具下落与碰撞检测
// 下落逻辑
function dropItems() {
gameState.items.forEach((item, index) => {
item.y += gameState.dropSpeed;
item.element.style.top = item.y + 'px';
// 碰撞检测
if (checkCollision(ponyRect, itemRect)) {
handleCollision(item, index);
}
// 落地检测
if (item.y > gameArea.offsetHeight) {
item.element.remove();
gameState.items.splice(index, 1);
}
});
}
// 碰撞检测算法
function checkCollision(rect1, rect2) {
return rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.y + rect1.height > rect2.y;
}
2.3 难度渐进系统
// 游戏循环中逐步提升速度
function gameLoop() {
// ...
gameState.dropSpeed += CONFIG.speedIncrease / 60;
// ...
}
3. 配置化设计
游戏支持灵活定制，通过 CONFIG 对象轻松调整：
const CONFIG = {
gameTime: 90, // 游戏时间（秒）
initialSpeed: 2, // 初始掉落速度
speedIncrease: 0.05, // 速度增量
spawnInterval: 1000, // 生成间隔（毫秒）
ponySpeed: 8, // 键盘移动速度
ponyPosition: 20, // 小马距底部距离
boundaryPadding: 25 // 边界留白
};
// 道具类型配置
const ITEMS = [
{ type: 'coin', emoji: '🪙', score: 10, weight: 50 },
{ type: 'redpacket', emoji: '🧧', score: 20, weight: 30 },
{ type: 'stone', emoji: '🪨', score: -10, weight: 20 }
];
游戏预览
┌──────────────────────────────────────────────────┐
│ 🏮 小马接元宝 🐴 │
├──────────────────────────────────────────────────┤
│ 分数：150 ████████████░░░ 时间：67秒 │
├──────────────────────────────────────────────────┤
│ │
│ 🧧 │
│ │
│ 🪙 │
│ │
│ │
│ 🪨 │
│ │
│ 🐴 ← 小马（玩家控制） │
│ │
└──────────────────────────────────────────────────┘
视觉效果：
-
深色渐变背景，营造沉稳的游戏氛围 -
金色边框和按钮，呼应新春主题 -
实时分数动画，接住道具时弹出 +10 / -10 提示 -
鼠标隐藏，游戏区域更加沉浸
可定制方向
关闭单一控制方式
// 仅保留鼠标控制
document.removeEventListener('keydown', keyHandler);
// 仅保留键盘控制
gameArea.removeEventListener('mousemove', mouseHandler);
添加新道具
{ type: 'fu', emoji: '🧧', score: 0, effect: 'pause', weight: 10 }
// 效果：接中暂停游戏5秒
调整难度
initialSpeed: 3, // 提高初始速度
speedIncrease: 0.1, // 加快难度递增
spawnInterval: 600, // 加快道具生成
总结
「小马接元宝」是一个典型的「入门到进阶」HTML5 游戏项目：
入门友好：无需框架，纯原生实现
逻辑清晰：状态管理 + 事件监听 + 游戏循环
扩展性强：配置化设计，支持灵活定制
体验流畅：60fps 动画，响应式控制
整个制作过程仅用时约 15 分钟，非常适合作为前端新手练手项目。
体验链接
直接用浏览器打开即可体验！祝大家马年大吉，财源滚滚！
