The Room Adventure: Additional Features

Offering passcode hints

Difficulty: ★★☆☆☆

Requirement: Passcode Ending

In the passcode ending, the player is shown their inventory on a popup and then it disappears before they enter the passcode. Remembering nine numbers in the right order can be a challenge. Scientifically speaking, we naturally can only remember seven digits in a short-term situation like that. That's why base phone numbers are seven digits long.

Let's give the player some help and show the password clues on the screen that asks for the password. Let's also let the player ask for a hint that clues them in as to how they're supposed to arrange the numbers.

What we need to do

  • Update the passcode alert to include the pieces of the passcode.
  • Add a 'help' option to the passcode entry.
  • Pick a hint from a list (or only have one).
  • Charge some points for the hint (optional).

Step 1

Right now inside of moveToRoom, we do a quick job of asking for the passcode.

When we created this, we kept it simple. But now that we're going to get more complex, let's create a new function to deal with our new update.

Let's create a function call here since we're already looking at this code. Inside moveToRoom, change the var line to this.

Step 2

Let's get oriented before we create our function. It's important to remember what we already have in place and what we need to change.

There are a couple things the new function needs to do. We want it to show the passcode pieces the player has and we want to allow the player to guess a hint or the passcode. If we put this in moveToRoom, it would really clutter up that function. We always want functions to be as small and as focused as possible.

Remember: to create a new function, you want to be outside of any other functions. Find a place between two functions so you're not inside another function's set of braces.

We're going to loop through the player's inventory to find the passcode pieces the player picked up. When we originally created the passcode object, we made a codes property. We can use that to identify our passcode pieces, like we look for inventory items to fix things.

We have this line in getPasscode.

Step 3

Let's start creating the function. We're going to build a text string to hold the passcode pieces. We will then loop through the player's inventory to see if they have any pieces. Ready? This kind of code should look familiar.

Step 4

If the player hasn't found any passcode pieces, let's say so. Otherwise, we'll show the passcode pieces. Let's add this.

    • var text = "";
    • if (passcodePieces === "")
    • {
      • text += "You haven't found any passcode pieces yet. ";
    • }
    • else
    • {
      • text += "Passcode pieces you have found: ";
      • text += passcodePieces;
    • }
  •  
  • //there's more of this function to come shortly...
No passcode pieces
No passcode pieces

Step 5

Let's finish building the text string we're going to display. I'm adding a small cost for the hint, but you don't have to. We'll add the value when we update the getPasscode function, but we'll set up some of the code to handle it as we go.

Step 6

Now we need to ask the player to either enter a passcode or ask for a hint. But if the player does ask for a hint, then we need to show one and then let them try to enter the passcode again. Does this sound familiar? We needed to do something similar when we created the getDirection function.

We're going to need a while loop. It's going to keep looping until the player types in something other than hint. As with most programming, we have a couple of different options for handling this. We could use a do...while loop, or we could use a while(true) loop.

Even though I usually avoid them, the while(true) saves us a little code here.

We're going to use a not check here because the function will immediately end if the player did not type hint. We could use an else statement after that, but we won't actually need one, because the only reason the loop and function would continue is because the player did type in hint. If you want the else in there, you'll just wrap the hint-related code in one.

That's the quick check for the word hint.

But what if they player uses a capital letter somewhere? We controlled for this before in getDirection. We used the toLowerCase method on the direction the player typed in so we could simply how we checked things. We should probably do that here too.

But also, do you remember what we did when the player typed in exit? We were super cautious and allowed them to put the word anywhere in the string. We used indexOf to see if exit had been used anywhere in the text.

In the interest of expanding your coding skills, let's put these two together and really try to work with the player's intentions. You could replace the if statement above with this to allow more flexibility for the player.

Remember that if indexOf sends back a -1, then the string wasn't found. So as long as your passcode doesn't actually have the word hint in it, then this will work well.

Step 7

If the function is still running, then we want to give a hint. If you're charging the player some points for the hint, then we have to take care of that first.

Only include this part if you want the player to give up some points for each hint.

This is a quick check to see if the player has enough points to spend. If not, the loop continues. Remember, this means the computer jumps back to the top of the loop and runs it again without running any code below this point. So, if there are enough points, we deduct them from the player. I don't want to give an extra popup for this, so I'm going to include this information with the hint. But if you want to add a separate alert here, you certainly can.

Step 8

If we've gotten to this point in the function, then it's actually time to give a hint. You have a choice between giving a single hint or having a few.

Offering a single hint

If you only want to have one hint to offer, then you could do something like this. I still made it sort of a puzzle for the player, but you can be more direct if you want. If you want to offer several hints, skip down to the next section.

That does it for the single hint. You're all done with this feature.

Offering several hints

In the interest of expanding your coding knowledge and practice, let's create multiple hints. I'm going to create a set of hints in an array and then randomly pick a hint each time the player asks for one. This means the player could be unlucky and get the same hint more than once (unless we control for that) but I think that makes it more interesting.

Leaving an unfinished function

We're going to jump out of the getPasscodeGuess function for a few minutes. You might get some errors showing up, but we'll fix them.

Updating the getPasscode function

At the top of the function, we recreate the passcode object. Now, even though we can create new properties on the fly by just assigning them, it's better practice to show that we intend to do so if we can.

For good code readability, let's add a hints property to the passcode object. Well also add the cost of the hint here, which you can set to 0 if you don't want a cost.

When we make the clues for the player and the passcode, let's also call for the hints to be created.

To make it easy to find where to put this, go to the very bottom of the getPasscode function.

Creating the makePasscodeHints function

We made a global set of hints. Now we'll copy that set so we can use it without making changes to the original set.

Finishing the getPasscodeGuess function

We left this function unfinished which is probably showing you some errors. Let's wrap it up finally.

We have everything we need now, so we just need to pick a hint to show.

This goes at the bottom of the getPasscodeGuess function we were creating.

      • //make a copy of the global hints so we don't alter them accidentally
      • var hints = passcode.hints.slice();
      •  
      • //now let's pick a hint
      • var hintNumber = Math.floor(Math.random() * hints.length);
      • var hint = "Hint #" + (hintNumber + 1) + " of " + hints.length + ": ";
      • hint += hints[hintNumber];
      • if (passcode.hintCost)
      • {
        • hint += " (This clue cost you " + passcode.hintCost + " points.)";
      • }
      • alert(hint);
      •  
      • //if you want to remove the hint from the list, add this
      • //note: the list of hints will be reset if the player guesses wrong and tries again
      • hints.splice(hintNumber, 1);
    •  
    • } //this closes the while loop
  • } //this closes the function

That was a lot of pieces to add multiple hints, but it will enrich the game even more, especially if you get creative with your hints or change the format of the game.

Multiple hints option
Multiple hints option

Here's a hint... Keep coding!

—Dr. Wolf