如何为现有小游戏计分计数器添加游戏会话内最高分功能

本次会话最高分功能实现步骤 #

• 步骤1：在全局作用域（所有计数器逻辑执行前）声明最高分变量

// 全局初始化，页面加载时定义即可
let highScore = 0;
// 如果你原有的counter变量还没全局定义，补充这行：let counter = 2;

• 步骤2：在原有分数更新逻辑后追加最高分对比逻辑
  找到你现有代码里更新得分的行scoreboard.innerHTML = "<p>DEIN SCORE IST <span id='scorecolor'>" + [counter-2] + "!</span></p>";，在这行之后添加如下代码：

// 获取当前最新得分
const currentScore = counter - 2;
// 得分超过历史最高分就更新最高分
if (currentScore > highScore) {
  highScore = currentScore;
}

• 步骤3：添加最高分页面显示
  首先在你的HTML代码中添加最高分容器，放在scoreboard元素同级位置即可：

<div id="highScoreBoard"></div>

之后回到步骤2的JS代码末尾，追加最高分渲染逻辑：

// 将最新最高分渲染到页面
document.getElementById('highScoreBoard').innerHTML = `<p>本次最高得分：<span id="highScoreColor">${highScore}</span></p>`;
// 你也可以调用已有的setRandomColor()给最高分也设置随机颜色

可选扩展：跨页面刷新保留最高分 #

如果需要页面刷新后最高分不重置，可以修改全局初始化和更新逻辑，用本地存储持久化数据：

// 全局初始化时优先读取本地存储的最高分
let highScore = Number(localStorage.getItem('gameHighScore')) || 0;

// 更新最高分逻辑修改为：
if (currentScore > highScore) {
  highScore = currentScore;
  // 同时存到本地存储
  localStorage.setItem('gameHighScore', highScore);
}

内容的提问来源于stack exchange，提问作者Joel König