Javascript зацикливание операторов if для текстового приключения - PullRequest
Новая
       23

Javascript зацикливание операторов if для текстового приключения

0 голосов
/ 23 марта 2020

Я пытаюсь создать простейшее текстовое приключение из циклов операторов if с моей функцией 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;
    }
  } else if (m === 2) {
      document.querySelector("#text").innerHTML = "SUCCESS!!!"; 
  } else {
      document.querySelector("#text").innerHTML = "Nothing works";
  }
}

startGame()

1 Ответ

1 голос
/ 23 марта 2020

Первая проблема, с которой вы столкнулись, заключается в том, что при вызове map2() логика c в 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" />

Однако это не так легко масштабировать - у вас есть все логи c, основанные на 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 вообще не нужно менять, каждый элемент логики c также самодостаточен и может редактироваться отдельно.

...