【新春创造营】马上有福一一新春射击游戏

【新春创造营】马上有福——新春射击游戏

:video_game: 项目介绍

马上有福 是一款专为新春佳节设计的 HTML5 射击网页游戏。玩家控制一台中国传统弩机,向空中发射金色的"福"字,击落象征负面运势的灰色气球(穷、病、衰、霉等),同时需要避开代表吉祥好运的红色气球(福、财、喜、寿等)。

游戏融合了中国传统文化元素与现代网页游戏技术,让玩家在欢乐的氛围中迎接新的一年——“马上有福,好运连连”!


:rocket: 使用到的 iFlow CLI 功能

在开发本项目过程中,主要使用了以下 iFlow CLI 功能:

功能 用途
write_file 创建 HTML 游戏主文件,实现 Canvas 渲染和游戏逻辑
task (frontend-tester) 使用前端测试代理验证游戏功能、UI 渲染和交互逻辑
todo_write 任务规划与管理,追踪开发进度

:laptop: 实现过程

1. 技术选型

  • HTML5 Canvas - 核心渲染引擎,支持高性能 2D 图形
  • 原生 JavaScript - 无需框架依赖,轻量级实现
  • CSS3 动画 - UI 界面美化与特效增强

:artist_palette: 视觉效果设计

  • 背景:蓝天渐变 + 动态白云 + 远山层次
  • 发射器:中国传统弩机样式,木质纹理 + 金色配件
  • 子弹:带光晕效果的动态"福"字
  • 气球:红/灰双色,带立体高光和飘动绳子
  • 粒子系统:击中时产生金色烟花或灰色烟雾效果

:video_game: 游戏机制设计

  • 瞄准系统:鼠标移动控制发射角度
  • 射击控制:点击或空格键发射
  • 计分规则:负面气球 +10 分,吉祥气球 -5 分
  • 倒计时:60 秒游戏时间

3. 词汇库设计

类型 词汇列表 气球颜色 得分
负面词汇 穷、病、衰、霉、灾、难、祸、痛、苦、愁 灰色 +10
吉祥词汇 福、财、喜、寿、吉、祥、安、顺、旺、乐 红色 -5

游戏主界面展示:蓝天白云背景、传统弩机发射器、红灰两色气球


:bullseye: 体验链接


:sparkles: 亮点特色

  1. 传统文化融合 - 弩机造型、福字子弹,浓浓中国风
  2. 精美视觉效果 - 渐变背景、立体气球、粒子特效
  3. 流畅操作体验 - 鼠标瞄准 + 快捷键射击
  4. 寓教于乐 - 消灭"穷"“病"等负面词汇,迎接"福”"财"好运
  5. 零依赖 - 纯原生实现,无需任何外部库

:tada: 创作感悟

通过 iFlow CLI 快速完成了这款新春主题射击游戏的开发。从构思到实现,整个过程非常顺畅。Canvas 的高性能渲染能力让游戏能够流畅运行,而 iFlow CLI 的任务管理功能帮助我有条不紊地推进项目进度。

希望这款游戏能为大家的新春佳节增添一份欢乐,祝大家新的一年:马上有福,好运连连!

似乎计分有问题,我射中了很多红气球 :rofl:

挺好玩的

优秀,代码注释很清晰。画面元素竟然都是canvas代码绘制的,这我没想到 :+1:

1 个赞

红气球是扣分的,应该射击那些灰色气球(穷、病、衰、霉等):rofl:

:rofl: 哈哈哈哈哈哈 原来如此 我还生怕沾到穷和病 :joy: