不知名提交

InfoGenie-frontend/public/smallgame/别踩白方块/game.js

@@ -84,6 +84,8 @@ function gameOver(){
     // 显示最终得分和达到的最高速度
     document.getElementById('final-score-value').innerHTML = myScore;
     document.getElementById('final-speed-value').innerHTML = gameSpeed.toFixed(1);
+    // 渲染排行榜
+    renderLeaderboard();
     
     // 显示游戏结束弹窗
     document.getElementById('game-over-modal').style.display = 'flex';
@@ -250,6 +252,78 @@ function handleClick(e) {
     
     checkHit(x, y);
 }
+ 
+// ===== 排行榜逻辑 =====
+function formatDateYYYYMMDD() {
+    var d = new Date();
+    var y = d.getFullYear();
+    var m = String(d.getMonth() + 1).padStart(2, '0');
+    var day = String(d.getDate()).padStart(2, '0');
+    return y + '-' + m + '-' + day;
+}
+
+function escapeHtml(str) {
+    if (typeof str !== 'string') return str;
+    return str
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+function renderLeaderboard(){
+    var nowStr = formatDateYYYYMMDD();
+    // 当前玩家数据（模拟）
+    var me = {
+        "名称": "我",
+        "账号": "guest",
+        "分数": myScore,
+        "时间": nowStr,
+        "__isMe": true
+    };
+
+    // 合并现有数据与当前玩家
+    var data = (typeof playerdata !== 'undefined' && Array.isArray(playerdata))
+        ? playerdata.slice() : [];
+    data.push(me);
+
+    // 按分数降序排序
+    data.sort(function(a, b){
+        return (b["分数"] || 0) - (a["分数"] || 0);
+    });
+
+    var tbody = document.getElementById('leaderboard-body');
+    if (!tbody) return;
+    tbody.innerHTML = '';
+
+    var myRank = -1;
+    for (var i = 0; i < data.length; i++){
+        var row = data[i];
+        var tr = document.createElement('tr');
+        if (row.__isMe){
+            myRank = i + 1;
+            tr.className = 'leaderboard-row-me';
+        }
+
+        tr.innerHTML =
+            '<td>' + (i + 1) + '</td>' +
+            '<td>' + escapeHtml(row["名称"] || '') + '</td>' +
+            '<td>' + (row["分数"] || 0) + '</td>' +
+            '<td>' + escapeHtml(row["时间"] || '') + '</td>';
+
+        // 只展示前10名
+        if (i < 10) tbody.appendChild(tr);
+    }
+
+    // 更新我的数据摘要
+    var rankEl = document.getElementById('my-rank');
+    var scoreEl = document.getElementById('my-score');
+    var timeEl = document.getElementById('my-time');
+    if (rankEl) rankEl.textContent = myRank > 0 ? myRank : '-';
+    if (scoreEl) scoreEl.textContent = myScore;
+    if (timeEl) timeEl.textContent = nowStr;
+}
 
 // 处理触摸事件
 function handleTouch(e) {

InfoGenie-frontend/public/smallgame/别踩白方块/index.html

@@ -182,6 +182,56 @@
         background: linear-gradient(45deg, #4caf50, #388e3c);
         box-shadow: 0 6px 16px rgba(76,175,80,0.4);
     }
+    /* 排行榜样式 */
+    .leaderboard {
+        margin-top: 15px;
+        background: rgba(255,255,255,0.6);
+        border: 1px solid rgba(129,199,132,0.3);
+        border-radius: 10px;
+        overflow: hidden;
+    }
+    .leaderboard-title {
+        background: linear-gradient(45deg, #66bb6a, #4caf50);
+        color: white;
+        font-weight: bold;
+        font-size: 16px;
+        padding: 8px 12px;
+        text-align: left;
+        box-shadow: inset 0 -1px 0 rgba(255,255,255,0.2);
+    }
+    .leaderboard-meta {
+        color: #2e7d32;
+        font-size: 13px;
+        padding: 8px 12px;
+        border-bottom: 1px solid rgba(129,199,132,0.2);
+        display: flex;
+        justify-content: space-between;
+        gap: 8px;
+        flex-wrap: wrap;
+    }
+    .leaderboard-table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+    .leaderboard-table th, .leaderboard-table td {
+        padding: 8px 6px;
+        font-size: 13px;
+        border-bottom: 1px solid rgba(129,199,132,0.2);
+        color: #1b5e20;
+        text-align: center;
+    }
+    .leaderboard-table th {
+        background: rgba(129,199,132,0.2);
+        font-weight: bold;
+        color: #1b5e20;
+    }
+    .leaderboard-row-me {
+        background: rgba(198,40,40,0.08);
+        border-left: 3px solid #c62828;
+    }
+    .leaderboard-table tr:nth-child(even) {
+        background: rgba(129,199,132,0.1);
+    }
     
     /* 移动端适配 */
     @media (max-width: 768px) {
@@ -253,11 +303,32 @@
             <h2 class="modal-title">游戏结束</h2>
             <div class="final-score">最终得分: <span id="final-score-value">0</span></div>
             <div class="final-speed">最高速度: <span id="final-speed-value">1.0</span>x</div>
+            <!-- 排行榜区域 -->
+            <div class="leaderboard">
+                <div class="leaderboard-title">排行榜</div>
+                <div class="leaderboard-meta">
+                    <span>我的排名：第 <span id="my-rank">-</span> 名</span>
+                    <span>我的分数：<span id="my-score">0</span></span>
+                    <span>时间：<span id="my-time">--</span></span>
+                </div>
+                <table class="leaderboard-table">
+                    <thead>
+                        <tr>
+                            <th>排名</th>
+                            <th>名称</th>
+                            <th>分数</th>
+                            <th>时间</th>
+                        </tr>
+                    </thead>
+                    <tbody id="leaderboard-body"></tbody>
+                </table>
+            </div>
             <button id="restart-btn" class="modal-btn restart-btn">重新开始</button>
         </div>
     </div>
     
     <audio id="music" src="MUSIC.mp3" loop></audio>
+    <script src="gamedata.js"></script>
     <script src="game.js"></script>
 </body>
 </html>