第6课课后作业

俞绍杰 · 发表于 2025-11-6 11:59:00

<!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="styles.css">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gradient-to-br from-blue-50 to-green-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
      
      <header class="text-center mb-8">
         <h1 class="text-4xl font-bold text-green-600 mb-2">贪吃蛇游戏</h1>
         <p class="text-gray-600">使用键盘方向键控制蛇的移动</p>
      </header>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
         
         <div class="bg-white rounded-2xl shadow-lg p-6">
            <h2 class="text-2xl font-semibold text-gray-800 mb-4">游戏信息</h2>
            <div class="space-y-4">
                  <div class="flex justify-between items-center">
                     <span class="text-gray-600">当前分数:</span>
                     <span id="score" class="text-2xl font-bold text-green-600">0</span>
                  </div>
                  <div class="flex justify-between items-center">
                     <span class="text-gray-600">最高分:</span>
                     <span id="highScore" class="text-xl font-semibold text-blue-600">0</span>
                  </div>
                  <div class="flex justify-between items-center">
                     <span class="text-gray-600">蛇身长度:</span>
                     <span id="length" class="text-xl font-semibold text-orange-600">4</span>
                  </div>
                  <div class="flex justify-between items-center">
                     <span class="text-gray-600">游戏状态:</span>
                     <span id="status" class="px-3 py-1 rounded-full bg-green-100 text-green-800">准备开始</span>
                  </div>
            </div>

            
            <div class="mt-6">
                  <h3 class="text-lg font-semibold text-gray-800 mb-3">游戏控制</h3>
                  <div class="grid grid-cols-2 gap-3">
                     <button id="startBtn" class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg transition-colors">
                        <i class="fas fa-play mr-2"></i>开始游戏
                     </button>
                     <button id="pauseBtn" class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg transition-colors">
                        <i class="fas fa-pause mr-2"></i>暂停游戏
                     </button>
                     <button id="resetBtn" class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg transition-colors">
                        <i class="fas fa-redo mr-2"></i>重新开始
                     </button>
                     <button id="settingsBtn" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg transition-colors">
                        <i class="fas fa-cog mr-2"></i>游戏设置
                     </button>
                  </div>
            </div>

            
            <div class="mt-6">
                  <h3 class="text-lg font-semibold text-gray-800 mb-3">游戏规则</h3>
                  <ul class="text-gray-600 space-y-2">
                  </ul>
            </div>
         </div>

         
         <div class="lg:col-span-2">
            <div class="bg-white rounded-2xl shadow-lg p-6">
                  <div class="flex justify-between items-center mb-4">
                     <h2 class="text-2xl font-semibold text-gray-800">游戏区域</h2>
                     <div class="flex items-center space-x-2">
                        <span class="text-sm text-gray-500">难度:</span>
                        <select id="difficulty" class="border rounded px-2 py-1">
                              <option value="200">简单</option>
                              <option value="150" selected>普通</option>
                              <option value="100">困难</option>
                              <option value="70">极难</option>
                        </select>
                     </div>
                  </div>
                  <div class="flex justify-center">
                     <canvas id="gameCanvas" width="400" height="400" class="border-2 border-gray-200 rounded-lg"></canvas>
                  </div>
                  <div class="mt-4 text-center text-gray-500 text-sm">
                     使用键盘方向键 ↑ ↓ ← → 控制蛇的移动
                  </div>
            </div>
         </div>
      </div>

      
      <div class="mt-8 bg-white rounded-2xl shadow-lg p-6">
         <h2 class="text-2xl font-semibold text-gray-800 mb-4">游戏统计</h2>
         <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="text-center p-4 bg-blue-50 rounded-lg">
                  <div class="text-2xl font-bold text-blue-600" id="gamesPlayed">0</div>
                  <div class="text-gray-600">游戏次数</div>
            </div>
            <div class="text-center p-4 bg-green-50 rounded-lg">
                  <div class="text-2xl font-bold text-green-600" id="totalScore">0</div>
            </div>
            <div class="text-center p-4 bg-orange-50 rounded-lg">
                  <div class="text-2xl font-bold text-orange-600" id="maxLength">4</div>
                  <div class="text-gray-600">最长蛇身</div>
            </div>
            <div class="text-center p-4 bg-purple-50 rounded-lg">
                  <div class="text-2xl font-bold text-purple-600" id="foodEaten">0</div>
                  <div class="text-gray-600">吃掉食物</div>
            </div>
         </div>
      </div>
</div>


<div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center">
      <div class="bg-white rounded-2xl p-6 max-w-md w-full mx-4">
         <h3 class="text-2xl font-semibold text-gray-800 mb-4">游戏设置</h3>
         <div class="space-y-4">
            <div>
                  <label class="block text-gray-700 mb-2">网格颜色:</label>
                  <input type="color" id="gridColor" value="#e5e7eb" class="w-full p-1 border rounded">
            </div>
            <div>
                  <label class="block text-gray-700 mb-2">蛇头颜色:</label>
                  <input type="color" id="headColor" value="#059669" class="w-full p-1 border rounded">
            </div>
            <div>
                  <label class="block text-gray-700 mb-2">蛇身颜色:</label>
                  <input type="color" id="bodyColor" value="#10b981" class="w-full p-1 border rounded">
            </div>
            <div>
                  <label class="block text-gray-700 mb-2">食物颜色:</label>
                  <input type="color" id="foodColor" value="#f59e0b" class="w-full p-1 border rounded">
            </div>
         </div>
         <div class="flex justify-end space-x-3 mt-6">
            <button id="closeSettings" class="px-4 py-2 text-gray-600 hover:text-gray-800">取消</button>
            <button id="saveSettings" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">保存设置</button>
         </div>
      </div>
</div>

<script src="game.js"></script>
</body>
</html>

第6课 课后作业

第6课课后作业