javascript game development made easy
Tutorial 1 - Introduction
- Introduction
- Step 1 - Sprites and Animations
- Step 2 - Object Model
- Step 3 - Game Logic and Control
- Step 4 - Warp up
First words
The API has changed since this tutorial was written and it has not been updated yet, please have a look at the migration guide.In this tutorial I will guide you into making a simple javascript game from scratch. I’ve chosen a very basic side scrolling shooter for this first tutorial. To focus on the most basic tasks of game development, I’ve broken this game down to contain a sub-set of the features that one may find in a full-featured game. The final result is intended to be somewhat like the game at the end of this page and it is probably not too engrossing but again, the aim is to learn how to use jQuery and gameQuery to make a javascript game 
The current revision (0.2.6) of gameQuery is best suited to make a simple 2d sprite based game, so that’s what we’re going to use it for. The way you make those sprites is entirely up to you. You can, for exemple, draw them by hand, scan them and then refine them in your favorite graphic editor or you can draw them directly on you computer like I did for the first demo.
At the bottom of every page there is a comment section. Don’t hesitate to post anything there but keep in mind that it is shared on all the tutorial pages. So, if you’re talking about a specific page don’t forget to mention which one is it you’re talking about in you comment!
Prerequisites
I will try my best to make this tutorial understandable to they layman, even those without prior knowledge of programming or web design. Some pointers will be given to allow you to learn more about things when they are introduced if you feel the need for it. The result will be a little boring for the experienced programmers so feel free to take a look a the final source code instead. It should be pretty self explanatory!
The codes snippets have been enhanced to provide a contextual link to the gameQuery API documentation. When you click one of the keyword a small frame will appear with the corresponding documentation. To make this frame disappear just click on it. This allows me to clearly explain what part of the code belongs to gameQuery and what doesn’t.
Warning
English is not my mother tongue so expect a lot of spelling errors or typos but please don’t hesitate to send in an email to point them out to me. I tried my best to make things understandable for a beginner and in trying to somewhat oversimplify the concept I may have proceeded to misstate some things, don’t hesitate to say so in the comment section to let the other readers know about it. Thanks.
Tools
This is a series of tools that can come-in handy. I will list free, open-source, software here but some great proprietary software can be found too.Graphics:
- The Gimp - A great graphic editor. I’m not a fan of the multi windows interface but it’s definitively a must have. Even when you use 3d modeling for your sprites it’s useful to polish your rendered work.
- Blender - An incredible 3D modeler and renderer, you can even use it to make 3d games.
- Inkscape - If you need some vector art this is a great software.(I didn’t use it for the game but for used it for the illustrations in this tutorial)
Development:
- Firefox - Well obviously you will need a web-browser at some time! I use Firefox primarily because Firebug is a great debugging tool. Safari, Chrome and Opera all have this kind of tool but I haven’t tried them yet. If you want to use IE and need some help debugging your code, take a look at this.
- Firebug - This tool will change you life, really! DOM explorer, CSS, break-points, network stats, what else could you want.
- A good code editor - There are so many of them, just choose one. But you will really benefit from using a specialized text editor instead of a general purpose one like windows notepad!
Game Description
The player controls a spaceship facing right and he must avoid or destroy enemies coming from the right side of the screen towards him. There are three kinds of enemies, each one of them with a different kind of movement pattern and weaponry. Whenever the player’s spaceship collides with an enemy or one of its missile it looses a unit of its shield. If the player’s spaceship has no more shield units when it’s hit, it will explode and the player will loose a life. When the spaceship explodes it will reappear if the player has still some “life” left, if he doesn’t the game is over. After such a resurrection the spaceship will be granted a temporary immunity for 3 seconds.
The first kind of enemy is the most frequent, we shall call them “minions”. They move in a straight line. They will not fire any missiles.
The second kind of enemy are a little bit more resistent and move in a less predictable way, we will call them “brainy”. They will fire a missiles in at a random rate.
The last kind are some sort of “end level boss”. They are bigger and stronger but also far less frequent than the two other two types. They don’t move much but fire rapid missiles. When one of these appears no more enemies will appear until you’ve destroyed it.
This game will have no end, no score and will be totally random, remember that it’s just a tutorial! It should be very easy to add those features if you want to and it will make a good exercise .
