Home   Courses   Blog   About

Random numbers in JavaScript for Beginners

In this blog you will get to know everything you need to make your first random numbers app in JavaScript. I know this is a blog about how to make a random number in JavaScript, but I need to tell you the story first.

 

The story

Sometimes you have to have some fun to be able to work in a creative environment. We like to play retro games to get our blood flowing. We are using a console some of you may not even heard of, but we are playing Playstation 2. Yes we know, there are a lot of newer consoles out there. But still Mortal Kombat is here to stay, at least for us :D
Playing games not only relaxes us but also, the loser has to make the next coffee. We have a quick tournament of Mortal Kombat to make the decision for us. I must admit that I do make a lot of coffee these day. I wonder, was I tricked into playing this with professionals. But I love it. 
There is also a problem playing retro gaming consoles, we only have 3 characters (no time to play all the levels and win new ones) and 2 old controllers, one works very well the other is a little bit crooked. So we have to choose a character and a controller for each player. 
We are teaching development so I thought that we can build a kind of wheel of fortune that will choose this for us. Since we are making a JavaScript course I decided to build one in JavaScript.

Let’s start the fight...

 

A web page to show players

We will show you how to make a simple web page using just a few tags. All the tags are listed in our top 10 HTML tags list. It will be enough to have all the features we need for a successful day at the office. Meaning we will have a process on deciding, who will make coffee. This process is pretty serious business so don’t judge us :D

Let’s start with a funny title. We will put the title in a h1 tag.

Simple. Chose a good title for your version. If you play with our Plunker, you can change it and see the result straight away (link to the code is below).

Next we will display the list of players. We will put the list in a separate paragraph (<p></p>). List will be unordered so <ul></ul> and each item will be written in <li></li>.

The list of players will look something like this:

We will also add two more lists, one for controllers and the other one for characters you can play.

The list for controllers will look something like this:

And for characters:

Linking HTML and JavaScript

I will show you the simplest way of linking  HTML and JavaScript. For that we will use a button that will call a function on click. Function will be named choosePair(), which will execute on click.

Text inside the button tag is a text you will see on the button.

Having a button is the first step into linking HTML and JavaScript. The next step is having a way of showing the result on screen. For that we prepared a paragraph with an id. Id is an important part since with id we can then find the element in javascript.

Just a quick look at how this will look in JavaScript:

When you have an element, you can change its value. But we will show that in the next part.

 Random numbers writing some JavaScript

In JavaScript we have Math.random() function. This function will give us a number from 0 to 1, meaning 0.345, 0.87695, 0.1, 0, 0.11111,....  You get the picture.

So what do we do if we want to choose a random number from 1 to 10? For that we will use a bit of math. The first thing we need is to make a number bigger by multiplying the random number by 10. But this would still give us decimal numbers and we need integers. We will use Math.floor for that. This will give us the first integer, that is smaller than our number. So we have integers, but there is another trick. We need to increase the multiplicator by one to get 10 as well. So the code will look like this:

 

JavaScript code to choose players

Let me describe the code a little bit. The winner variable is a connection to the HTML element. We will change the content of it at the end of the function.

The next variable is “players” (an array) it has all the names of the players you want. If you want you can add more players. It will work fine with our script. Controllers variable is similar to players but it stores the list of controllers to play with, for now we have only two.

A more advanced example is characters, where we have a list of characters. Each character has a name and image. The image is a URL address to the image, I have found images on wikipedia and just extracted the URLs for them.

Let me describe the code, that will choose a player for us:

Player1 and player2 are variables that will store the index for the name of a player. We get the index using the random() function. As we have shown before we need to multiply random() with the number of the last value. But this time we do not have to add 1, because array is zero based. So the index for the last element will be 1 in our case with two elements.
We have added a while loop as well (The “while loop” runs a block of code as long as a condition is true). Our loop will run until both indexes are the same as we don’t want a result where Player 1 would compete against himself/herself.

Procedure for characters is the same, but I have cheated a little bit for controllers since I know there are only two controllers.

For controller2 I just calculate the opposite controller in this case math comes in handy, and for binary we get the other case by subtracting the value from 1.

Now we just need to show the result on screen.

You can see that we have combined the string with HTML tags and values of our variables. We set the HTML to the winner paragraph with an innerHTML property.

There are few points I have to make. We used a CSS class (inside style.css) for div (this is a tag that will group details of a player). The class is called inline and it will have the property display:inline-block, this is an important part since we want to show players side by side.

But since we have a CSS class we can a little bit of style  and for example add spacing (margin-right) and make the VS sign appear in the middle.

We will read the values for a player using:

The same goes for the controller. For the character we will use a property of an object. So we will read the image like this.

That is it, check the final result and code and do it yourself.

 

Final result

Simple but effective. It gets things done.

 

The code

https://plnkr.co/edit/lbgPDJf9K5gUfNaCReqN?p=preview 

Let us know if you have any improvements or if you need any help. 

Time for “coffee”, let’s play! At least today I play with Liu Kang...