Javascript Game Programming

Table of Contents

  1. Introduction
  2. Games Examples
  3. Game Logic
  4. Graphics
  5. Audio
  6. User Input
  7. Save Games
    1. Cookies
    2. Server-side
  8. Other Resources


Programming a game in Javascript is a lot like programming a game in any other language. That being said, there are a number of differences when programming within the web-browser that makes programming a javascript game, both a fun and rewarding challenge.

The goal of this document is to serve as a repository for many of the ideas that I have discovered or developed to achieve a variety of effects that are possible today.

Computers today are quite impressive and the browser shows some inate ability to

You are free to use the code on this page as you see fit. This is mostly to help others to learn how to make some neat javascript games and such.

Game Examples

This section contains a set of game examples that I have either written or found on the internet. They show some of the power of what can be done with just DHTML and JavaScript (that's right, we don't need your fancy Flash).

Other's Games:

Triglav -- This Diablo-esque game shows how using a little inginuity and some nice pre-rendered artwork makes it easy to create a nice compelling game. Unfortunately, it only works on IE.

The game lets you play as three pre-defined characters and you're task is to dungeon crawl through over 50 levels! The game includes an inventory system that effects game mechanics. The game also includes towns where you can interact with NPCs and buy and sell items. The is able to handle several moviing monsters on the screen and allows for monsters to have a lot of different animation effects. Additionally, the game implements a set of special effects and provides several "boss" battles.

This complete game has very good performance on most machines and uses image caching to reduce loading times.

My Games:

The Adventures of Tyson Dresslock -- This wass the first javascript game written by me. The game includes a single level, but is an example of a typical side scrolling arcade game. The background provides a parallax effect to give the illusion of depth. Additionally, the game implements simple physics and contains a final enemy to battle as an example of how this might be done in a compelete game. Through the course of these tutorials we will build up our own set of games that will be approximately as complex as this example and eventually more so!

Tyson Dresslock is an Australian adventurer who throws knives instead of using a whip like some other adventurers. He is obsessed with finding treasure throughout the world. In this mini adevnture he is in the jungles of South America trying to find Cortez's Amulet...which has been lost for generations. Currently only works in IE.

The Journey -- This is another game implemented by me, but this one is an RPG. The style is similar to the Dragon Warrior (Dragon Quest) games for the original Nintendo. The technique used to create the background allows for an infinitely scrollable grid. Also, the game provides an inventory as well as a dialogue system. In one of the early tutorials we will be showing how to implement something like this game.

In this demo you play the young hero who must save the world from certain destruction. Through the course of your journey you will need to visit the castle of your homeland and travel to the depths of the world. Currently only works in IE, some bugs in IE7+.

Space Factions (unfinished) -- This game was started, but never finished. The idea was to create a turn based space strategy game similar to the Masters of Orion series. While less animated that the other examples, this game has the potential to tax how well a computer AI opponent can be created using only javascript. Additionally, the amount of state to keep track of in a game like this could be challenging to work with.

Game Logic

This section contains a set of game examples that I have either written or found on the internet. They show some of the power of what can be done with just DHTML and JavaScript (that's right, we don't need your fancy Flash).


One of the most fun parts of javascript programming in my opinion is when you can get something graphically impressive to be displayed.

This section will start with some basics information about how to display graphics in the browser. We will then go on to give three examples of doing the exact same thing...building a side scrolling scene. Why show you three different ways to do the same thing? Well, there are drawbacks and benefits to each and I will explain them as I go along. You should feel free to use the technique that works best for your application.