如何重启JavaScript游戏？解决重玩时旧分数残留问题

看起来你遇到的核心问题是游戏的全局状态没有在新游戏开始时重置，同时场景切换的逻辑也有些混乱，导致第二次点击“开始游戏”时，上一局的生命值、分数等数据还保留着，直接触发了失败判定，跳回了显示上一局分数的结束界面。下面是具体的修复方案：

1. 新增全局状态重置函数 #

首先，我们需要一个专门的函数来重置所有游戏相关的全局变量，确保每次新游戏都从初始状态开始：

// 新增：重置游戏状态函数
function resetGameState() {
  health = 100; // 重置生命值
  score = 0;    // 重置分数
  keys = [];    // 清空按键记录
  clicked = false; // 重置点击状态
}

2. 修复场景切换与启动逻辑 #

接下来，我们需要修改菜单中“开始游戏”的点击逻辑，确保点击时先重置状态，再切换到游戏场景；同时修复“返回菜单”和“重启”的逻辑：

修改菜单点击处理逻辑 #

原来的menuC函数直接调用game()，这会导致逻辑混乱，我们需要改为切换场景并重置状态：

var menuC = function() {
  if (howButton.mouseIsOver()) {
    scene = "how"; // 切换到帮助场景
  } else if (playButton.mouseIsOver()) {
    resetGameState(); // 先重置状态
    scene = "game";   // 再切换到游戏场景
  }
};

修复结束界面的“返回菜单”逻辑 #

原来的loseC里调用了不存在的Program.restart()，我们需要改为回到菜单场景：

var loseC = function() {
  if (restartButton.mouseIsOver()) {
    scene = "menu"; // 回到菜单场景
  }
};

完善draw函数中的场景渲染逻辑 #

确保draw函数只负责渲染对应场景，而不是直接调用game()这类初始化函数：

draw = function() {
  background(255); // 新增：每次渲染先清屏，避免残留内容
  if (scene === "menu") {
    // 菜单渲染逻辑
    textSize(47);
    fill(41, 207, 182);
    text("ACIDIC RAIN", 207, 147);
    
    playButton.draw();
    howButton.draw();
    
    textSize(30);
    fill(41, 207, 182);
    text("PLAY", 202, 248);
    text("HOW", 202, 311);
  } else if (scene === "game") {
    // 游戏场景的渲染与逻辑（这里替换成你的游戏核心逻辑）
    fill(0);
    text("Health: " + health, 20, 30);
    text("Score: " + score, width - 100, 30);
    // 其他游戏运行逻辑...
  } else if (scene === "how") {
    // 帮助场景渲染
    backButton.draw();
    fill(41, 207, 182);
    textSize(17);
    text("BACK", 40, 380);
    // 帮助内容展示...
  } else if (scene === "lose") {
    // 结束场景渲染
    fill(0);
    textSize(30);
    text("Game Over!", width/2, 150);
    text("Final Score: " + score, width/2, 200);
    
    restartButton.draw();
    fill(0);
    textSize(20);
    text("GO BACK TO MENU", 201, 270);
  }
};

3. 关键问题解释 #

• 全局状态重置：如果不重置health、score这些变量，第二次启动游戏时，它们还保留着上一局结束时的值（比如health已经是0），游戏逻辑会直接判定为失败，跳回结束界面。
• 场景切换流程：原来的代码直接在点击时调用game()，这会导致渲染逻辑和场景切换逻辑混在一起，正确的做法是通过scene变量控制draw函数渲染对应场景，确保流程清晰。
• 清屏操作：在draw函数开头添加background()可以避免不同场景的渲染内容残留，让界面更干净。

把这些修改应用到你的代码中后，点击“返回菜单”再重新开始游戏，就能从初始状态启动新游戏了。

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