如何使用if语句实现JavaScript游戏的难度选择菜单界面

你当前的代码存在两个核心逻辑错误：

• 外层的if (gameMode === 0)判断仅会在代码首次初始化时执行一次：初始化时gameMode为0，所以draw函数被赋值为菜单渲染逻辑，但后续你修改gameMode为1/2/3后，没有任何逻辑会更新draw函数的实现，也没有在渲染时做难度分支判断，自然不会生效。
• 你把var gameMode = 0改成var gameMode后能正常生效的原因很简单：未赋值的var声明默认值是undefined，初始化时if (gameMode === 0)判断不成立，外层的错误赋值逻辑不会执行，你之前写的对应不同难度的逻辑就能正常运行。

你只需要把难度分支判断放到draw函数内部，每次渲染都会根据当前gameMode的值走对应逻辑即可，参考修改代码如下：

var gameMode = 0;

// 按键监听逻辑提到全局，不要放在draw或条件判断内，避免重复绑定造成异常
keyPressed = function() {
  if (keyCode === 112) {
    gameMode = 1;
  }
  if (keyCode === 113) {
    gameMode = 2;
  }
  if (keyCode === 114) {
    gameMode = 3;
  }
};

draw = function() {
  // 每次渲染先判断当前游戏模式
  if (gameMode === 0) {
    // 菜单页面逻辑
    background(255, 255, 255);
    fill(0, 0, 0);
    text("Mover Game", 160, 200);
    text(gameMode, 160, 220);
  } else if (gameMode === 1) {
    // 替换为你自己的难度1游戏逻辑
    background(0, 200, 0);
    text("简单难度", 160, 200);
  } else if (gameMode === 2) {
    // 替换为你自己的难度2游戏逻辑
    background(200, 150, 0);
    text("中等难度", 160, 200);
  } else if (gameMode === 3) {
    // 替换为你自己的难度3游戏逻辑
    background(200, 0, 0);
    text("困难难度", 160, 200);
  }
};

• 如果后续各难度逻辑比较复杂，可以把不同难度的逻辑封装成单独的函数，draw内直接调用对应函数即可，代码可读性会更高。
• 不要把事件监听函数（比如keyPressed）放到draw函数内部，draw默认每帧执行一次，会导致重复绑定无数次监听函数，容易出现性能问题和异常行为。

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