Spelchan.com Logo

From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 4.7: Math Functions

JavaScript provides a library of math functions. These functions are accessed by using a class called Math. We will go into more details about classes in chapter 7 where you will be learning how to create your own classes. To use an existing class is fairly easy. In some cases, you need to create an instance of a class before you can access its properties and methods. For Math, all its methods are what we call Class methods and can be accessed without an instance by simply using the name of the class.

Classes have properties, which are variables that belong to the class. In the case of the math library, there are two properties that are very commonly used:

  • Math.E is the base of natural logarithms aka Euler's number
  • Math.PI is the ratio of a circle's circumference to its diameter

These are used just like you would use a variable. So to find the circumference of a circle you would simply do something like:

let circumference = radius * 2 * Math.PI;

The common trigonometry functions are:

  • Math.abs(number) the absolute value
    console.log("The absolute value of -42 is " + Math.abs(-42));
  • Math.acos(number_between_negative_1_and_1) the arccosine
    console.log("The arccosine of .5 is " + Math.acos(.5))
  • Math.acosh(number_greater_or_equal_to_1) the hyperbolic arccosine
    console.log("The hyperbolic arccosine of 11 is " + Math.acosh(11));
  • Math.asin(number_between_negative_1_and_1) the arcsine
    console.log("The arcsine of .5 is " + Math.asin(.5));
  • Math.asinh(number) the hyperbolic arcsine
    console.log("The hyperbolic arcsine of 11 is " + Math.asinh(11));
  • Math.atan(number) the arctangent
    console.log("The arctangent of PI is " + Math.atan(Math.PI));
  • Math.atan2(x, y) the arctangent of the quotient of the arguments
    console.log("The arctangent of the quotient of the arguments from the point 11,11 is " + Math.atan2(11,11));
    console.log("The arctangent of the quotient of the arguments from the point 11,-11 is " + Math.atan2(11,-11));
    console.log("The arctangent of the quotient of the arguments from the point -11,11 is " + Math.atan2(-11,11));
    console.log("The arctangent of the quotient of the arguments from the point -11,-11 is " + Math.atan2(-11,-11));
  • Math.atanh(number) the hyperbolic arctangent
    console.log("The hyperbolic arctangent of .5 is " + Math.atanh(.5));
  • Math.cbrt(number) the cube root
    console.log("The cube root of 27 is " + Math.cbrt(27));
  • Math.cos(number) the cosine
    console.log("The cosine of PI is " + Math.cos(Math.PI));
  • Math.cosh(number) the hyperbolic cosine
    console.log("The hyperbolic cosine of PI is " + Math.cosh(Math.PI));
  • Math.hypot(lengthA, lengthB) the square root of the sum of squares of the arguments
    console.log("The hypotenuse of sides with lengths of 7 and 5 is " + Math.hypot(7, 5));
  • Math.log(number) the natural logarithm
    console.log("The natural logarithm of 10000 is " + Math.log(10000));
  • Math.log10(number) the base-10 logarithm
    console.log("The base-10 logarithm of 10000 is " + Math.log10(10000));
  • Math.log2(number) the base-2 logarithm
    console.log("The base-2 logarithm of 10000 is " + Math.log2(10000));
  • Math.pow(x, y) x to the power of y
    console.log("2 to the power of 8 is " + Math.pow(2, 8));
  • Math.sign(number) -1 if negative, 0 if 0, 1 if positive
    console.log("The sign of -11 is " + Math.sign(-11));
  • Math.sin(number) the sine
    console.log("The sine of PI is " + Math.sin(Math.PI));
  • Math.sinh(number) the hyperbolic sine
    console.log("The hyperbolic sine of 11 is " + Math.sinh(11));
  • Math.sqrt(number_greater_than_0) the positive square root
    console.log("The positive square root of 16 is " + Math.sqrt(16));
  • Math.tan(number) the tangent
    console.log("The tangent of PI is "+ Math.tan(Math.PI));
  • Math.tanh(number) the hyperbolic tangent
    console.log("The hyperbolic tangent of 11 is " + Math.tanh(11));

Trigonometric functions use radians so if you want to use them with degrees, you will need to convert the degrees into radians and the radian results back into degrees. This is done as follows:

let degrees = radian * 180 / Math.PI;
let radians = degrees * Math.PI / 180;

