工单 #8：优化界面布局，将按钮和难度选择移至画布下方

2026-03-01 07:42:21 +00:00
parent 8bfd5d8fda
commit 3098003a91
2 changed files with 21 additions and 18 deletions
--- a/index.html
+++ b/index.html
@@ -16,6 +16,18 @@
        </header>

        <main>
+            <div class="game-info">
+                <h3>游戏说明</h3>
+                <ul>
+                    <li>使用方向键 ↑ ↓ ← → 控制蛇的移动</li>
+                    <li>吃到食物得分，蛇身变长</li>
+                    <li>撞墙或撞到自己，游戏结束</li>
+                    <li>随时可以暂停或重置游戏</li>
+                </ul>
+            </div>
+
+            <canvas id="gameCanvas" width="400" height="400"></canvas>
+
            <div class="game-controls">
                <button id="startBtn" class="btn">开始游戏</button>
                <button id="pauseBtn" class="btn" disabled>暂停</button>
@@ -30,18 +42,6 @@
                    <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>