snake

Running

App Files Files Community

bozhong commited on Jun 22

Commit

2dcd3be

verified ·

1 Parent(s): 771bc87

增加排行榜TOP，表明 - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +36 -43

index.html CHANGED Viewed

@@ -86,15 +86,6 @@
             transform: scale(0.95);
         }
-        .touch-controls {
-            display: none;
-        }
-        @media (max-width: 640px) {
-            .touch-controls {
-                display: grid;
-            }
-        }
     </style>
 </head>
 <body class="bg-gray-100 min-h-screen flex flex-col items-center justify-start p-4 overflow-hidden">
@@ -137,20 +128,16 @@
         </div>
     </div>
-    <!-- 移动端控制按钮 -->
-    <div class="touch-controls mt-6 grid grid-cols-3 gap-2">
-        <div></div>
-        <button id="up-btn" class="control-btn">↑</button>
-        <div></div>
-        <button id="left-btn" class="control-btn">←</button>
-        <div></div>
-        <button id="right-btn" class="control-btn">→</button>
-        <div></div>
-        <button id="down-btn" class="control-btn">↓</button>
-        <div></div>
     </div>
-    <div class="mt-8 text-gray-600 text-sm">
         <p>使用键盘方向键或屏幕按钮控制蛇的移动</p>
     </div>
@@ -178,12 +165,6 @@
         const pauseBtn = document.getElementById('pause-btn');
         const restartBtn = document.getElementById('restart-btn');
-        // 移动端控制按钮
-        const upBtn = document.getElementById('up-btn');
-        const downBtn = document.getElementById('down-btn');
-        const leftBtn = document.getElementById('left-btn');
-        const rightBtn = document.getElementById('right-btn');
         // 初始化游戏
         function initGame() {
             // 清空游戏板
@@ -345,6 +326,7 @@
             isGameOver = true;
             finalScoreDisplay.textContent = score;
             gameOverlay.classList.remove('hidden');
         }
         // 开始游戏
@@ -397,25 +379,36 @@
             wallMode = e.target.checked;
         });
-        // 移动端控制
-        upBtn.addEventListener('click', () => {
-            if (direction !== 'down') nextDirection = 'up';
-        });
-        downBtn.addEventListener('click', () => {
-            if (direction !== 'up') nextDirection = 'down';
-        });
-        leftBtn.addEventListener('click', () => {
-            if (direction !== 'right') nextDirection = 'left';
-        });
-        rightBtn.addEventListener('click', () => {
-            if (direction !== 'left') nextDirection = 'right';
-        });
         // 初始化显示
         highScoreDisplay.textContent = highScore;
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bozhong/awesome-about-me" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bozhong/snake" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

             transform: scale(0.95);
         }
     </style>
 </head>
 <body class="bg-gray-100 min-h-screen flex flex-col items-center justify-start p-4 overflow-hidden">
         </div>
     </div>
+    <div class="mt-8 w-full max-w-md">
+        <div class="bg-white rounded-lg shadow p-4">
+            <h3 class="text-xl font-bold text-gray-800 mb-4">排行榜 TOP 5</h3>
+            <div id="leaderboard" class="space-y-2">
+                <!-- Leaderboard items will be added here by JavaScript -->
+            </div>
+        </div>
     </div>
+    <div class="mt-4 text-gray-600 text-sm">
         <p>使用键盘方向键或屏幕按钮控制蛇的移动</p>
     </div>
         const pauseBtn = document.getElementById('pause-btn');
         const restartBtn = document.getElementById('restart-btn');
         // 初始化游戏
         function initGame() {
             // 清空游戏板
             isGameOver = true;
             finalScoreDisplay.textContent = score;
             gameOverlay.classList.remove('hidden');
+            updateLeaderboard();
         }
         // 开始游戏
             wallMode = e.target.checked;
         });
+        // 排行榜功能
+        let leaderboard = JSON.parse(localStorage.getItem('snakeLeaderboard')) || [];
+        function updateLeaderboard() {
+            // 添加当前分数到排行榜
+            leaderboard.push(score);
+            // 排序并保留前5名
+            leaderboard.sort((a, b) => b - a);
+            leaderboard = leaderboard.slice(0, 5);
+            // 保存到本地存储
+            localStorage.setItem('snakeLeaderboard', JSON.stringify(leaderboard));
+            // 更新显示
+            const leaderboardElement = document.getElementById('leaderboard');
+            leaderboardElement.innerHTML = '';
+            leaderboard.forEach((score, index) => {
+                const item = document.createElement('div');
+                item.className = 'flex justify-between items-center bg-gray-50 p-2 rounded';
+                item.innerHTML = `
+                    <span class="font-medium">${index + 1}. ${score}</span>
+                    <span class="text-xs text-gray-500">${new Date().toLocaleDateString()}</span>
+                `;
+                leaderboardElement.appendChild(item);
+            });
+        }
         // 初始化显示
         highScoreDisplay.textContent = highScore;
+        updateLeaderboard();
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bozhong/awesome-about-me" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bozhong/snake" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>