阶段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/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>