Expect this Unit to take just under 1 hour. To demonstrate what you should have at the end of this Unit, check out the Demo for Unit 3. Don't forget to use the Chrome DevTools to look at the console and check out the source code for how I'm testing the engine.

We're going to create an object called Engine, which will have the functionality of managing a game loop as well as providing a namespace for sub-systems.

This object is a definition, and we will want to create an instance of. There's no big compelling reason to go this route with JavaScript, but it's a good warmup before diving into our Game Object System, which will be inheritence heavy. Plus it's a common approach in native game programming for the game engine to an instantiable object.


Initial approach

API Source Code:

requestAnimationFrame() polyfill

Updating our game every frame is something that isn't well handled consistently across all browsers. We'll be using what's called a polyfill - a piece of code that provides the technology that we'd normally expect the browser to provide natively - to help manage that. This requestAniamtionFrame() polyfill lets the browser control our update frequency, which is optimized for performance and synchronized to it's repaint cycle, instead of us setting our own update interval using timers.

I typically put this in a separate file and put any other polyfill or utility code-snippets, which would get included before engine_core.js. For now it's fine just to have it in this file.

Implementation Source Code:


This function takes in a function as a parameter which will be called each time the browser fullfills a requestAnimationFrame() request.

Implementation Source Code:


Cancels any pending animation frame request

Implementation Source Code:


Re-assigns the gameloop callback function to requestAnimationFrame

Implementation Source Code:

Creating the engine definition

There's a number of topics to discuss in this next section of code:

  • Constructor function
  • Singleton pattern
  • Function objects
  • Default properties
  • Static properties/functions

Implementation Source Code:

Test Code

Now, here's a small example of how we would create an instance of our Engine:

Source Code:


Part 1: Adding the file to our project

  1. Create a subdirectory called js_engine
  2. Create engine_core.js and put it in this subdirectory.
  3. Add engine_core.js to our list of engine files to load through modernizr.

Part 2: Writing the engine core

  1. Add the requestAnimationFrame() polyfill code
  2. Create the Engine object
    • Write a function that returns an object, and assign it to a global variable called "Engine".
    • Inside this function, write the three functions we discussed: setGameLoop, pauseGame, unpauseGame.
    • Write the constructor function as we discussed.
    • Assign this constructor function the three functions through the prototype property.

Part 3: Create an instance of your engine and demonstrate it works

  1. In main.js, once the engine files have finished loading, create a new instance of the engine.
  2. Assign the instance a game loop function that prints to the console each frame