求助：如何在JavaScript贪吃蛇游戏中添加总记录分与会话分

嘿，我来帮你搞定这个分数存储的问题！其实用sessionStorage和localStorage实现起来非常简单，我会一步步给你讲清楚：

先搞懂两者的区别 #

• sessionStorage：只在当前浏览器会话（比如打开的标签页）有效，关闭标签或浏览器后数据就会被清除，适合存会话分数（比如当前打开浏览器期间的游戏分数）。
• localStorage：数据会持久保存在浏览器中，即使关闭浏览器再打开也不会消失，适合存总记录分数（比如历史最高分）。

具体实现步骤 #

1. 定义存储键名（方便后续维护） #

先给两个存储项起个清晰的名字，避免后续写错：

// 会话最高分的存储键
const SESSION_HIGH_SCORE = "snake_session_high";
// 本地总记录最高分的存储键
const LOCAL_HIGH_SCORE = "snake_local_high";

2. 页面加载时读取并显示分数 #

页面打开时，先从存储里读取之前的分数（如果有的话），显示在页面上：

// 页面加载完成后执行
window.addEventListener("load", () => {
    // 读取会话最高分，没有的话默认0
    const sessionScore = parseInt(sessionStorage.getItem(SESSION_HIGH_SCORE)) || 0;
    // 读取本地总记录最高分，没有的话默认0
    const localScore = parseInt(localStorage.getItem(LOCAL_HIGH_SCORE)) || 0;

    // 假设你页面上有这两个元素用来显示分数（记得在HTML里加上）
    document.getElementById("session-score").textContent = `Puntuación de sesión: ${sessionScore}`;
    document.getElementById("total-score").textContent = `Récord total: ${localScore}`;
});

3. 游戏结束时更新分数 #

当贪吃蛇撞墙或撞到自己（游戏结束）时，调用这个函数更新分数：

function updateScores(currentGameScore) {
    // 更新会话最高分
    const currentSessionHigh = parseInt(sessionStorage.getItem(SESSION_HIGH_SCORE)) || 0;
    if (currentGameScore > currentSessionHigh) {
        sessionStorage.setItem(SESSION_HIGH_SCORE, currentGameScore.toString());
        // 实时更新页面显示
        document.getElementById("session-score").textContent = `Puntuación de sesión: ${currentGameScore}`;
    }

    // 更新本地总记录最高分
    const currentLocalHigh = parseInt(localStorage.getItem(LOCAL_HIGH_SCORE)) || 0;
    if (currentGameScore > currentLocalHigh) {
        localStorage.setItem(LOCAL_HIGH_SCORE, currentGameScore.toString());
        // 实时更新页面显示
        document.getElementById("total-score").textContent = `Récord total: ${currentGameScore}`;
    }
}

然后在你的游戏结束逻辑里调用这个函数，比如：

// 假设这是你的游戏结束函数
function gameOver() {
    // 替换成你实际存储当前游戏分数的变量
    const currentScore = tuPuntuacionActual;
    // 更新分数
    updateScores(currentScore);
    // 其他游戏结束逻辑（比如弹窗提示、重置游戏等）
}

4. （可选）如果会话分数是总分而非最高分 #

如果你想存的是当前会话中所有游戏的总分（不是单局最高分），可以改成这个逻辑：

function updateSessionTotal(currentGameScore) {
    const currentTotal = parseInt(sessionStorage.getItem("snake_session_total")) || 0;
    const newTotal = currentTotal + currentGameScore;
    sessionStorage.setItem("snake_session_total", newTotal.toString());
    document.getElementById("session-total").textContent = `Total de sesión: ${newTotal}`;
}

注意事项 #

• sessionStorage和localStorage只能存储字符串，所以存数字时要转成字符串（.toString()），取出来时要用parseInt()转成数字。
• 如果用户清除了浏览器缓存或数据，localStorage里的记录会丢失，这是正常现象。
• 确保你的HTML里有对应的元素来显示分数，比如：

<div id="session-score">Puntuación de sesión: 0</div>
<div id="total-score">Récord total: 0</div>

内容的提问来源于stack exchange，提问作者Challenger Inside