Javascript 循环 if 语句进行文本冒险

Question

我正在尝试通过使用我的 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()

Answer 1

您遇到的第一个问题是，当调用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根本不需要改变，每段逻辑也是独立的，可以单独编辑。