# snake-game-react

**Repository Path**: ZJB2020/snake-game-react

## Basic Information

- **Project Name**: snake-game-react
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-08
- **Last Updated**: 2026-03-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">

# 单词贪吃蛇 🐍📚

<!-- 居中对齐 -->
[![React](https://img.shields.io/badge/React-19.x-blue?style=flat-square&logo=react)](https://react.dev) [![Vite](https://img.shields.io/badge/Vite-5.x-purple?style=flat-square&logo=vite)](https://vitejs.dev) [![License](https://img.shields.io/badge/license-MIT-green?style=flat-square&logo=opensourceinitiative)](./LICENSE)

</div>


一款基于 React 19 + Vite 5 开发的开源趣味学习游戏，在经典贪吃蛇玩法中融入计算机单词学习元素。

## 项目简介

玩家通过控制贪吃蛇吃到屏幕上的计算机相关单词，每次吃到单词后会显示该单词的中文解释和使用场景，让学习编程术语变得有趣又轻松。

## 功能特性

- 🎮 **经典贪吃蛇玩法** - 方向键控制，回忆童年经典
- 📚 **30+ 计算机词汇** - 涵盖 API、JSON、React、Git 等常用术语
- 💡 **单词解释弹窗** - 吃到单词立即显示中文解释和使用场景
- 📝 **学习记录** - 记录已学单词，可随时查看学习进度
- 🎨 **现代深色主题** - 护眼舒适的视觉效果

## 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| React | 19.x | UI 框架 |
| Vite | 5.x | 构建工具 |
| CSS | - | 样式 |

## 项目结构

```
snake-game-react/
├── src/
│   ├── App.jsx          # 主游戏组件（游戏逻辑、渲染、状态管理）
│   ├── App.css          # 游戏样式
│   ├── words.js         # 计算机单词词库（30个单词）
│   ├── index.css        # 全局样式
│   └── main.jsx         # 入口文件
├── docs/
│   └── DEVELOPER_GUIDE.md  # 开发者手册（代码详解、游戏流程等）
├── index.html           # HTML 模板
├── package.json         # 项目配置
└── vite.config.js       # Vite 配置
```

## 快速开始

### 📋 前置要求

- 🟢 **Node.js** >= 18.0.0
- 🟡 **npm** >= 9.0.0

### 🛠️ 安装依赖

```bash
npm install
```

### 🚀 启动开发服务器

```bash
npm run dev
```

🌐 访问 http://localhost:5173

### 🏗️ 构建生产版本

```bash
npm run build
```

### 🔍 代码检查

```bash
npm run lint
```

## ⌨️ 游戏操作

| 按键 | 功能 |
|------|------|
| ↑↓←→ | 🎮 控制蛇的移动方向 |
| 空格 / P | ⏸️ 暂停/继续游戏 |
| R | 🔄 游戏结束后重新开始 |
| L | 📋 显示/隐藏已学单词列表 |
| Enter / 空格 | ❌ 关闭单词解释弹窗 |

## 🎯 游戏规则

1. 🎮 使用方向键控制蛇移动
2. 🍎 吃到单词后蛇身变长，得分 = 单词长度 × 10
3. 💥 撞到墙壁或自己的身体游戏结束
4. 💡 吃到单词时会弹出解释卡片，按任意键继续
5. 📝 收集的单词会记录在单词列表中

## ⚙️ 配置说明

### 🎮 关键配置常量（App.jsx）

```javascript
const GRID_SIZE = 20      // 网格大小 20x20
const CELL_SIZE = 20       // 每个格子 20px
const INITIAL_SPEED = 150 // 游戏速度 150ms/格
```

### 🚀 修改游戏速度

编辑 `src/App.jsx` 中的 `INITIAL_SPEED`：
```javascript
const INITIAL_SPEED = 100 // 数值越小速度越快
```

### 📏 修改网格大小

编辑 `src/App.jsx` 中的 `GRID_SIZE` 和 `CELL_SIZE`：
```javascript
const GRID_SIZE = 30      // 更大/更小的网格
const CELL_SIZE = 15      // 对应调整格子大小
```

### 📚 添加新单词

编辑 `src/words.js` 中的 `computerWordsData` 数组：

```javascript
{
  word: "VUE",
  explanation: "渐进式 JavaScript 框架",
  usage: "用于构建用户界面的前端框架，特点是易上手、文档详细。"
}
```

## 📚 词库说明

游戏包含 30 个计算机相关单词，涵盖以下类别：

- 🎨 **前端技术**: HTML, CSS, React, Vue, Node
- 🗄️ **后端/数据库**: SQL, Database, Server, API
- 🌐 **网络协议**: HTTP, JSON, Token
- 🛠️ **工具/平台**: Git, Docker, Cloud, Deploy
- 🧩 **编程概念**: Variable, Function, Array, Object, Loop, Promise
- 📦 **其他**: Debug, Cache, Router, Module 等

## 🎨 样式主题

游戏采用深色主题，主要颜色配置在 `App.css` 中：

| 元素 | 颜色值 | 效果 |
|------|--------|------|
| 背景渐变 | `#1a1a2e` → `#16213e` | 🌌 深空背景 |
| 蛇身 | `#00ff88` | 🟢 绿色发光效果 |
| 食物/单词 | `#ff6b6b` | 🔴 红色高亮 |
| 高亮文字 | `#ffd700` | 🟡 金色文字 |

## 📚 文档

- 📖 **README** - 项目基本说明
- 📚 **开发者手册** - 详细代码分析、游戏流程、扩展指南

## 🚀 后续优化方向

- 🎵 [ ] 添加音效
- ⚡ [ ] 添加难度等级（速度递增）
- 🔊 [ ] 添加单词发音
- 📱 [ ] 支持移动端触摸控制
- 📖 [ ] 添加背单词复习模式
- 💾 [ ] 支持本地存储保存学习记录

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

1. 🍴 Fork 本仓库
2. 🌿 创建特性分支 (`git checkout -b feature/xxx`)
3. 📝 提交更改 (`git commit -m 'Add xxx'`)
4. 🚀 推送分支 (`git push origin feature/xxx`)
5. 🎯 创建 Pull Request

## 📅 版本历史

- **v1.0.0** (2026-03-08)
  - 🎮 初始版本
  - 🐍 贪吃蛇基础玩法
  - 📚 30个计算机单词
  - 💡 单词解释弹窗
  - 📝 学习记录列表

## 📜 许可证

MIT License

---

Made with ❤️ using React + Vite