Cheat Sheets

A tile-based world is a technique used in HTML5 games to provide interesting flexible backgrounds without huge memory costs. The basic idea is to take a number of small images and use them in combination[more…]

for loops are useful when you know how often a loop will continue in your HTML5 game, but sometimes you need more flexibility. The while loop is based on a simple idea. It contains a condition. When the[more…]

When you're writing loops and conditions, things can go pretty badly in your HTML game code and a debugger may be necessary. Sometimes it's very hard to tell what exactly is going on. Fortunately, modern[more…]

Functions make your HTML5 game code safe because variables created inside a function are destroyed when the function dies. Sometimes, though, you want data to move from one function to another. One solution[more…]

HTML5 games are about data; often that means a lot of data. An array is the most basic tool programmers have for managing large amounts of data. JavaScript supports a simple yet very powerful and flexible[more…]

Random numbers are a key part of HTML5 game programming. Often you want some kind of random behavior. This is used to mimic the complexity and unpredictability of the universe. Most languages have a random[more…]

The HTML provides the foundation for the number guesser in your HTML5 game, but it needs some CSS code to make it have the look you're aiming for. The CSS isn't just for beauty's sake, but it also adds[more…]

As in most HTML games, the real action happens when the user clicks a button. This form has two buttons, but one of them is hidden most of the time. For now, concentrate on the code that happens when the[more…]

It's possible to build a library that simplifies all of the various HTML5 game engine features. Consider using the library: simpleGame.js. This library is easy to use and is fully capable of sophisticated[more…]

To make very powerful HTML5 games, you'll want to be able to build your own sprites that do exactly what you want them to do. After you make an object, you can give it characteristics and behavior.[more…]

One of the most interesting things about HTML game objects is that they are variables that can contain other variables. When a variable exists in the context of an object, the variable is called a[more…]

Properties describe the characteristics of an object in your HTML 5 game, and methods describe the behavior. A method is a function associated with an object. You build methods very much like creating[more…]

Sound effects have long been one of the biggest weaknesses of the web as an HTML gaming platform. Web browsers had very inconsistent and troublesome audio capabilities. Fortunately, HTML5 solves the sound[more…]

The most interesting things in HTML5 video games happen when sprites conk and collide into each other. Game engines normally have some sort of tool for testing whether two sprites are overlapping. This[more…]

The first part of HTML5 game creation is planning. It's pretty hard to program a game in the best of circumstances, and it's nearly impossible if you don't know exactly what you're trying to accomplish[more…]

There will be times when you will reuse objects multiple times in your HTML5 games and they're going to stay about the same. So, it makes sense to put them in a library for easy reuse. That's exactly what[more…]

When two objects collide in your HTML5 game, it often means something important. This is where the reset method comes in. You'll often want to change the score, play a sound, reduce the number of lives[more…]

It would be nice to have more than one object in your HTML5 game. Multiple objects make the game a bit more exciting and adds some depth. One object bumping around by itself isn’t much fun. What good are[more…]

Of course, if your HTML5 game can stop, you need a way to restart it. The easiest way is to use a dirty trick. Because the game is in a web page, all you have to do is refresh the web page in the browser[more…]

The vector addition principle can be useful to your HTML5 game in many ways. For one, it can add drag effect and thus, lead to more accurate land-vehicle behavior. Imagine your car is stuck in a bad neighborhood[more…]