Preliminary

Randomization is an important asset for all games to have. They allow an experience to be unique and everytime, which engages the users whom play the game. Thankfully for us, JavaScript makes randomizing things simple and intutive and I’ll show you how the method they provide can be used to make two classic games. Rock Paper Scissors & Flip a Coin.

Creating Randomness

There is only one function that you need to randomize events. And that function is Math.random(). This one small function will be the most critical component of creating something random in JavaScript. Math.Random() on its own picks a random number that’s greater than 0 and less than 1.

console.log(Math.random());

Running the following in the console, will output a random number through the already defined range we said above. Running this code multiple times will output a different random number each time. So, how exactly can we use this to create randomized events, such as a coin flip.

Well, to do this, we can assign a range of numbers different properties. For examples if a number is between 0 and 0.5, it will be assigned the propety of tails, while any number greater than 0.5 will be assigned heads.

The following is an example of this:

//Define Head & Tails Variables
let heads = 0;
let tails = 0;

//Flip the Coin
let flip = Math.random();

//If flip is less than or equal to 0.5, count it as tails, else count it as heads
flip <= 0.5 ? tails++ : heads++

//Log how many times heads & tails have landed
console.log(`Heads has been landed ${heads} time(s)`)
console.log(`Tails has been landed ${tails} time(s)`)

This is a basic outline of how you can code a “flip a coin” type of game. You can see, that we assigned Math.random() the variable “flip” as we will then use it in a ternary operator.

The ternary operation tells the computer if Math.random() equals less than or equal to 0.5, then add 1 to the tails variable. If it doesn’t, then add to the heads 1 variable. It will then log the reuslts in the console, telling the user how many times heads has been landed on and how many times tails has been landed on.

It’s that simple! Before we conclude this guide though, I’ll use a slightly more complex example of rock paper scissors. The code below, just like above will be a simple outline on how the logic for such a game would be created.

//Creates an array of possible choices
let possibleChoices = ["Rock", "Paper", "Scissors"];
  
//Define Choice with no value
let choice = ""

//Function that makes computer choose its play and then output the result
function computerChoice() {
  //Defines Result variable
  let result = "";

  //Define Computer Move Variable
  let computerMove ="";
  
    //Pick a Number 1-3 (Creates Randomization for Game)
    let random = Math.floor(Math.random()*3 + 1);

    //Translates Numbers into actual Moves
    if (random === 1) {
      computerMove = possibleChoices[0]
    } else if (random === 2) {
      computerMove = possibleChoices[1]
    } else {
      computerMove = possibleChoices[2]
    }
  }

This is a slice of code from the Rock Paper Scissors game that can be found on this website. The most important part for your understanding is how Math.random() is being manipulated (Math.floor(Math.random()*3 + 1)). This makes Math.random() output either 1, 2, or 3. The exact logic to how this is done is out of a scope for this guide, but it’s here to show you how powerful this one function can be and inspire you to have your own ideas.

The whole version of these games can be found below: