Search code examples
javascripthtmlstatements

How can I add multiple commands in my if statement? JavaScript


I feel like this instance is really simple and I'm probably over thinking it, but is there a way where I can add multiple statements in my if statement? I'm looking for something like, if I chose to go to a certain direction in my game, you would get the text of "You decided to visit the store. Do you want to Explore?" And there are two options:

-Yes, and then in the input box you would type "Yes" and then it'll give a result of, "after exploring, you decided to buy something"

-No, you decided to leave.

I've been trying to figure it out for over an hour and when I was close, the command could still be accessible even if you weren't in that location. For example. The location in my game was, "You are at the park. And in the input box if somewhere randomly typed in, "Yes" the command would return as, "after exploring, you decided to buy something"

I want it so that if you're in that specific location, that code is only accessible in that location and nowhere else.

So if you were at a park as a location and randomly typed in "yes", nothing will happen because you're not in the location of the store.

Here's my code:

...

Pick a direction to go

<input id = "input" type = "text" placeholder = "Type 'Help1' for actions"/><button onClick = "button()">Confirm Action</button>
<p id = "message"></p>

<script>

  function button() {
    var textInput;
    var newInput = input.value;
    if (newInput == "North") {

      textInput = "you went to the Store. Do you explore?"; // <-- I'd like a way to put in "Yes" as a response which would print out a text saying "You explored the store and bought some food" //

      document.getElementById("message").innerHTML = textInput;

    }


    if (newInput == "North Again") {
      textInput = "you went to the Forest Home";
      document.getElementById("message").innerHTML = textInput;
    }

    if (newInput == "Help1") {
      textInput = "[Page 1 of 2. Type 'Help2' for page 2] Commands you can use: <ul><li>South</li><li>North</li><li>East</li><li>West</li><li>North Again</li><li>South again</li><li>West Again</li><li>East Again</li>";
      document.getElementById("message").innerHTML = textInput;
    }

    if (newInput == "Help2") {
      textInput = "[Page 2 of 2] Commands you can use: <li>North One More</li><li>East Once More</li><li>West Once More</li><li>South Once More</li>";
      document.getElementById("message").innerHTML = textInput;
    }
  }

</script>

</div>

<div id = "stat-box">
  <h2 align = "center">STATS</h2>
</div>

...


Solution

  • The basic approach to doing something like this is to store your game state in a variable, and every time a user runs a command, you modify the game state. Check out this code (it should work if you drop it into your site):

    <script>
    
    var state = "init" // Initialize the game state
    
    function button() {
        var textInput;
        var newInput = input.value;
    
        if (state == "init") {
            // Handle commands when game state is in "init"
    
            if (newInput == "Help1") {
                textInput = "[Page 1 of 2. Type 'Help2' for page 2] Commands you can use: <ul><li>South</li><li>North</li><li>East</li><li>West</li><li>North Again</li><li>South again</li><li>West Again</li><li>East Again</li>";
                document.getElementById("message").innerHTML = textInput;
            } else if (newInput == "Help2") {
                textInput = "[Page 2 of 2] Commands you can use: <li>North One More</li><li>East Once More</li><li>West Once More</li><li>South Once More</li>";
                document.getElementById("message").innerHTML = textInput;
            } else if (newInput == "North") {
                textInput = "you went to the Store. Do you explore?";
                state = "store"
                document.getElementById("message").innerHTML = textInput;
            }
    
        } else if (state == "store") {
            // Handle commands when game state is in "store"
    
            if (newInput == "Yes") {
                textInput = "There's a giant dragon in the cereal asile. Do you fight it?";
                state = "dragon"
                document.getElementById("message").innerHTML = textInput;
            } else if (newInput == "No") {
                // Change the state to something else
            }
    
        } else if (state == "dragon") {
            // Handle commands when game state is in "dragon"
    
            if (newInput == "Yes") {
                textInput = "You slayed the dragon!";
                document.getElementById("message").innerHTML = textInput;
            } else if (newInput == "No") {
                textInput = "You got eaten";
                document.getElementById("message").innerHTML = textInput;
            }
    
        }
    }
    
    </script>