用于文本冒险的 Javascript 循环 if 语句答案

【问题标题】：Javascript looping if statements for a text adventure用于文本冒险的 Javascript 循环 if 语句
【发布时间】：2020-03-23 09:42:14
【问题描述】：

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

【问题讨论】：

这里没有循环
@andymccullough 他的意思是我认为的一系列如果
请提供确切的问题和所需的输出以及一些代码
How can I make it work?你首先需要告诉我们问题是什么
我想他是在问“我有这一系列的 if，现在我想循环运行它，这样它就不会冻结浏览器”。据我了解，他想根据m 值做不同的事情。而m 的值会随着用户玩游戏而变化

标签： javascript loops if-statement adventure

【解决方案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完全不需要改动，每条逻辑也是自包含的，可以单独编辑。

【讨论】：