Learning JavaScript basics by coding tiny apps

Have you ever heard of the text-based games from the 1980s? The concept involves the player answering a series of questions, and the game progresses based on the answer.

They used to be quite popular back in the day, and recently they’ve seen a comeback of sorts - on mobile devices, in the form of choices-themed games.

So, let’s practice some basic JavaScript by building a game in which a user can either go to work or eat pizza. Based on their choices, they either make money or lose money.

There’s no specific goal in this game. After all, it’s a tiny “game” with 25 lines of code. The only real goal for this game is to practice JavaScript.

Preparing our game

Photo by Letizia Bordoni, @letyi on Unsplash

Let’s first describe how the game is supposed to work.

Here is a list of “requirements” for our game:

1. The player should start the game with a sum of money, say, 20 dollars
2. The player should be asked a question about what they’d like to do, either go to work, or have pizza.
3. Based on the answer, 20 dollars will either be added or deducted from the player’s current sum of money
4. Once this iteration is over, the player will be asked whether or not they want to play again

Let’s begin building the game!

Asking the player what they want to do

We’ll begin by asking a user what they’d like to do:

1
var firstQuestion = prompt("Where do you want to go? Type w for work, type p for pizza");

We can run the above line of code by copy-pasting it into developer tools’ JavaScript console in our browser. Doing so will make a pop-up prompt window appear, and we are free to type whatever we want inside of its input.

However, our game is based on receiving either a w for “work”, or a p for pizza, so that we can conditionally execute code based on user input. We also need to cater for the third option, and that is, all the other answers that are neither a w or a p. We also need to take into account the possibility that a player might type in a capital W, or a capital P letter.

Let’s start tackling this, line by line.

Checking if the user typed in a w

To check whether the user type in a w, we’ll write the following lines of code:

if(firstQuestion.toLowerCase() == "w") {
  // do something
}

What we’re doing here is, we’re using the equality operator, ==, to check whether the value stored in the firstQuestion variable, once it gets set to lowercase, is equal to a w. If it is, the code inside the curly brackets, { ... }, will execute.

Currently this is only a comment, so JavaScript will skip the comment, but we can actually add something to it.

Adding the code inside the code block of the if statement

Remember that at the beginning of the article we talked about the user starting with the initial $20 to play with. After all, if the user didn’t have $20 at the beginning, they wouldn’t be able to buy a pizza, right?

Ok, so let’s add this initial amount of money at the game start:

var money = 20;

Let’s now update our logic so that if player chooses to go to work, their money variable is increased by additional $20:

if(firstQuestion.toLowerCase() == "w") {
  money = money + 20;
  alert(`You now have ${money} dollars`);
}

If we were to run the game right now, we’d get a notification that we made $40 dollars if we typed the w into the prompt. Otherwise, nothing would happen. That’s ok, we’re still building our game!

Let’s add the condition for choosing to get a pizza.

Adding the code for choosing the pizza

A user is kinda hungry and not really feeling like working, so let’s give them an option of having a pizza:

if(firstQuestion.toLowerCase() == "p") {
  money = money - 20;
  alert(`You now have ${money} dollars`);
}

Now our user can choose either to eat or go to work, and their wallet is updated accordingly.

However, what if the user types something else entirely? How do we deal with such a scenario?

Adding code for user not choosing work or pizza

Rather than listing all the possible combinations of strings that a user might input into the prompt, we’ll simply check if the value entered is not equal to a w or to a p. This is actually quite easy.

We’ll use the not equals operator to check if the value is not equal to a w, then we’ll use the AND operator, the && to check if the value is also not equal to a p. If both of these are true - meaning, if it is true that the typed-in value is neither a w or a p, we’ll execute the code inside the third if statement:

if(firstQuestion.toLowerCase() != "p" && firstQuestion.toLowerCase() != "w") {
  // start the game again
}

This brings us to a question: How do we run the code from the beginning? In some yesteryear languages, there was a GOTO option, but we don’t really have that in JavaScript. What we can do, however, is a tried and true pattern: we can put our code inside a function, and then, if the third condition is satisfied, we can just start the machine (the function) all over again.

If you’re curious about why we’re using this machine metaphor here, or if you’re confused about how functions work in JavaScript in general, check out this excellent post on the topic right here.

Putting our code into a function

Let’s look at the full code of our micro-game as it is now:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var money = 20;
var firstQuestion = prompt("Where do you want to go? Type w for work, type p for pizza");

if(firstQuestion.toLowerCase() == "w") {
  money = money + 20;
  alert(`You now have ${money} dollars`);
}

if(firstQuestion.toLowerCase() == "p") {
  money = money - 20;
  alert(`You now have ${money} dollars`);
}

if(firstQuestion.toLowerCase() != "p" && firstQuestion.toLowerCase() != "w") {
  // start the game again
}

The first thing we need to do is, determine what part of our code needs to go inside the function. The answer is easy: everything except the money variable. Why is that?

We’re doing it like this because we want the app to keep the memory of the value of the money var, and not reset it back to $20 every time the game function is ran again.

That’s why we’ll set up our game function like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var money = 20;
var game = function() {
  var firstQuestion = prompt("Where do you want to go? Type w for work, type p for pizza");

  if(firstQuestion.toLowerCase() == "w") {
    money = money + 20;
    alert(`You now have ${money} dollars`);
  }

  if(firstQuestion.toLowerCase() == "p") {
    money = money - 20;
    alert(`You now have ${money} dollars`);
  }

  if(firstQuestion.toLowerCase() != "p" && firstQuestion.toLowerCase() != "w") {
    // start the game again
  }
}

Now, to start the game again, we’ll replace the comment inside the third if’s code block, with a call to the game function, like this:

if(firstQuestion.toLowerCase() != "p" && firstQuestion.toLowerCase() != "w") {
    game();
}

Of course, we also need to make the game start, so we add a call to the game function at the very bottom of our current app’s code:

game();

Next, we’ll extend our game functionality by making it re-playable, and see an easy way to debug it.

Making the game re-playable

Here’s the full code of our game:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var money = 20;
var game = function() {
    //debugger;
    var firstQuestion = prompt("Where do you want to go? Type w for work, type p for pizza");

    if(firstQuestion.toLowerCase() == "w") {
        money = money + 20;
        alert(`You now have ${money} dollars`);
    }
    if(firstQuestion.toLowerCase() == "p") {
        money = money - 20;
        alert(`You now have ${money} dollars`);
    }
    if(firstQuestion.toLowerCase() != "p" && firstQuestion.toLowerCase() != "w") {
        game();
    }
    var secondQuestion = prompt("Wanna play again? y or n");
    if(secondQuestion.toLowerCase() == "n") {
        alert("Ok, thanks. You've finished the game.")
    }
    if (secondQuestion.toLowerCase() == "y") {
        game();
    }
}
game();

What we’ve done here is, we’ve added another question, in which we’re checking if the user would like to repeat the game: choose again if they want to go to work or have pizza again.

If the answer is “no”, the game finishes and we alert the player of this.

If the answer is yes, we just call the game() function again.

That’s it for this article, I hope you liked it and learned something useful.