From d505bb75f9771a32d1356c15d458e50ad15e52f5 Mon Sep 17 00:00:00 2001 From: "engine-labs-app[bot]" <140088366+engine-labs-app[bot]@users.noreply.github.com> Date: Thu, 21 Aug 2025 15:42:58 +0000 Subject: [PATCH] Add classic Snake game in web and terminal versions with docs --- .gitignore | 22 +++ README.md | 122 +++++++++++++++++ demo.sh | 21 +++ package.json | 24 ++++ snake-game.html | 350 ++++++++++++++++++++++++++++++++++++++++++++++++ snake-game.js | 178 ++++++++++++++++++++++++ 6 files changed, 717 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100755 demo.sh create mode 100644 package.json create mode 100644 snake-game.html create mode 100755 snake-game.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ec73c3b --- /dev/null +++ b/.gitignore @@ -0,0 +1,22 @@ +# Dependency directories +node_modules/ + +# Runtime data +*.log +logs/ +*.pid +*.seed + +# OS generated files +.DS_Store +Thumbs.db + +# Editor directories and files +.vscode/ +.idea/ +*.swp +*.swo + +# Temporary files +*.tmp +*.temp diff --git a/README.md b/README.md new file mode 100644 index 0000000..b03bcaa --- /dev/null +++ b/README.md @@ -0,0 +1,122 @@ +# 贪吃蛇游戏 🐍 + +这个项目包含两个版本的贪吃蛇游戏： + +## 1. 网页版贪吃蛇 (`snake-game.html`) + +### 特点： +- 🎨 精美的渐变背景和透明效果 +- 🕹️ 支持键盘和触摸控制 +- 📱 响应式设计，适配移动设备 +- 🎵 流畅的动画效果 +- 🏆 实时得分显示 + +### 如何运行： +1. 直接在浏览器中打开 `snake-game.html` 文件 +2. 或者启动一个本地服务器： + ```bash + # 使用 Python + python3 -m http.server 8000 + + # 或者使用 Node.js + npx serve . + ``` + +### 控制方式： +- **键盘**：使用方向键控制蛇的移动 +- **触摸**：点击屏幕上的方向按钮 +- **空格键**：游戏结束后重新开始 + +## 2. 命令行版贪吃蛇 (`snake-game.js`) + +### 特点： +- 🖥️ 纯命令行界面 +- 🎮 使用 Unicode 字符显示游戏画面 +- ⚡ 轻量级，无需浏览器 +- 🔄 支持游戏重新开始 + +### 如何运行： +```bash +# 确保已安装 Node.js +node snake-game.js + +# 或者直接执行（需要执行权限） +chmod +x snake-game.js +./snake-game.js +``` + +### 控制方式： +- **方向键**：控制蛇的移动 +- **q**：退出游戏 +- **r**：游戏结束后重新开始 +- **Ctrl+C**：强制退出 + +## 游戏规则 📖 + +1. **目标**：控制蛇吃食物，让蛇变得越来越长 +2. **得分**：每吃一个食物得 10 分 +3. **结束条件**： + - 蛇撞到墙壁 + - 蛇撞到自己的身体 +4. **移动规则**：蛇不能立即反向移动（例如向上移动时不能直接向下） + +## 游戏截图 🖼️ + +### 网页版 +- 现代化的 UI 设计 +- 渐变背景和毛玻璃效果 +- 触摸友好的控制按钮 + +### 命令行版 +``` +🐍 贪吃蛇游戏 +得分: 50 +---------------------------- +⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛ +⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛ +⬛⬛⬛⬛🟢🟩🟩⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛ +⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛🍎⬛⬛⬛⬛⬛⬛⬛⬛⬛ +⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛ +``` + +## 技术实现 🛠️ + +### 网页版： +- **HTML5 Canvas** 用于游戏渲染 +- **CSS3** 动画和现代 UI 效果 +- **JavaScript ES6+** 游戏逻辑 +- **响应式设计** 适配多种设备 + +### 命令行版： +- **Node.js** 运行环境 +- **readline** 模块处理键盘输入 +- **Unicode 字符** 显示游戏元素 +- **ANSI 转义序列** 控制终端显示 + +## 扩展功能 🚀 + +可以考虑添加的功能： +- [ ] 难度级别选择 +- [ ] 最高分记录 +- [ ] 音效和背景音乐 +- [ ] 多种游戏模式 +- [ ] 网络多人对战 +- [ ] 自定义皮肤主题 + +## 系统要求 💻 + +### 网页版： +- 现代浏览器（Chrome、Firefox、Safari、Edge） +- 支持 HTML5 Canvas + +### 命令行版： +- Node.js 12+ +- 支持 ANSI 转义序列的终端 + +## 许可证 📄 + +MIT License - 可自由使用和修改 + +--- + +享受游戏吧！🎮 diff --git a/demo.sh b/demo.sh new file mode 100755 index 0000000..7583fc2 --- /dev/null +++ b/demo.sh @@ -0,0 +1,21 @@ +#!/bin/bash + +echo "🐍 贪吃蛇游戏演示" +echo "==================" +echo "" + +echo "📁 项目文件：" +ls -la + +echo "" +echo "🎮 游戏版本：" +echo "1. 网页版：snake-game.html - 在浏览器中打开" +echo "2. 命令行版：snake-game.js - 在终端中运行" + +echo "" +echo "🚀 快速启动命令：" +echo "网页版服务器：npm run web" +echo "命令行版游戏：npm start" + +echo "" +echo "📖 查看完整说明：cat README.md" diff --git a/package.json b/package.json new file mode 100644 index 0000000..8864249 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "snake-game", + "version": "1.0.0", + "description": "经典贪吃蛇游戏 - 网页版和命令行版", + "main": "snake-game.js", + "scripts": { + "start": "node snake-game.js", + "web": "python3 -m http.server 8000", + "serve": "npx serve ." + }, + "keywords": [ + "snake", + "game", + "贪吃蛇", + "javascript", + "html5", + "canvas" + ], + "author": "Engine AI", + "license": "MIT", + "engines": { + "node": ">=12.0.0" + } +} diff --git a/snake-game.html b/snake-game.html new file mode 100644 index 0000000..a44353d --- /dev/null +++ b/snake-game.html @@ -0,0 +1,350 @@ + + + + + + 贪吃蛇游戏 + + + +
+

