How to use math function to create a JavaScript game

Hi today we are exploring on JavaScript math functions.

I’m not going to cover the whole topic but am going to use only a few functions to create a very interesting game.

I had already touched on JavaScript function you can visit this post to have a hint of what functions are.

what are math functions?

In JavaScript math is an inbuilt object used to perform a specific task on a number.

The task may include

• rounding off
• finding the largest or smallest number
• Finding the square root

we use the syntax Math.function_name to perform this task for example.

When finding the square root of a number we use Math.sqrt().

Having laid the foundation of our topic today lets jump to the main topic

Game Description

So today we are going to create a number guessing game.

A user inputs a number in case he/she wins or looses a message will be displayed on the screen.

Sometimes back we built a random-quote generator using JavaScript but we had no in depth understanding of the methods we used.

Today we are going to have an exploration of the methods we used.

We are going to divide this into two sections

1. part A – building the logic

2. part B – building the user interface

PREREQUISITE

1. TEXT EDITOR LIKE SUBLIME TEXT OR VS-CODE
2. BROWSER LIKE CHROME
3. COMMAND LINE – read here
4. NODEJS – download here

Part A – Building the logic

So our logic today works in this way

A user inputs a number

The program checks if the number is greater or smaller than the number generated

If the number is smaller a text is displayed saying number entered is smaller you loose.

If the number is larger a text is displayed saying number entered is larger you loose

And If the number equals to the number generated a text is displayed with the message you win

Methods used

In this program we will use the math.random function and math.floor function

Lets have a look at them

Math.random()

The math.random() function returns a random number less than one when used

example

Create a folder and name it number_game on the folder create three files namely

• index.html
• index.css
• index.js

Now open the folder using your command line

In the index.js file enter the code below

console.log(Math.random())

When you run the code in the command line using node index.js different random number will be displayed.

check example below

ian@IanoTech:~/Documents/number_game$ node index.js
0.15085735827237046
ian@IanoTech:~/Documents/number_game$ node index.js
0.8713440268408201
ian@IanoTech:~/Documents/number_game$ node index.js
0.3734072852228041
ian@IanoTech:~/Documents/number_game$ node index.js
0.7831864545909717
ian@IanoTech:~/Documents/number_game$ node index.js
0.8052743091830057
ian@IanoTech:~/Documents/number_game$ node index.js
0.5255443964845314

and that’s how we can generate a random number in JavaScript

Now the problem comes in when we want to generate a number in a range for example up-to 100

Lets solve it

Math.floor()

Used to generate a number within a given integer. less than or equal to the integer.

example

console.log(Math.floor(5.7))
console.log(Math.floor(5.3))
console.log(Math.floor(5))

running the code in the command line

ian@IanoTech:~/Documents/number_game$ node index.js
5
5
5

To return an interger between 0 – 10

we use the syntax

console.log(Math.floor(Math.random() * 11))

Running the code in the command line we have

ian@IanoTech:~/Documents/number_game$ node index.js
0
ian@IanoTech:~/Documents/number_game$ node index.js
3
ian@IanoTech:~/Documents/number_game$ node index.js
4
ian@IanoTech:~/Documents/number_game$ node index.js
3
ian@IanoTech:~/Documents/number_game$ node index.js
0
ian@IanoTech:~/Documents/number_game$ node index.js
6
ian@IanoTech:~/Documents/number_game$ node index.js
8
ian@IanoTech:~/Documents/number_game$ node index.js
8

That’s it for part A we are done with writing the logic

Stay tuned for part B