JavaScript状态和语句

Question

对不起标题，我真的没想到要就我的问题使用适当的标题。

因此，目前，我有一个可以正常工作的功能代码，但是我有一个似乎无法解决的小问题。

[基本上，我添加一个动作，说北，然后显示一个文本，说您进入教堂，您想探索吗？然后您有两个选择：是和否。

如果选择是，将显示一条文本，说明您已进入教堂，长话短说，您将以玩家的身份逃脱濒死体验

[如果您选择不参加并撤退，它将说您安全撤退了教堂。但是问题是在为该实例选择是或否选项之后，我似乎无法在输入框中添加其他内容来继续执行向南，向西，向东甚至向北移动的动作。相反，什么也没有发生。我想发生的是，在玩家收到“您已安全撤退教堂”的信息后，输入框并没有受到限制，而输入框不受限制，并且功能正常在您决定进入教堂之前做了。我希望你明白我的意思。如果没有，只需在输入框中输入以下内容：-北-是-撤退

，然后尝试输入一个动作，例如“ North”。没发生什么事。我想做的是，能够继续玩家选择的任何方向。

这里是代码：

...

        else if (newInput == "North") {
            textInput = "you went to the Abandoned Church. Do you explore?";
            state = "sites"
            document.getElementById("message").innerHTML = textInput;
        }

    } else if (state == "sites") {
        // Handle commands when game state is in "store"
        if (newInput == "No") {
        textInput = "You decided not to explore the church";
            state = "sites"
            document.getElementById("message").innerHTML = textInput;


        } else if (newInput == "Yes") {
            textInput = "You decided to explore the church and found and found that there were two zombies roaming around. They haven't noticed you. Do you still stay or retreat?";
            state = "zombies"
            document.getElementById("message").innerHTML = textInput;
        } else if (newInput == "No") {
            // Change the state to something else
        }

    } else if (state == "zombies") {
        // Handle commands when game state is in "dragon"

        if (newInput == "Stay And Explore") {
            textInput = "You decided to stay but it didn't take long for the zombies to notice you. Right in the nick of time, you managed to escape, shutting the doors behind you.";
            document.getElementById("message").innerHTML = textInput;
        } else if (newInput == "Retreat") {
            textInput = "You retreated the church safely. Where do you go now?";
            document.getElementById("message").innerHTML = textInput;
        }
        if (newInput = "Retreat") {
          document.getElementById("message").innerHTML = textInput;
          //UNDEFINED! <--When I type North after Retreat, it comes as Undefined, I don't know if I was close to coming to a solution in what I wanted which was to take the player back to the action they were on before which was North and are free to change their action and to head to any other location.

        }

    }
}

...

Answer 1

[当您从教堂撤退时，您没有将状态变量设置为其原始值（“ init”）。这就是为什么键入“ North”无效的原因。它仍然处于“僵尸”状态，并且在僵尸中没有“北”选项else-if。

您的代码的另一个可能的问题是，显示消息后您没有退出该功能。例如，在“站点”状态下键入“是”后，状态将更改为“僵尸”，并且“僵尸”中的所有代码也将执行-如果这不是您想要的，就好像“僵尸”状态为“是”时，也会被执行。显示消息后，您需要返回。另外，请考虑使用switch语句，因为它们更适合这种类型的流程。

更笼统地说，编写一长串else-if语句会很快变得不知所措。考虑实现状态机。例如，为每个状态创建一个对象，其中包含可能的命令数组，每个命令的消息以及它将带您进入的下一个状态。

let states = {
  "sites": {  
    commands: [
      {
        input: "yes",
        msg: "You decided to explore the church and found and found that there were two zombies roaming around. They haven't noticed you. Do you still stay or retreat?",
        next: "zombies"
      }
     ]
  },
  "zombies": {
    commands: [
      {
        input: "retreat",
        msg: "You retreated the church safely. Where do you go now?",
        next: "init"
      }
    ]
  }
}

let state = 'sites'

// just for illustration
function button() {
  let command = states[state].commands.find(command => command.input = newInput);
  
  if (typeof command === 'undefined') {
    document.getElementById("message").innerHTML = `${newInput} is not a valid command`;
    return;
  }
  
  document.getElementById("message").innerHTML = command.msg;
  state = command.next;
}

这样，您可以使游戏更具扩展性。

Answer 2

开始：

const inSelect =  document.getElementById('select-input')
  ,   btGo     =  document.getElementById('bt-go')
  ,   message  =  document.getElementById('message')
  ,   stateText =
        { 'init': { 'Help1': { next:'init', txt:'[Page 1 of 2. Type \'Help2\' for page 2] Commands you....' }
                  , 'Help2': { next:'sites', txt:'[Page 2 of 2] Commands you can use: <li>North One More</li><li ....' }
                  , 'South': { next:'sites', txt:'You went to abandoned city street 3' }
                  , 'South Again': { next:'sites', txt:'You went to abandoned city street 3' }
                  }
        , 'sites': { 'No': { next:'sites', txt:'You decided not to explore the church' }
                   , 'Yes': { next:'zombies', txt:'You decided to explore the church and found .......' }
                  }
        }


var state = 'init';

makeInSelect(state)

function makeInSelect( newState )
  {
  inSelect.innerHTML = ''
  for (let inp of Object.keys(stateText[newState]) )
    {
    inSelect.add(new Option(inp,inp)) 
    }
  }

btGo.onclick=_=>
  {
  let nextCase = stateText[state][inSelect.value]

  state = nextCase.next
  message.innerHTML = nextCase.txt

  makeInSelect(state)
  }

<div id="message">...</div>

<select   id="select-input"></select>

<button id="bt-go"> GO </button>