The Room Adventure: Additional Features

Offering passcode hints

Difficulty: ★★★☆☆

Requirement: Passcode Ending

In our game, we give the player some hints when they get their passcode pieces. I used fruit names and let the player figure out they have to put them in alphabetical order. The player may not recognize this, so let's give them some help.

What we need to do

  • Add a button for the player to click for a hint.
  • Pick a hint from a list (or only have one).
  • Charge some points for the hint (optional).

Step 1: Add a hint button

When the passcode screen with the number pad is up, let's add a button the player can click to ask for a hint.

I want the hint to have a 5 point cost for the player, but you can leave that out if you want to. I'm going to add that when we update the getPasscode function a little further down, but we'll set up some of the code to handle it before then.

Go to the enterPasscode function

Find this line of code near the bottom of the function.

Where do you want your hint button? Above the Try Passcode button or below it? That determines where you're putting the next lines of code. Me? I'm putting the new button above.

I'm also focusing on some flexible code in case we change our minds later and don't want a cost. All we'd have to do is set the cost to zero and the if statement will take of showing the cost or not.

Step 2: Starting the getPasscodeHint function

We're going to create a new function to handle the hints. You may or may not want a cost when the player asks for a hint. You may even change your mind later one way or the other. Because of that, we're going to make the first part flexible. It requires an if statement to see in there is a value in passcode.hintCost.

We also need to make sure the player has enough points for the hint.

Let's handle any hint cost issues first

  • function getPasscodeHint()
  • {
    • var text = "";
    • if (passcode.hintCost)
    • {
      • //let's make sure the player has the points they need, otherwise we'll let them know and exit the function
      • if (player.score < passcode.hintCost)
      • {
        • text += "Sorry, you don't have enough points to buy a hint.";
        • text += "<p>Enter the passcode.</p>";
        • display.broken(text);
        • return;
      • }
      •  
      • //okay, let's take points from the player now
      • text += "<p><em>You bought a hint for " + passcode.hintCost + " points.</em></p>";
      • player.score -= passcode.hintCost;
      • display.score();
    • }
  •  
  • //there's more of this function to come shortly...

Again, if you ever decide to get rid of the hint cost, you only need to change the point value back in the getPasscode function. All of the if checks will handle the change automatically so you don't ever have to remove it!

Can't buy a hint.
Can't buy a hint.

Step 3: Making hints

You have a choice. You can have just one standard hint or you can make a few. It's up to you and I'll show you both ways.

This is essentially the same process as in the text version of this feature, with a couple of exceptions. Instead of alert, we'll use our display object. We don't have a while loop in our HTML version. And we can add some HTML formatting to the text so it looks nicer.

Offering a single hint

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

    • var hint = "In Kindergarten, you learned a song that sounds like <em>Twinkle, Twinkle, Little Star</em>";
    • hint += " but it's about something being in a specific order.";
    • hint += " Your clues have code words that should be put in that same order.";
    • hint += "<p><strong>Enter the passcode.</strong></p>";
    • text += hint;
    • display.broken(text);
  • } //this closes the function

That does it for the single hint. You're all finished with this feature. But maybe add some style! See below.

One hint option
One hint option

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 getPasscode() [top]

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. And here, we'll set the cost for the hint, which you could make 0 if you don't want a cost.

Updating getPasscode() [bottom]

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];
    • hint += "<p><strong>Enter the passcode.</strong></p>";
    • text += hint;
    • display.broken(text);
    •  
    • //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 function
Multiple hints option
Multiple hints option

Step 4: Styling the new hint button

This is optional, but why not add some hint button flair? Feel free to style the button however you like.

Remember, because the hint button is inside the navigation pane, we have to target it through inheritance.

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.

Psst... Here's a hint... Keep coding!

—Dr. Wolf