羊了个羊 - Web版本

一个基于HTML、CSS和JavaScript开发的"羊了个羊"消除类小游戏。

🎮 游戏介绍

这是一个模仿热门游戏"羊了个羊"的Web版本，玩家需要通过点击相同的道具来消除它们，目标是清空所有道具通关。

🕹️ 游戏玩法

1. 点击道具：点击游戏区域中的道具图标
2. 道具收集：被点击的道具会移动到底部的收集栏中
3. 三消规则：当收集栏中有3个相同的道具时，它们会自动消除
4. 通关条件：清空所有道具即可通关
5. 失败条件：收集栏装满（7个道具）且无法形成三消时游戏失败

🎯 游戏特色

• 层叠机制：道具会层叠摆放，被遮挡的道具无法点击
• 动态视觉效果：包含草地动画和道具移动动画
• 智能遮挡检测：使用IntersectionObserver API检测道具是否被遮挡
• 旋转特效：点击底部按钮可以旋转整个游戏区域

🛠️ 技术栈

• HTML5：游戏结构和布局
• CSS3：样式设计和动画效果
• JavaScript (ES6+)：游戏逻辑和交互
• IntersectionObserver API：遮挡检测

📁 项目结构

├── index.html          # 主页面文件
├── index.js            # 游戏逻辑脚本
├── style.css           # 样式文件
├── images/             # 游戏素材目录
│   ├── daoju*.png      # 道具图片 (1-13)
│   ├── grass*.png      # 草地图片
│   ├── fence.png       # 收集栏背景
│   └── withdraw*.png   # 底部按钮图片
└── README.md           # 项目说明文件

🚀 快速开始

1. 克隆项目

   git clone [项目地址]
   cd -bug

2. 运行游戏

   • 直接用浏览器打开 index.html 文件
   • 或者使用本地服务器：

     # 使用Python
     python -m http.server 8000
     
     # 或使用Node.js http-server
     npx http-server

3. 开始游戏

   • 在浏览器中访问游戏页面
   • 点击道具开始游戏

🎨 游戏截图

游戏界面包含：

• 上方游戏区域：道具层叠摆放
• 中间收集栏：显示已选择的道具
• 底部操作按钮：提供额外功能
• 背景草地动画：增加游戏趣味性

🔧 核心功能类

Grass 类

• 负责生成随机分布的草地装饰动画
• 提供游戏背景视觉效果

onProp 类

• 核心游戏逻辑处理
• 道具生成和随机分布
• 点击事件处理
• 三消逻辑计算
• 遮挡检测和游戏状态管理

🎯 游戏规则

1. 道具种类：共有14种不同的道具图案
2. 生成规则：每种道具生成3个，确保可以完成三消
3. 选择限制：只能选择未被遮挡的道具
4. 收集上限：收集栏最多容纳7个道具
5. 胜利条件：清空所有道具
6. 失败条件：收集栏满且无法三消

📱 适配说明

• 响应式设计，适配移动端和桌面端
• 最大宽度400px，适合手机屏幕
• 支持触摸操作

🐛 已知问题

项目名称包含"-bug"，可能存在一些待修复的问题，建议在使用过程中注意测试。

📄 许可证

本项目仅供学习和娱乐使用。

---

享受游戏乐趣！ 🎉