一个基于 Vue 3 开发的网页版大鱼吃小鱼游戏,支持键盘控制,具有丰富的海底视觉效果和实时游戏反馈系统。
- 键盘控制: 使用方向键或 WASD 键控制鱼儿移动
- 渐进难度: 根据游戏进度动态调整鱼的大小分布
- 特殊标记: 带有
@腾讯 标记的鱼儿具有特殊的红色渐变外观和金色徽章
- 实时公告: 显示吃掉的鱼儿信息,带有渐变背景和滚动效果
- 丰富海底环境: 包含水草、珊瑚、岩石和冒泡动画效果
- 控制你的鱼儿吃掉比你小的鱼来成长
- 避开比你大的鱼,否则会被吃掉
- 随着体型增大,可以吃掉更大的鱼
- 游戏会根据你的成长进度调整鱼群的大小分布
- 方向键: ↑↓←→ 控制鱼儿移动
- WASD键: W(上) A(左) S(下) D(右) 替代方向键控制
- 海底背景: 动态水草、珊瑚、岩石装饰
- 冒泡动画: 营造海底氛围
- 鱼儿外观: 根据大小和类型显示不同颜色
- 腾讯员工: 红色渐变 + 金色徽章特殊标识
- Vue 3 (Composition API)
- Vite 构建工具
- CSS3 动画和过渡效果
- 响应式设计
npm install
npm run dev
npm run build
(游戏运行时截图)
游戏采用 Vue 3 Composition API 开发,主要组件包括:
FishGame.vue: 主游戏组件,包含游戏逻辑、鱼儿生成、碰撞检测等
- 响应式数据管理游戏状态
- CSS动画实现海底环境效果
游戏包含约150种鱼类名称,其中带有 @腾讯 标记的为特殊鱼儿,具有独特的视觉效果。