Need help correcting a function in text game

Question

I'm trying to teach myself how to code a simple text game. I found a YouTube tutorial and am working my way through Der Kerker. A problem I have is that his final code doesn't match what he did in the videos, so I'm stuck.

Here's my problem:

When you load the game, the commands "take sword" and "help" both work as designed. However, if you put in jibberish or an unrecognized command, the game is supposed to say, "I don't understand ... "

Right now, it only clears the input box but doesn't actually run the command.

Here's my fiddle of the game:

https://jsfiddle.net/megler/hv7hqp1e/

If I remove the (check == false) portion - then the "I don't understand" part will work. However, if you type "help" - it will run the help segment AND say "I don't understand help."

The goal is for it to only say "I don't understand" if the player types in an unrecognized command.

Here's the JS:

//Check To See If True Function
var check = false;

// Been To Room Variables
var beenToCorridor = true;
//

//Inventory
var sword = false;
//

//Current Room 
var currentRoom = "nCorridor";

$(document).ready(function() {

    $("form").submit(function() {
        var input = $("#commandLine").val();

        function check() {
            check = true;
        }

        if (input == "help") {
          $("#messageHelp")
            .clone()
            .insertBefore("#placeholder")
            .fadeIn(1000);

          check();
        }
        if (input == "take sword" && currentRoom == "nCorridor") {
          $("<p>You picked up a sword.</p>")
            .hide()
            .insertBefore("#placeholder")
            .fadeIn(1000);

          check();
        }       
        else if (input == "take sword" && currentRoom != "nCorridor") {
          $("<p>The sword is not here.</p>")
            .hide()
            .insertBefore("#placeholder")
            .fadeIn(1000);

          check();
        }
        else if (check == false) {
          $("<p>I don't understand " + input +  ".</p>")
            .hide()
            .insertBefore("#placeholder")
            .fadeIn(1000);
        }

        $("#commandLine").val("");
    });
});

Hope that makes sense.

You redefine the variable `check` to be a function half way through the form submit handler, so it's no longer == false in the if block. — James, Oct 27 '15 at 22:54
I wondered about that. Kind of like a double negative? How do I correct it? — megler, Oct 27 '15 at 22:56
Either name the boolean variable check something else, or name the function check something else. — James, Oct 27 '15 at 22:58
@megler Try jibberish here: https://jsfiddle.net/divy3993/hv7hqp1e/1/. Is this what you want? — divy3993, Oct 27 '15 at 23:01
When I do that, it presents the 2nd part of the problem I mentioned. Let's say I change the boolean variable to "checkmate" down in the "I don't understand" section. Now, you are correct that the "I don't understand" part will work, but if you type "help" it will execute the help line ("Here are a list of commands") AND say "I don't understand help" For whatever reason, it doesn't do that with "take sword" only with "help" — megler, Oct 27 '15 at 23:04
@megler Try jibberish here: http://www.jsfiddle.net/divy3993/hv7hqp1e/1. Is this what you want? — divy3993, Oct 27 '15 at 23:06
Thank you, I see what you did there. That worked fine. The only thing I noticed is that it doesn't clear out "help" after you type it, but I can fix that. Thanks! — megler, Oct 27 '15 at 23:19

score 1 · Accepted Answer · answered Oct 27 '15 at 23:04

I think this is what you want:

Code Replaced:

else if (input != "take sword" && input != "help") {
            $("<p>I don't understand " + input +  ".</p>").hide().insertBefore("#placeholder").fadeIn(1000);
        }

Snippet:

//Check To See If True Function
var check = false;

// Been To Room Variables
var beenToCorridor = true;
//

//Inventory
var sword = false;
//

//Current Room 
var currentRoom = "nCorridor";