There are some additional functions in the math library that are often used. The commonly used functions are:

  • Math.ceil(number) the smallest integer greater than or equal to provided value
    console.log("The ceiling of 10.0001 is "+ Math.ceil(10.0001));
  • Math.floor(number) the largest integer less than or equal to provided value
    console.log("The floor of 11.9999 is " + Math.floor(11.9999));
  • Math.max(numberA, numberB [...]) the largest of the provided numbers
    console.log("The max of 7 and 11 is ", Math.max(7, 11));
    console.log("The max of 7, 42, and 11 is ", Math.max(7, 42, 11));
    console.log("The max of 7, 42, 21, and 11 is ", Math.max(7, 42, 21, 11));
  • Math.min(numberA, numberB [...]) the smallest of the provided numbers
    console.log("The min of 7 and 11 is ", Math.min(7, 11));
    console.log("The min of 7, 42, and 11 is ", Math.min(7, 42, 11));
    console.log("The min of 7, 42, 21, and 11 is ", Math.min(7, 42, 21, 11));
  • Math.random() Generates a pseudo-random number between 0 and 1
    console.log("Generating a pseudo-random number between 0 and 1: " + Math.random());
  • Math.round(number) rounds number to nearest integer
    console.log("Rounding 5.7 is " + Math.round(5.7));
    console.log("Rounding 5.4 is " + Math.round(5.4));
  • Math.trunc(number) the integer portion of the provided value
    console.log("The truncation of 5.7 is " + Math.trunc(5.7));
    console.log("The truncation of 5.4 is " + Math.trunc(5.4));

It is important to be able to generate random numbers for many games, including the game we are developing at the end of this chapter. As computers are deterministic, they really can not generate random numbers so instead we have a deterministic series of numbers that appear random. There are many methods of doing this, but when you have a sequence, the numbers are going to be the same. To prevent this from happening, a seed number (usually based on the current date and time when the program is first ran) is used so the position in the sequence is not knowable. JavaScript does not let us control the seed of the built-in random number generator but it is possible to write your own if that is important.

We generate numbers between 0 and up to, but not including, 1. This gives us the ability to use some simple math to get the number into whatever range we want. If we wanted a number between 1 and 6, then we know there are 6 numbers in that range (6 - 1 + 1). Multiplying the random number by 1 and getting an integer by taking the floor will result in a number between 0 and 5 so we simply need to add 1 to that.

let roll = Math.floor(Math.random() * 6 + 1);

This works for other ranges as well. A number between 27 and 29 would have a range of 3 (29-27+1) so we would use:

let roll = Math.floor(Math.random() * 3 + 27);

Having random numbers is only one part of creating games, and may not even be necessary for many games. Still, it is used often enough that it is worth your time to experiment with the process.

Chapter contents

Chapter 4 Contents

4.1 Cheat Sheets

A quick summary of the basics of JavaScript.

4.2 History of JavaScript

A brief look at how JavaScript was written in 10 days.

4.3 Comment Controversy

Comments. Why programmers don't write them, and how they should be written

4.4 Variables

Variables are used to store the state of a program.

4.5 (extra) How Computers Represent Data

Bits, Bytes, and data types.

4.6 Math

Math on the computer similar but some symbol differences.

Math functions

Various math operations can be used through the Math class.

4.8 Strings

Strings are what we call blocks of text and are used extensively.

4.9 Calculating true and false

Determining if a conditional expression is true or false

4.10 if (Conditional statements)

Conditional code using the if statement.

4.11 Nested conditions

If statements can contain other if statements, this is called nesting.

4.12 Switch statement

Switch statements are a way of replacing large number of else if statements.

4.13 Functions

Functions let you put common code into a named function that can be called anywhere.

4.14 Looping

Loops allow you to repeat sections of code until conditions are met.

4.15 Nested loops

Just like conditional statements, loops can be nested but this has some special considerations.

4.16 Accessing the Web page

Scripting languages give us the ability to dynamically change the web page.

4.17 Events

Reacting to the user actions is done by handling events.

4.18 Project: Where’s Wendy

Coming June 23rd, 2024

4.19 Project: Where’s Wendy implementation

Coming June 30th, 2024

← previous section
next section →
Table of Contents