A Super Simple JavaScript Project: Rock, Paper, Scissors

This article is part of a series introducing new developers to building web applications in JavaScript without frameworks or any other "magic". You can see all the articles in the series here.

Note: if you understand the basics of JavaScript, feel free to skip ahead to any of the article in the series that looks interesting. Otherwise, if you want an easy introduction to the basics of the language, read on!

Let's jump into our first practical exercise. No, we're not going to build a "Hello World" app. I wouldn't do that to you. Instead, we're going to build something much cooler: a video game.

Disclaimer: it won't technically be a video game. But it's close enough.
We're going to build a super awesome text based "Rock, Paper, Scissors' game, and the best part is all you need is the browser you're reading this on (unless you're reading this article on a phone, in which case you'll have to wait til you get back to a real browser. Sorry.).

First things first, in order to both write the game and read this article at the same time, you'll need to open a new tab or window. Once you've done that, all you need to do is right click on the page and select "Inspect Element" from the menu. Once that happens you should see something like the following:

InspectElement

Once you have this panel open, go ahead and click the 'Console' tab. You should see some type of arrow and a blinking cursor. Great job! You're in what's commonly called the 'Developer Tools' of the browser. Basically, as a web developer this is a tool that you can use to test your website or application. The 'Console' tab where we are currently is what's known as the REPL. REPL stands for Read Evaluate Print Loop, which basically just means that whatever you type into the REPL will get spit back out at you. You can try it out now by typing in 'Hello' (make sure to put the quotes around 'Hello'). Press 'Enter' and you should see the browser say "Hello" right back at you. Awesome, you're now a web developer. You will now forever be on the receiving end of the sentence, "I have this great idea for a website". You can thank me for that later, but for now, let's use the browser's REPL to build our game.

Since we're building a "Rock, Paper, Scissors" game, our first step will be to come up with a way to create three random outputs. Let's start by typing Math.random() into the REPL. After you press 'Enter', you should see a long decimal number output by the REPL. A lot just happened, let's break it down.

The Math Object

Most environments that interpret and execute JavaScript (in this case the browser) have a set of standard functionality that's built right in. One piece of that functionality is the Math object. Objects in JavaScript are a complex topic, and there's a lot to unpack about them (probably in future articles in this series). For now, it's sufficient to say that objects are like containers. You can store data in them, or, like in the case of the Math object, you can store functionality like the random function. Functions in JavaScript can be thought of as a piece of code which returns some other type of value. Functions can be identified by the parentheses that come after them, i.e. (). In the case of Math.random(), what's returned is a random decimal number between 0 and 1.0. We can use this random number to return either 'Rock', 'Paper', or 'Scissors'. Let's explore.

In order to return a value, we have to use a function. To define a function, we use the function keyword followed by what we want to call the function, followed by some parentheses, followed finally by a set of curly braces ({}) where we can define the actually functionality.

Type the following into the REPL: function rps() {} Don't press 'Enter' yet (if you did, it's OK, just hit the 'Up' arrow key and your function with pop right back up). Note: in order to create a new line in the REPL, you'll have to press 'Shift + Enter'. Just pressing 'Enter' will enter your function definition into the REPL.

Inside the curly braces {}, press 'Shift + Enter' a few times to give us some space for our function definition. On the first line inside of our rps() function, we'll first define a random number to use in our selection. On that first line, type in let random = Math.random(). This line is basically assigning a random value to the variable called random. A variable is a simple structure in JavaScript, and it can have a reference to one value.

At this point, you should have something that looks like the following:

RpsFunction

Now that we have a random number associated with our random variable, we can build out the interesting part of our application: printing 'Rock', 'Paper', or 'Scissors' to the console. To do this, we have to use another JavaScript concept: the if statement

In JavaScript we can use an if statement to execute a block of code only if the piece of code in the if statement (the 'conditional') evaluates to true. For example, consider the following:

if (1 === 1) {
  return Math.random()
}

This block of code will return a random number, because 1 does in fact equal 1 (Note: since we use = in JavaScript for assignment we have to use either two or three 'equals' signs for equality checks, i.e. ===). We can use this conditional flow to log a value to the console.

Below let random = Math.random(), enter the following if statement: if (random < .3) { console.log("Rock") }. We introduced a new piece of functionality, console.log() but it's pretty self explanatory. console.log() will log any value between the parentheses to the console. We'll use it to output the value for our game. In between the parentheses after the if statement, we have a conditional evaluation: (random < .3). In the first line of our function, we set random to a random value between 0 and 1.0. Now we'll compare that random value to .3, and if that value is less than .3, our function will print "Rock". Let's do something similar for "Paper" and "Scissors".

On the next line, type out if (random > .3 && random < .6) { console.log("Paper") }. The && operator looks strange, but basically all it's saying is that random has to be both greater than .3 (random > .3) AND less than .6 (random < .6). If so, our function will print out "Paper"

You should now have the following in your REPL:

RockPaper

Make sure you don't forget any curly braces or parentheses. If you do, the REPL will let you know with a red error message after you press "Enter", and you can fix your function by bringing it back up by pressing the 'Up Arrow" key.

Let's add the final line to our rps() function:
if (random > .6) { console.log("Scissors") }.
That's it! You can now press enter, and if you don't get any red error messages then your function is defined. You can execute it by typing rps() into the REPL and pressing enter. You should see one of the three options printed to the console:

Execute

Congratulations! This is definitely not the most ergonomic way to write JavaScript programs, so in a future article we'll explore what tools you can use to develop much more efficiently. We'll also go into some other ways to execute JavaScript code, and what's actually happen when you run a JavaScript program. For now, have fun playing!

Thanks for reading.

Show Comments

Get the latest posts delivered right to your inbox.