javascript - Javascript循环if文本冒险

我正在尝试通过使用startGame()函数循环if语句来构建最简单的文本冒险。我该如何运作？还是我吠错了树？

let m = 1;

function startGame() {
  if (m === 1){
    document.querySelector("#text").innerHTML = "START PAGE";
    document.querySelector("#btn").value = 'Go to map 2';
    document.querySelector("#btn").addEventListener("click", map2);
    function map2() {
      m = 2;
    }
  } else if (m === 2) {
      document.querySelector("#text").innerHTML = "SUCCESS!!!";
  } else {
      document.querySelector("#text").innerHTML = "Nothing works";
  }
}

startGame()

最佳答案

您遇到的第一个问题是，当调用map2()时，不会重新评估startGame中的逻辑，只有m会发生变化，而不是使用m来确定事物的事物。

您可以通过再次手动调用startGame来解决此问题：

let m = 1;

function startGame() {
  if (m === 1){
    document.querySelector("#text").innerHTML = "START PAGE";
    document.querySelector("#btn").value = 'Go to map 2';
    document.querySelector("#btn").addEventListener("click", map2);
    function map2() {
      m = 2;
      startGame();
    }
  } else if (m === 2) {
      document.querySelector("#text").innerHTML = "SUCCESS!!!";
  } else {
      document.querySelector("#text").innerHTML = "Nothing works";
  }
}

startGame()

<div id="text"></div>
<input type="submit" id="btn" />

但是，这并不容易扩展-在同一个函数中拥有所有基于m的逻辑，对更多函数的处理将导致越来越多的if/else语句使函数难以读取和维护。您可以为m的每个值分别分配处理程序，将其放置在可以查找它们的位置，然后startGame仅充当调度程序，而无需知道应该发生什么情况：

let m = 1;

let handlers = new Map();

handlers.set(1, function() {
  document.querySelector("#text").innerHTML = "START PAGE";
  document.querySelector("#btn").value = 'Go to map 2';
  document.querySelector("#btn").addEventListener("click", map2);
  function map2() {
    m = 2;
    startGame();
  }
})

handlers.set(2, function() {
  document.querySelector("#text").innerHTML = "SUCCESS!!!";
})

function defaultErrorHandler() {
  document.querySelector("#text").innerHTML = "Nothing works";
}

function startGame() {
  //fetch handler or if that fails, use the default error
  const handler = handlers.get(m) || defaultErrorHandler;

  //execute handler
  handler();
}

startGame()

<div id="text"></div>
<input type="submit" id="btn" />

现在，startGame根本不需要更改，每条逻辑也是独立的，可以单独进行编辑。