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

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>
 

style.css

@@ -48,8 +48,13 @@ main {
     text-align: center;
 }
 
-.game-controls {
+.game-info {
     margin-bottom: 20px;
+}
+
+.game-controls {
+    margin-top: 20px;
+    margin-bottom: 15px;
     display: flex;
     justify-content: center;
     gap: 10px;
@@ -122,11 +127,7 @@ main {
 }
 
 .game-info {
-    text-align: left;
+    margin-top: 20px;
-    background: #f8f9fa;
-    padding: 15px;
-    border-radius: 8px;
-    border-left: 4px solid #764ba2;
 }
 
 .game-info h3 {
@@ -137,6 +138,8 @@ main {
 .game-info ul {
     list-style: none;
     padding-left: 0;
+    display: inline-block;
+    text-align: left;
 }
 
 .game-info li {