JavaScript俄罗斯方块游戏本地存储高分功能实现求助

嘿，我看你正在给你的俄罗斯方块游戏加本地存储高分的功能，咱们来把这个功能捋顺～先说说你现有代码里的几个小问题，再给你一套完整的实现方案：

原代码里的几个问题 #

• 变量名拼写错误：Tsocre应该是currentScore或者score，笔误很容易导致bug哦
• localStorage.getItem('highscore')不需要第二个参数，你写的parseInt(localStorage.getItem('highscore'), Tsocre)是错的，parseInt的第二个参数是进制，应该传10
• 逻辑不完整：没有处理首次打开游戏时localStorage里还没有高分数据的情况
• 嵌套函数有点冗余：updateScore里嵌套saveData没必要，拆分逻辑会更清晰

完整实现代码 #

我把功能拆成几个小函数，这样代码更易读也更好维护：

1. 获取本地存储的高分

这个函数负责从localStorage里取高分，没有数据的话默认返回0：

function getHighScore() {
  // 从localStorage获取高分，取不到就用0作为默认值
  const savedHighscore = localStorage.getItem('highscore');
  // 转成数字，确保类型正确
  return savedHighscore ? parseInt(savedHighscore, 10) : 0;
}

2. 更新分数并同步高分存储

每次玩家得分变化（比如消除一行后），调用这个函数就可以自动更新页面分数，同时检查是否刷新了高分：

function updateScore() {
  // 先更新页面上的当前分数显示
  document.getElementById('score').innerHTML = `Score : ${player.score}`;
  
  // 获取当前存储的历史高分
  const currentHighScore = getHighScore();
  
  // 如果当前分数超过历史高分，更新localStorage
  if (player.score > currentHighScore) {
    // localStorage只能存字符串，所以把分数转成字符串再存
    localStorage.setItem('highscore', player.score.toString());
    // 这里可以加个用户提示，比如弹出"新纪录！"或者更新页面上的高分显示
    console.log('哇，新高分诞生啦！');
    // 也可以在这里直接更新页面的高分显示
    document.getElementById('highscore').innerHTML = `High Score : ${player.score}`;
  }
}

3. 页面初始化时显示历史高分

页面加载完成后，自动显示之前的高分，提升用户体验：

function initHighScoreDisplay() {
  // 假设你页面上有个id为highscore的元素用来显示历史高分
  const highScoreElement = document.getElementById('highscore');
  if (highScoreElement) {
    highScoreElement.innerHTML = `High Score : ${getHighScore()}`;
  }
}

// 页面加载完成后调用初始化函数
window.addEventListener('DOMContentLoaded', initHighScoreDisplay);

怎么用？ #

• 确保你的页面上有两个元素：一个id="score"显示当前分数，一个id="highscore"显示历史高分
• 每次玩家得分增加（比如消除方块后），调用updateScore()就可以了，剩下的逻辑会自动处理

这样你的游戏就能完美实现本地存储高分的功能啦，下次玩家打开游戏还能看到自己之前的最好成绩～

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