fengjiansun · fengjiansun · Dec 8, 2025
diff --git a/src/css/main-snake.css b/src/css/main-snake.css
@@ -85,6 +85,16 @@ a.snake-link:hover {
  position: absolute;
 }

+.snake-bomb-block {
+  margin: 0px;
+  padding: 0px;
+  background-color: #ff0000;
+  border: 2px solid #000000;
+  position: absolute;
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
+}
+
 .snake-playing-field {
  margin: 0px;
  padding: 0px;

diff --git a/src/index.html b/src/index.html
@@ -26,6 +26,96 @@
        z-index: 10000;
        padding: 5px;
      }
+
+      /* 游戏说明面板样式 */
+      .instructions-panel {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.8);
+        z-index: 20000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .instructions-content {
+        background-color: white;
+        padding: 30px;
+        border-radius: 10px;
+        max-width: 600px;
+        max-height: 80%;
+        overflow-y: auto;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+      }
+
+      .instructions-content h2 {
+        margin-top: 0;
+        color: #333;
+        text-align: center;
+      }
+
+      .instructions-content h3 {
+        color: #555;
+        margin-top: 20px;
+        margin-bottom: 10px;
+      }
+
+      .instructions-content ul {
+        margin: 10px 0;
+        padding-left: 20px;
+      }
+
+      .instructions-content li {
+        margin: 5px 0;
+        line-height: 1.5;
+      }
+
+      .instructions-close {
+        display: block;
+        margin: 20px auto 0;
+        padding: 10px 20px;
+        background-color: #4CAF50;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        font-size: 16px;
+      }
+
+      .instructions-close:hover {
+        background-color: #45a049;
+      }
+
+      #show_instructions {
+        margin-left: 10px;
+        padding: 5px 10px;
+        background-color: #2196F3;
+        color: white;
+        border: none;
+        border-radius: 3px;
+        cursor: pointer;
+      }
+
+      #show_instructions:hover {
+        background-color: #0b7dda;
+      }
+
+      #pause_game {
+        margin-left: 10px;
+        padding: 5px 10px;
+        background-color: #ff9800;
+        color: white;
+        border: none;
+        border-radius: 3px;
+        cursor: pointer;
+      }
+
+      #pause_game:hover {
+        background-color: #e68900;
+      }
    </style>
    <script>
      function getTheme() {
@@ -116,12 +206,62 @@
        </select>
      </div>
      <button id="go_full_screen">Full Screen</button>
+      <button id="pause_game">暂停</button>
+      <button id="show_instructions">游戏说明</button>
      <br />
    </div>

    <div id="mode-wrapper" style="display: inline; width: auto"></div>

    <div id="game-area" tabindex="0"></div>
+
+    <!-- 游戏说明面板 -->
+    <div id="instructions-panel" class="instructions-panel" style="display: none;">
+      <div class="instructions-content">
+        <h2>游戏说明</h2>
+        <div class="instructions-text">
+          <h3>基本操作：</h3>
+          <ul>
+            <li>使用方向键（↑↓←→）或WASD键控制蛇的移动</li>
+            <li>按空格键暂停/继续游戏</li>
+            <li>点击"Full Screen"按钮进入全屏模式</li>
+          </ul>
+
+          <h3>游戏目标：</h3>
+          <ul>
+            <li>吃掉食物让蛇变长</li>
+            <li>避免撞到墙壁或自己的身体</li>
+            <li>获得更高的分数</li>
+          </ul>
+
+          <h3>难度选择：</h3>
+          <ul>
+            <li><strong>Easy：</strong>移动速度较慢，适合新手</li>
+            <li><strong>Medium：</strong>中等速度，平衡体验</li>
+            <li><strong>Hard：</strong>较快速度，挑战反应</li>
+            <li><strong>Impossible：</strong>极快速度，极限挑战</li>
+            <li><strong>Rush：</strong>每吃一个食物速度会增加</li>
+          </ul>
+
+          <h3>炸弹功能：</h3>
+          <ul>
+          <li>游戏中会随机出现倒计时炸弹</li>
+          <li>炸弹会显示倒计时数字（3-2-1）</li>
+          <li>炸弹爆炸会影响周围区域，范围随难度增加</li>
+          <li>Easy：1格范围，Medium：2格范围，Hard：3格范围</li>
+          <li>避免在炸弹爆炸时处于影响范围内</li>
+          </ul>
+
+          <h3>计分规则：</h3>
+          <ul>
+            <li>每吃一个食物，蛇的长度增加5</li>
+            <li>游戏会记录你的最高分</li>
+            <li>挑战自己，打破记录！</li>
+          </ul>
+        </div>
+        <button id="close_instructions" class="instructions-close">关闭</button>
+      </div>
+    </div>
    <script type="text/javascript" src="js/snake.js"></script>
    <script type="text/javascript" src="js/init.js"></script>
    <script type="text/javascript">
@@ -146,6 +286,25 @@
      }

      document.getElementById('go_full_screen').addEventListener('click', go_full_screen);
