Let’s Code A Coin Toss Game

Let's Code Post #3

Welcome back to Let’s Code. This week we will be constructing a simple coin toss game. So far, we have learned about variables and if/else commands. Just as a refresher, here is an example that uses these aspects:

var userName = prompt(“Are you a BOY or a GIRL”);

if (userName === “BOY”) {

var userBoy = alert(“Nice to meet you Mr.”);

}

else {

var userGirl = alert(“Nice to meet you Miss”);

}

 

So, for our coin toss game, we are going to need several parts.

  1. A way to have the player guess heads or tails.

  2. A way to simulate the coin toss.

  3. A way to detect if the player was right or wrong.

 

Let’s start out with our first problem, having the player guess heads or tails. The solution should appear rather simple for you. All we need to do is type the code:

 

var userChoice = prompt(“Do you choose HEADS or TAILS?”);

 

But, there is a small problem with this code. Although it does try to tell the user to input their answers in all caps, some people might input their answers differently. Some people might type HEADS, Heads, heads, or even HeAdS. Thankfully, there is a very simple way to solve this problem. We just have to attach the code “.toUpperCase()” after the parentheses. So, our new code would look like this:

 

var userChoice = prompt(“Do you choose HEADS or TAILS?”).toUpperCase();

 

The attachment “.toUpperCase” basically tells the computer to capitalize all letters in the player’s input. This allows us to expect that the answers will always be HEADS or TAILS, for the most part. Now, we need a way to simulate a coin toss. For this problem, we will be using the command “Math.random()” This command has the computer randomly select a number between 0 and 1. So, the code:

 

var randomNumber = Math.random();

 

will give a number such as: 0.23548123884, 0.65874123548, or 0.4539862781535

Here is a short program that lets you try it out. (Don’t worry too much about how the code works, we’ll review it later)

So, now that we have a random number generator, we can simulate a coin toss. Since the odds of a coin landing on heads or tails is 50/50, we can use this knowledge to decide if the coin landed on heads or tails. To do this, we have the computer test to see if the random number is below 0.5, which would represent “Heads”, or else, if it is above 0.5, then it represents “Tails”. Using what we learned, the best way to do this is using if/else commands. So, if our starting code is:

 

var userChoice = prompt(“Do you choose HEADS or TAILS”).toUpperCase();

var coinToss = Math.random();

 

Can you figure out what the rest of the code might look like using if/else commands? Try to figure it out yourself, then check your code with my code below, which is just one way the code could correctly be arranged.

 

[SPOILERS AHEAD]

var userChoice = prompt(“Do you choose HEADS or TAILS”).toUpperCase();

var coinToss = Math.random();

if (userChoice === “HEADS”) {

              if (coinToss < 0.5) {

              var result = alert(“The coin landed on heads. You Win!”);

              }

              else {

              var result = alert(“The coin landed on tails. You Lose!”);

              }

}

else{

              if (coinToss < 0.5) {

              var result = alert(“The coin landed on heads. You Lose!”);

              }

              else {

              var result = alert(“The coin landed on tails. You Win!”);

              }

}

 

[Code in JSFiddle]

Congratulations, you have just coded your first game. Although this game can still be improved greatly, this is a big step towards programming better and bigger games. The only major issue with this game is that if the player doesn’t type heads or tails, it will still register it as tails. To fix this issue, we’ll learn next week how to use the switch command.

 

Challenge of the week: Try to create some other simple games using “Math.random()” I would suggest a dice game!

Words by Stanlee Quach

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s