$(document).ready(function() {
 
 $("form").submit(function() {
  var input = $("#commandLine").val();
  
  function check() {
   check = true;
  }
  
  if (input == "help") {
   $("#messageHelp").clone().insertBefore("#placeholder").fadeIn(1000);
   check();
  }
  
  if (input == "take sword" && currentRoom == "nCorridor") {
   $("<p>You picked up a sword.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
   check();
  }
  
  else if (input == "take sword" && currentRoom != "nCorridor") {
   $("<p>The sword is not here.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
   check();
  }
  else if (input != "take sword" && input != "help") {
   $("<p>I don't understand " + input +  ".</p>").hide().insertBefore("#placeholder").fadeIn(1000);
  }
        else
        {
            return false;
        }
  $("#commandLine").val("");
 });
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  
  <div id="console">
  
  <p id="message_startGame">Welcome to my game!</p>
  
  <p id="area_northCorridor">You are in the North Corridor.  There is a sword on the ground.</p>
  
  <p id="messageHelp" style = "display: none;">Here is a list of commands</p>
  
  <!-- PLACEHOLDER:  THIS IS WHERE EVERYTHING WILL BE INSERTED BEFORE
  --->
  
  <div id="placeholder"></div>
  
  <form onsubmit="return false;">
  <input type = "text" size ="50" autofocus="autofocus" id="commandLine">
  </form> 
 
 </div>
  </body>

Thanks! That also works. So I'm guessing it was because I had the variable above the document ready? In reality, I had it in a totally separate constants.js file, but I couldn't use it that way on Fiddle without uploading a bunch of stuff, so I moved everything to the js file. Just one other question: When I run this in Chrome, the console throws an error stating uncaught typeError "check is not a function". Any idea why? — megler, Oct 27 '15 at 23:22
@megler I guess that is because function and variable has same name. Check This: http://stackoverflow.com/questions/15057649/function-and-variable-with-the-same-name — divy3993, Oct 27 '15 at 23:27
Hopefully one final question on this: This works perfectly while I have a small command-set: `else if (input != "take sword" && input != "help")` Would I use an array or something as I add commands? I would imagine this would get HUGE for a larger game... — megler, Oct 27 '15 at 23:37
to reenterate what @divy3993 said, It might also serve you to create a javascript lookup object to house the questions and actions — Mark Schultheiss, Oct 28 '15 at 12:45

score 0 · Answer 2 · answered Oct 27 '15 at 23:01

Use different name for check variable. You should also separate last else if.

//Check To See If True Function
var _check = false;

// Been To Room Variables
var beenToCorridor = true;
//

//Inventory
var sword = false;
//

//Current Room 
var currentRoom = "nCorridor";

$(document).ready(function() {

    $("form").submit(function() {
        var input = $("#commandLine").val();

        function check() {
            _check = true;
        }

        if (input == "help") {
          $("#messageHelp")
            .clone()
            .insertBefore("#placeholder")
            .fadeIn(1000);

          check();
        }
        if (input == "take sword" && currentRoom == "nCorridor") {
          $("<p>You picked up a sword.</p>")
            .hide()
            .insertBefore("#placeholder")
            .fadeIn(1000);

          check();
        }       
        else if (input == "take sword" && currentRoom != "nCorridor") {
          $("<p>The sword is not here.</p>")
            .hide()
            .insertBefore("#placeholder")
            .fadeIn(1000);

          check();
        }

        if (_check == false) {
          $("<p>I don't understand " + input +  ".</p>")
            .hide()
            .insertBefore("#placeholder")
            .fadeIn(1000);
        }

        $("#commandLine").val("");
    });
});

score 0 · Answer 3 · answered Oct 27 '15 at 23:01

You should

first initialize var check = false; somewhere, otherwise the if condition never passes
add an else to your list of if ... else if ... checks.

Here's is the corrected code:

$(document).ready(function () {

    $("form").submit(function () {
        var input = $("#commandLine").val();
        // INITIALIZE CHECK VARIABLE HERE
        var check = false;

        function check() {
            check = true;
        }

        if (input == "help") {
            $("#messageHelp").clone().insertBefore("#placeholder").fadeIn(1000);
            check();
        } 
        // NEEDS AN ADDITIONAL ELSE HERE TO PREVENT DOUBLE MESSAGE AFTER HELP
        else if (input == "take sword" && currentRoom == "nCorridor") {
            $("<p>You picked up a sword.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
            check();
        } else if (input == "take sword" && currentRoom != "nCorridor") {
            $("<p>The sword is not here.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
            check();
        } else if (check == false) {
            $("<p>I don't understand " + input + ".</p>").hide().insertBefore("#placeholder").fadeIn(1000);
        }
        $("#commandLine").val("");
    });

});

score 0 · Answer 4 · answered Oct 27 '15 at 23:02

Reset the check variable back to false every time the form is submitted, so you s=tart from a clean slate each time it is called. Also rename your function 'check' to 'setChecked' to not cause confusion between the global variable and the local function name.

$("form").submit(function() {       
    check = false;

    function setChecked() {
        check = true;
    }

    if (input == "help") {          
        setChecked();           
    }

   //etc...
}

score 0 · Answer 5 · answered Oct 27 '15 at 23:10

It's because you redefine 'check' as a function, so it's not equal to false anymore.

The solution is to use another name for your boolean, for example 'ischeck', like this:

//Check To See If True Function
var ischeck = false;

// Been To Room Variables
var beenToCorridor = true;
//

//Inventory
var sword = false;
//

//Current Room 
var currentRoom = "nCorridor";

$(document).ready(function() {

    $("form").submit(function() {
        var input = $("#commandLine").val();

        function check() {
            ischeck = true;
        }

        if (input == "help") {
            $("#messageHelp").clone().insertBefore    ("#placeholder").fadeIn(1000);
            check();
        }

        if (input == "take sword" && currentRoom == "nCorridor") {
            $("<p>You picked up a sword.</p>").hide().insertBefore    ("#placeholder").fadeIn(1000);
            check();
        }

    else if (input == "take sword" && currentRoom != "nCorridor") {
        $("<p>The sword is not here.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
        check();
    }
    else if (ischeck == false) {
        $("<p>I don't understand " + input +  ".</p>").hide().insertBefore("#placeholder").fadeIn(1000);
    }
    $("#commandLine").val("");
});

});

Need help correcting a function in text game

5 Answers5

Linked