贪吃蛇

+
得分: 0
+ + + +
+ + + + +
+ +
+ 使用方向键或点击按钮控制蛇的移动
+ 吃到食物会增长，碰到墙壁或自己就结束游戏 +
+
+ +
+

游戏结束!

+

最终得分: 0

+ +
+ + + + diff --git a/snake-game.js b/snake-game.js new file mode 100755 index 0000000..c438f9c --- /dev/null +++ b/snake-game.js @@ -0,0 +1,178 @@ +#!/usr/bin/env node + +/** + * 命令行版本的贪吃蛇游戏 + * 使用方向键控制蛇的移动 + */ + +const readline = require('readline'); +const process = require('process'); + +class SnakeGame { + constructor() { + this.width = 20; + this.height = 10; + this.snake = [{ x: Math.floor(this.width / 2), y: Math.floor(this.height / 2) }]; + this.direction = { x: 1, y: 0 }; + this.food = this.generateFood(); + this.score = 0; + this.gameRunning = true; + + // 设置控制台 + this.setupInput(); + + console.clear(); + console.log('🐍 贪吃蛇游戏'); + console.log('使用方向键控制蛇的移动，按 q 退出游戏'); + console.log('----------------------------'); + } + + setupInput() { + readline.emitKeypressEvents(process.stdin); + if (process.stdin.isTTY) { + process.stdin.setRawMode(true); + } + + process.stdin.on('keypress', (str, key) => { + if (!this.gameRunning) return; + + if (key.ctrl && key.name === 'c') { + process.exit(); + } + + switch (key.name) { + case 'up': + if (this.direction.y === 0) { + this.direction = { x: 0, y: -1 }; + } + break; + case 'down': + if (this.direction.y === 0) { + this.direction = { x: 0, y: 1 }; + } + break; + case 'left': + if (this.direction.x === 0) { + this.direction = { x: -1, y: 0 }; + } + break; + case 'right': + if (this.direction.x === 0) { + this.direction = { x: 1, y: 0 }; + } + break; + case 'q': + this.gameOver('游戏退出'); + break; + case 'r': + if (!this.gameRunning) { + this.restart(); + } + break; + } + }); + } + + generateFood() { + let food; + do { + food = { + x: Math.floor(Math.random() * this.width), + y: Math.floor(Math.random() * this.height) + }; + } while (this.snake.some(segment => segment.x === food.x && segment.y === food.y)); + + return food; + } + + update() { + if (!this.gameRunning) return; + + const head = { + x: this.snake[0].x + this.direction.x, + y: this.snake[0].y + this.direction.y + }; + + // 检查边界碰撞 + if (head.x < 0 || head.x >= this.width || head.y < 0 || head.y >= this.height) { + this.gameOver('撞墙了！'); + return; + } + + // 检查自身碰撞 + if (this.snake.some(segment => segment.x === head.x && segment.y === head.y)) { + this.gameOver('撞到自己了！'); + return; + } + + this.snake.unshift(head); + + // 检查是否吃到食物 + if (head.x === this.food.x && head.y === this.food.y) { + this.score += 10; + this.food = this.generateFood(); + } else { + this.snake.pop(); + } + } + + draw() { + console.clear(); + console.log('🐍 贪吃蛇游戏'); + console.log(`得分: ${this.score}`); + console.log('----------------------------'); + + for (let y = 0; y < this.height; y++) { + let line = ''; + for (let x = 0; x < this.width; x++) { + if (this.snake[0].x === x && this.snake[0].y === y) { + line += '🟢'; // 蛇头 + } else if (this.snake.some(segment => segment.x === x && segment.y === y)) { + line += '🟩'; // 蛇身 + } else if (this.food.x === x && this.food.y === y) { + line += '🍎'; // 食物 + } else { + line += '⬛'; // 空白 + } + } + console.log(line); + } + + if (this.gameRunning) { + console.log('\n方向键控制移动，q 退出'); + } + } + + gameOver(reason) { + this.gameRunning = false; + console.clear(); + console.log('🐍 贪吃蛇游戏'); + console.log('----------------------------'); + console.log(`游戏结束！${reason}`); + console.log(`最终得分: ${this.score}`); + console.log(`蛇的长度: ${this.snake.length}`); + console.log('----------------------------'); + console.log('按 r 重新开始，按 Ctrl+C 退出'); + } + + restart() { + this.snake = [{ x: Math.floor(this.width / 2), y: Math.floor(this.height / 2) }]; + this.direction = { x: 1, y: 0 }; + this.food = this.generateFood(); + this.score = 0; + this.gameRunning = true; + console.log('游戏重新开始！'); + } + + start() { + this.draw(); + setInterval(() => { + this.update(); + this.draw(); + }, 300); + } +} + +// 启动游戏 +const game = new SnakeGame(); +game.start();