Learn JavaScript in Construct, part 10: Standard library

13

Index

Features on these Courses

Stats

7,846 visits, 18,573 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 26 Nov, 2021. Last updated 16 Dec, 2021

This is part 10 of the tutorial series Learn JavaScript in Construct. This part continues on from part 9. So in case you missed it, see Learn JavaScript in Construct, part 9: Data structures.

In this guide we've already covered some of the standard built-in features of JavaScript, such as the push() and pop() methods for arrays. In this part we'll look at some more. JavaScript provides a comprehensive set of standard built-in features - often referred to as a standard library - and we'll only be covering a few of the most useful features. Once you get familiar with using standard library features, it should be straightforward to look up more in the MDN Web Docs reference and try them out.

In this part we'll also return to trying out code snippets in the console at various times, as it's a good way to quickly try out some of the simpler built-in features.

Console

Just for completeness, it's worth noting that the console.log() code we've been using in this guide is using the log() method of the built-in console object for adding messages to the browser console. There is also console.warn() and console.error() which work very similarly but display messages as warnings or errors respectively in the console. These can be useful for diagnostics - for example rather than letting something fail silently, it's useful to log an error to the console, so you can check if something went wrong in the console.

There are lots more console methods you can use - find out more on the console MDN documentation.

Math

The JavaScript language provides a built-in Math object that provides lots of methods for mathematical calculations. A few useful ones are included below. Try them out in the browser console.

// Try entering in to the browser console:

// Math.PI: convenient constant for PI
Math.PI			// 3.141592653589793

// Math.round(): round number to nearest whole number
Math.round(5.2)		// 5
Math.round(5.6)		// 6
Math.round(-1.2)	// -1

// Math.floor(): round down to nearest whole number
// (towards negative infinity)
Math.floor(5.2)		// 5
Math.floor(5.6)		// 5
Math.floor(-1.2)	// -2

// Math.ceil(): round up to nearest whole number
// (towards infinity)
Math.ceil(5.2)		// 6
Math.ceil(5.6)		// 6
Math.ceil(-1.2)		// -1

// Math.max(): get highest of a range of numbers
// (you can pass as many parameters as you like)
Math.max(3, 5)		// 5
Math.max(3, 7, 1, 4)	// 7

// Math.min(): get the lowest of a range of numbers
Math.min(3, 5)		// 3
Math.min(3, 7, 1, 4)	// 1

// Math.abs(): get absolute value (turns a number positive)
Math.abs(-3)		// 3
Math.abs(3)		// 3

// Math.sqrt(): calculate square root
Math.sqrt(25)		// 5

// Math.pow(): raise to power, like ** operator
Math.pow(5, 2)		// 25

// Math.random(): generate random number in range 0-1
// (excluding 1) - each call returns a different number
Math.random()

// Trigonometric calculations. Note these work with angles
// in radians - where a full rotation is 2 * pi -
// instead of using degrees. Remember fractional calculations
// are not always perfectly precise, so answers may be very
// close to but not exactly equal to the true answer.
Math.sin(Math.PI / 2)	// 1
Math.cos(0)		// 1
Math.tan(Math.PI / 4)	// 0.9999999999999999

Math.asin(1)		// 1.5707963267948966
Math.acos(1)		// 0
Math.atan(1)		// 0.7853981633974483

// Math.atan2(y, x) is another special method which does some extra
// work to make it useful for calculating angles. For example a position
// at (10, 10) is 45 degrees from the origin, so Math.atan2(10, 10)
// returns Math.PI / 4 (which is 45 degrees in radians).
Math.atan2(10, 10)	// 0.7853981633974483

You can find even more in the Math MDN documentation.

A code example

The following code example demonstrates using a function to generate a random whole number from 0 to a limit - in this case 10 (so it generates random numbers from 0-9 inclusive, as Math.random() never returns 1). It then generates 20 random numbers, adding them to an array, and shows that array in the console. Try adding this to a script in a Construct project.

// Get a random whole number up to, but not including, the limit
function getRandomNumber(limit)
{
	return Math.floor(Math.random() * limit);
}

// Generate 20 random numbers from 0-9 in an array
let arr = [];
for (let i = 0; i < 20; i++)
{
	arr.push(getRandomNumber(10));
}

// Display array of random numbers in console
console.log("Random numbers: ", arr);
  • 5 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Construct its not about codes !!! its about an easy form to create a game by simple drag and drop events and actions !!! let these codes for professionals of AAA companies !!! Shame on you !!!!

    • Construct is built on JS and can be extended with addons written in JS. That has been true since the release of C3. But nobody is forcing any user to learn JS to make games or apps with C3. This series is for people who want to expand their knowledge. No C3 user needs to understand JS to make software, but many of us would like to better understand the underlying language and be able to write addons.

      If your complaint is that it took time and energy to write these tutorials, and that this takes time and energy away from improving C3, then I understand. I wish that it was possible to create behaviors using nothing but event sheet logic, and I would love to see more time and energy directed at that. But that doesn't make this tutorial series a bad thing. As a long-time game designer with a good grounding in basic programming, this series is quite valuable to me. If anything it inspires me to push Construct further using JS.

  • awesome details! thanks Ashley!

  • One question that emoji with two characters isn't it because od this :D .???

  • Really good job...