logo
0
0
WeChat Login

大鱼吃小鱼游戏

一个基于 Vue 3 开发的网页版大鱼吃小鱼游戏,支持键盘控制,具有丰富的海底视觉效果和实时游戏反馈系统。

🎮 游戏特性

  • 键盘控制: 使用方向键或 WASD 键控制鱼儿移动
  • 渐进难度: 根据游戏进度动态调整鱼的大小分布
  • 特殊标记: 带有 @腾讯 标记的鱼儿具有特殊的红色渐变外观和金色徽章
  • 实时公告: 显示吃掉的鱼儿信息,带有渐变背景和滚动效果
  • 丰富海底环境: 包含水草、珊瑚、岩石和冒泡动画效果

🎯 游戏规则

  1. 控制你的鱼儿吃掉比你小的鱼来成长
  2. 避开比你大的鱼,否则会被吃掉
  3. 随着体型增大,可以吃掉更大的鱼
  4. 游戏会根据你的成长进度调整鱼群的大小分布

🕹️ 操作说明

  • 方向键: ↑↓←→ 控制鱼儿移动
  • 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种鱼类名称,其中带有 @腾讯 标记的为特殊鱼儿,具有独特的视觉效果。