+
+      // 游戏说明面板功能
+      function showInstructions() {
+        document.getElementById('instructions-panel').style.display = 'flex';
+      }
+
+      function hideInstructions() {
+        document.getElementById('instructions-panel').style.display = 'none';
+      }
+
+      document.getElementById('show_instructions').addEventListener('click', showInstructions);
+      document.getElementById('close_instructions').addEventListener('click', hideInstructions);
+
+      // 点击面板外部关闭说明
+      document.getElementById('instructions-panel').addEventListener('click', function(e) {
+        if (e.target === this) {
+          hideInstructions();
+        }
+      });
    </script>
  </body>
 </html>
diff --git a/src/js/init.js b/src/js/init.js
@@ -2,11 +2,17 @@ const mySnakeBoard = new SNAKE.Board({
  boardContainer: "game-area",
  fullScreen: true,
  premoveOnPause: false,
+  difficulty: "medium", // 默认难度
  onLengthUpdate: (length) => {
    console.log(`Length: ${length}`);
  },
  onPauseToggle: (isPaused) => {
    console.log(`Is paused: ${isPaused}`);
+    // 更新暂停按钮文本
+    const pauseButton = document.getElementById('pause_game');
+    if (pauseButton) {
+      pauseButton.textContent = isPaused ? '继续' : '暂停';
+    }
  },
  onInit: (params) => {
    console.log("init!");
@@ -19,3 +25,47 @@ const mySnakeBoard = new SNAKE.Board({
    console.log("dead!");
  },
 });
+
+// 暂停按钮功能
+document.addEventListener('DOMContentLoaded', function() {
+  const pauseButton = document.getElementById('pause_game');
+  if (pauseButton) {
+    pauseButton.addEventListener('click', function() {
+      if (mySnakeBoard && mySnakeBoard.getBoardState() === 2) { // 只有在游戏进行中才能暂停
+        mySnakeBoard.setPaused(!mySnakeBoard.getPaused());
+      }
+    });
+  }
+
+  // 难度选择功能
+  const modeSelect = document.getElementById('selectMode');
+  if (modeSelect) {
+    modeSelect.addEventListener('change', function() {
+      const selectedValue = this.value;
+      let difficulty = 'medium';
+
+      switch(selectedValue) {
+        case '100': // Easy
+          difficulty = 'easy';
+          break;
+        case '75': // Medium
+          difficulty = 'medium';
+          break;
+        case '50': // Hard
+          difficulty = 'hard';
+          break;
+        case '25': // Impossible
+          difficulty = 'impossible';
+          break;
+        case '110': // Rush
+          difficulty = 'rush';
+          break;
+      }
+
+      // 更新游戏板配置
+      if (mySnakeBoard) {
+        mySnakeBoard.setDifficulty(difficulty);
+      }
+    });
+  }
+});