Project Heights Docs

Heights 101

Beginner Tutorial


So you want to make a JavaScript/HTML5 game, huh? And you want it to be simple? well you came to the right place!

With Project Heights (also referred to as heights.js), you can do just that. This is a comprehensive introduction guide to help get you understanding how to use Project Heights as quickly as possible.

This tutorial assumes you have at least some programming experience, it does not have to be JavaScript programming experience, just any at all. There will be very little actual programming in this tutorial, but the foundation will be explained. At the end, you will find a link to the next tutorial which will contain programming.

What You'll Learn

By the end of this tutorial, you should:
  • Know the basic terms: step, draw, active & passive input
  • Know how the engine uses objects
  • Understand the very basics of Project Heights
If you feel this tutorial does not accomplish what is listed here, please send me an email. My contact information can be found in the last section of this tutorial.

How It All Works

How about we start with the basics. Project Heights is a completely object oriented game engine. that means that everything you write for the game will be written as an Object. An Object is, put simply, a variable with properties. For Project Heights, the objects you will write will all take their place in your game world.

The engine works like this: you write your object, then tell the engine to put the object into the game. Once you do this, the object will appear on the screen and do whatever it is told to do from your code.

No, really? Objects do what they are coded to do? NAWW. Okay yeah it seems obvious, but let's get into what is really going on to make the engine run.


The core concept to understand about heights.js is that everything runs on steps. A step is one moment of time. Think of it as a second in time: everything on the planet is doing something every second. Everything in your game is doing something every step. The way you make things work in Project Heights is to tell every object what to do every step. Steps, by default, happen 60 times per second, but this can be changed to your liking.


Steps are dandy and all, but if we want our game to be playable, there has to be some form of graphics! Well that is why we have the drawing system. Every object that you want to appear visually will draw on the screen. Project Heights uses a very simplified drawing system designed to give you the tools you need to make your game as easily as possible. Just like steps, all objects have a drawObj function which happens on every step where you handle any kind of visual representation of your object. Most often, you will be using sprites for your graphics. Sprites are 2-dimensional images which you can place on the game screen and manipulate as your game runs. We won't go too much into sprites here, but you can look for more tutorials on sprites at the main tutorial page on the documentation.

So what do we have now? We have a bunch of objects which get put into the game world, each object knows what it should be doing at every step, and each object is telling the engine to draw the graphics to the screen. That sounds like an animation, not a game!

User Input

This is where it gets good! Project Heights gives you simplified methods for handling user input to your game. You can use mouse input and keyboard input to control your game. On top of that, there are two ways you can handle input: passively and actively. Passive input is when your object sits back and waits for the engine to tell it when input is happening. Active input is when your object is actively asking the game engine if input is happening. While it may not make sense now why there are two ways to get input, you'll realize when you start coding your objects. Each object acts in its own way.

Putting It All Together

So now you know how it works. The engine uses an HTML5 <canvas> element as a game screen, drawing objects to the screen while they step through the game, taking user input and reacting accordingly. All that is left is for you to have an idea and put the pieces together.

To continue on and code your first game, see the your first game tutorial.

Thanks & Contact

Thank you for reading. If you have any questions or things to report about this tutorial, contact the author, Michael Barrett, at