阶段1：项目初始化完成

- 创建基础项目结构 - 实现 HTML/CSS/JS 基础框架 - 配置游戏界面和样式 Closes #1
2026-02-27 14:01:03 +00:00
parent f23bc6649e
commit dab43051ab
4 changed files with 602 additions and 2 deletions
--- a/README.md
+++ b/README.md
@@ -1,3 +1,98 @@
-# snake-game
+# 🐍 贪吃蛇游戏

-网页版贪吃蛇游戏 - 完整开发流程演示项目
+一个经典的网页版贪吃蛇游戏，使用纯 HTML/CSS/JavaScript 实现。
+
+## ✨ 特性
+
+- 🎮 经典贪吃蛇玩法
+- 🎯 三种难度级别（简单/中等/困难）
+- ⏸️ 支持暂停和重置
+- 📊 实时分数统计
+- 🎨 精美的渐变 UI 设计
+- ⌨️ 键盘方向键控制
+- 📱 响应式设计
+
+## 🎮 游戏玩法
+
+1. 点击"开始游戏"按钮开始
+2. 使用方向键 ↑ ↓ ← → 控制蛇的移动
+3. 吃到食物（红色圆点）获得 10 分
+4. 避免撞墙或撞到自己的身体
+5. 随时可以暂停或重置游戏
+
+## 🚀 快速开始
+
+### 方式 1：直接打开
+
+直接用浏览器打开 `index.html` 文件即可开始游戏。
+
+### 方式 2：本地服务器
+
+```bash
+# 使用 Python
+python3 -m http.server 8000
+
+# 使用 Node.js (需要安装 http-server)
+npx http-server
+
+# 然后访问 http://localhost:8000
+```
+
+### 方式 3：部署到 Web 服务器
+
+将所有文件部署到任何 Web 服务器（Nginx、Apache 等）的根目录即可。
+
+## 📦 项目结构
+
+```
+snake-game/
+├── index.html          # 主页面
+├── style.css           # 样式文件
+├── game.js            # 游戏逻辑
+├── README.md          # 项目说明
+└── LICENSE            # MIT 许可证
+```
+
+## 🛠️ 技术栈
+
+- **HTML5** - 页面结构
+- **CSS3** - 样式和动画
+- **JavaScript (ES6+)** - 游戏逻辑
+- **Canvas API** - 游戏渲染
+
+## 🎯 游戏配置
+
+可以在 `game.js` 中修改 `CONFIG` 对象来自定义游戏参数：
+
+```javascript
+const CONFIG = {
+    gridSize: 20,           // 网格大小
+    canvasSize: 400,        // 画布大小
+    easySpeed: 150,         // 简单模式速度
+    mediumSpeed: 100,       // 中等模式速度
+    hardSpeed: 50          // 困难模式速度
+};
+```
+
+## 📝 开发路线图
+
+本项目通过分阶段开发完成，展示完整的软件开发流程：
+
+- ✅ [阶段1：项目初始化](https://github.com/user/repo/issues/1)
+- ✅ [阶段2：游戏核心逻辑](https://github.com/user/repo/issues/2)
+- ✅ [阶段3：游戏 UI 界面](https://github.com/user/repo/issues/3)
+- ✅ [阶段4：交互和优化](https://github.com/user/repo/issues/4)
+- 🚧 [阶段5：CI/CD 配置](https://github.com/user/repo/issues/5)
+- 🚧 [阶段6：部署上线](https://github.com/user/repo/issues/6)
+
+## 📄 许可证
+
+本项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+---
+
+**游戏愉快！🎮**
--- a/game.js
+++ b/game.js
@@ -0,0 +1,278 @@
+// 游戏配置
+const CONFIG = {
+    gridSize: 20,           // 网格大小
+    canvasSize: 400,        // 画布大小
+    easySpeed: 150,         // 简单模式速度
+    mediumSpeed: 100,       // 中等模式速度
+    hardSpeed: 50          // 困难模式速度
+};
+
+// 游戏状态
+let snake = [];
+let food = {};
+let direction = 'right';
+let nextDirection = 'right';
+let score = 0;
+let gameLoop = null;
+let isPaused = false;
+let isGameRunning = false;
+
+// DOM 元素
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+const scoreElement = document.getElementById('score');
+const startBtn = document.getElementById('startBtn');
+const pauseBtn = document.getElementById('pauseBtn');
+const resetBtn = document.getElementById('resetBtn');
+const difficultySelect = document.getElementById('difficulty');
+
+// 初始化游戏
+function initGame() {
+    snake = [
+        { x: 5, y: 10 },
+        { x: 4, y: 10 },
+        { x: 3, y: 10 }
+    ];
+    direction = 'right';
+    nextDirection = 'right';
+    score = 0;
+    isPaused = false;
+    isGameRunning = false;
+    updateScore();
+    spawnFood();
+    draw();
+}
+
+// 生成食物
+function spawnFood() {
+    const maxPos = CONFIG.canvasSize / CONFIG.gridSize;
+    let newFood;
+
+    do {
+        newFood = {
+            x: Math.floor(Math.random() * maxPos),
+            y: Math.floor(Math.random() * maxPos)
+        };
+    } while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));
+
+    food = newFood;
+}
+
+// 更新游戏状态
+function update() {
+    if (isPaused) return;
+
+    direction = nextDirection;
+
+    // 计算蛇头新位置
+    const head = { ...snake[0] };
+
+    switch (direction) {
+        case 'up':
+            head.y -= 1;
+            break;
+        case 'down':
+            head.y += 1;
+            break;
+        case 'left':
+            head.x -= 1;
+            break;
+        case 'right':
+            head.x += 1;
+            break;
+    }
+
+    // 检查碰撞
+    if (checkCollision(head)) {
+        gameOver();
+        return;
+    }
+
+    // 添加蛇头
+    snake.unshift(head);
+
+    // 检查是否吃到食物
+    if (head.x === food.x && head.y === food.y) {
+        score += 10;
+        updateScore();
+        spawnFood();
+    } else {
+        snake.pop();
+    }
+
+    draw();
+}
+
+// 检查碰撞
+function checkCollision(head) {
+    const maxPos = CONFIG.canvasSize / CONFIG.gridSize;
+
+    // 撞墙检测
+    if (head.x < 0 || head.x >= maxPos || head.y < 0 || head.y >= maxPos) {
+        return true;
+    }
+
+    // 撞自己检测
+    return snake.some(segment => segment.x === head.x && segment.y === head.y);
+}
+
+// 绘制游戏
+function draw() {
+    // 清空画布
+    ctx.fillStyle = '#2c3e50';
+    ctx.fillRect(0, 0, CONFIG.canvasSize, CONFIG.canvasSize);
+
+    // 绘制蛇
+    snake.forEach((segment, index) => {
+        const gradient = ctx.createRadialGradient(
+            segment.x * CONFIG.gridSize + CONFIG.gridSize / 2,
+            segment.y * CONFIG.gridSize + CONFIG.gridSize / 2,
+            0,
+            segment.x * CONFIG.gridSize + CONFIG.gridSize / 2,
+            segment.y * CONFIG.gridSize + CONFIG.gridSize / 2,
+            CONFIG.gridSize
+        );
+
+        if (index === 0) {
+            gradient.addColorStop(0, '#2ecc71');
+            gradient.addColorStop(1, '#27ae60');
+        } else {
+            gradient.addColorStop(0, '#82e0aa');
+            gradient.addColorStop(1, '#58d68d');
+        }
+
+        ctx.fillStyle = gradient;
+        ctx.fillRect(
+            segment.x * CONFIG.gridSize + 1,
+            segment.y * CONFIG.gridSize + 1,
+            CONFIG.gridSize - 2,
+            CONFIG.gridSize - 2
+        );
+    });
+
+    // 绘制食物
+    const foodGradient = ctx.createRadialGradient(
+        food.x * CONFIG.gridSize + CONFIG.gridSize / 2,
+        food.y * CONFIG.gridSize + CONFIG.gridSize / 2,
+        0,
+        food.x * CONFIG.gridSize + CONFIG.gridSize / 2,
+        food.y * CONFIG.gridSize + CONFIG.gridSize / 2,
+        CONFIG.gridSize
+    );
+    foodGradient.addColorStop(0, '#e74c3c');
+    foodGradient.addColorStop(1, '#c0392b');
+
+    ctx.fillStyle = foodGradient;
+    ctx.beginPath();
+    ctx.arc(
+        food.x * CONFIG.gridSize + CONFIG.gridSize / 2,
+        food.y * CONFIG.gridSize + CONFIG.gridSize / 2,
+        CONFIG.gridSize / 2 - 2,
+        0,
+        Math.PI * 2
+    );
+    ctx.fill();
+}
+
+// 更新分数
+function updateScore() {
+    scoreElement.textContent = score;
+}
+
+// 游戏结束
+function gameOver() {
+    stopGame();
+    alert(`游戏结束！得分：${score}\n点击"重置"重新开始`);
+}
+
+// 开始游戏
+function startGame() {
+    if (isGameRunning) return;
+
+    initGame();
+    isGameRunning = true;
+    startBtn.disabled = true;
+    pauseBtn.disabled = false;
+    difficultySelect.disabled = true;
+
+    const speed = getGameSpeed();
+    gameLoop = setInterval(update, speed);
+}
+
+// 停止游戏
+function stopGame() {
+    if (gameLoop) {
+        clearInterval(gameLoop);
+        gameLoop = null;
+    }
+    isGameRunning = false;
+    startBtn.disabled = false;
+    pauseBtn.disabled = true;
+    pauseBtn.textContent = '暂停';
+    difficultySelect.disabled = false;
+}
+
+// 暂停/继续游戏
+function togglePause() {
+    if (!isGameRunning) return;
+
+    isPaused = !isPaused;
+
+    if (isPaused) {
+        pauseBtn.textContent = '继续';
+    } else {
+        pauseBtn.textContent = '暂停';
+    }
+}
+
+// 重置游戏
+function resetGame() {
+    stopGame();
+    initGame();
+}
+
+// 获取游戏速度
+function getGameSpeed() {
+    const difficulty = difficultySelect.value;
+
+    switch (difficulty) {
+        case 'easy':
+            return CONFIG.easySpeed;
+        case 'medium':
+            return CONFIG.mediumSpeed;
+        case 'hard':
+            return CONFIG.hardSpeed;
+        default:
+            return CONFIG.mediumSpeed;
+    }
+}
+
+// 键盘控制
+document.addEventListener('keydown', (e) => {
+    const key = e.key;
+
+    if (key === 'ArrowUp' && direction !== 'down') {
+        nextDirection = 'up';
+        e.preventDefault();
+    } else if (key === 'ArrowDown' && direction !== 'up') {
+        nextDirection = 'down';
+        e.preventDefault();
+    } else if (key === 'ArrowLeft' && direction !== 'right') {
+        nextDirection = 'left';
+        e.preventDefault();
+    } else if (key === 'ArrowRight' && direction !== 'left') {
+        nextDirection = 'right';
+        e.preventDefault();
+    } else if (key === ' ' && isGameRunning) {
+        togglePause();
+        e.preventDefault();
+    }
+});
+
+// 按钮事件
+startBtn.addEventListener('click', startGame);
+pauseBtn.addEventListener('click', togglePause);
+resetBtn.addEventListener('click', resetGame);
+
+// 初始化
+initGame();
--- a/index.html
+++ b/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>贪吃蛇游戏</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🐍 贪吃蛇游戏</h1>
+            <div class="score-board">
+                <span>得分: <span id="score">0</span></span>
+            </div>
+        </header>
+
+        <main>
+            <div class="game-controls">
+                <button id="startBtn" class="btn">开始游戏</button>
+                <button id="pauseBtn" class="btn" disabled>暂停</button>
+                <button id="resetBtn" class="btn">重置</button>
+            </div>
+
+            <div class="difficulty-selector">
+                <label for="difficulty">难度：</label>
+                <select id="difficulty">
+                    <option value="easy">简单</option>
+                    <option value="medium" selected>中等</option>
+                    <option value="hard">困难</option>
+                </select>
+            </div>
+
+            <canvas id="gameCanvas" width="400" height="400"></canvas>
+
+            <div class="game-info">
+                <h3>游戏说明</h3>
+                <ul>
+                    <li>使用方向键 ↑ ↓ ← → 控制蛇的移动</li>
+                    <li>吃到食物得分，蛇身变长</li>
+                    <li>撞墙或撞到自己，游戏结束</li>
+                    <li>随时可以暂停或重置游戏</li>
+                </ul>
+            </div>
+        </main>
+    </div>
+
+    <script src="game.js"></script>
+</body>
+</html>
--- a/style.css
+++ b/style.css
@@ -0,0 +1,177 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.container {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    padding: 30px;
+    max-width: 600px;
+    width: 100%;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+header h1 {
+    color: #333;
+    font-size: 2.5em;
+    margin-bottom: 10px;
+}
+
+.score-board {
+    font-size: 1.5em;
+    color: #764ba2;
+    font-weight: bold;
+}
+
+#score {
+    color: #e74c3c;
+}
+
+main {
+    text-align: center;
+}
+
+.game-controls {
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+
+.btn {
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: bold;
+}
+
+#startBtn {
+    background: #27ae60;
+    color: white;
+}
+
+#startBtn:hover {
+    background: #229954;
+}
+
+#pauseBtn {
+    background: #f39c12;
+    color: white;
+}
+
+#pauseBtn:hover {
+    background: #e67e22;
+}
+
+#pauseBtn:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+}
+
+#resetBtn {
+    background: #e74c3c;
+    color: white;
+}
+
+#resetBtn:hover {
+    background: #c0392b;
+}
+
+.difficulty-selector {
+    margin-bottom: 20px;
+    font-size: 1.1em;
+    color: #333;
+}
+
+#difficulty {
+    padding: 5px 10px;
+    font-size: 16px;
+    border: 2px solid #764ba2;
+    border-radius: 5px;
+    background: white;
+    cursor: pointer;
+}
+
+#gameCanvas {
+    background: #2c3e50;
+    border: 4px solid #34495e;
+    border-radius: 10px;
+    display: block;
+    margin: 0 auto 20px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+}
+
+.game-info {
+    text-align: left;
+    background: #f8f9fa;
+    padding: 15px;
+    border-radius: 8px;
+    border-left: 4px solid #764ba2;
+}
+
+.game-info h3 {
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.game-info ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+.game-info li {
+    padding: 5px 0;
+    color: #555;
+    position: relative;
+    padding-left: 20px;
+}
+
+.game-info li::before {
+    content: "🎮";
+    position: absolute;
+    left: 0;
+}
+
+@media (max-width: 600px) {
+    .container {
+        padding: 20px;
+    }
+
+    header h1 {
+        font-size: 1.8em;
+    }
+
+    #gameCanvas {
+        width: 100%;
+        height: auto;
+    }
+
+    .game-controls {
+        flex-wrap: wrap;
+    }
+
+    .btn {
+        flex: 1;
+        min-width: 80px;
+    }
+}