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:

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:

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.

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:

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.