javascript game development made easy
First words
In this tutorial I will try to guide you through the making of a simple javascript game from start to finish. I've chosen for this first tutorial a very basic side scrolling shooter. To focus on the most basic tasks of game development I've made this game to contains only a small sub-set of what you would find in a full-featured game. The final result that you can find bellow is not really that much fun to play but again, the aim is to learn how to use jQuery and gameQuery to make a javascript game, nothing else!
In the current revision (0.2.6) gameQuery is best suited to make simple 2d sprite based games, so that's what we're gonna use it for. The way you make those sprite is entierly up to you, you can, for exemple, draw them by hand, scan them and then refine them in your favorite graphic editor. You can draw them directly on you computer like I did for the first demo.
On the bottom of every page there is a comment section. Don't hesitate to post anything here but keep in mind that it's shared amongst all the tutorial so if you're talking about a specific page say which one in you comment!
Prerequisit
I'd try my best to make this tutorial understandable by anyone, even those without prior knowledge in programming or web design. Some pointer will be given to allow you to learn more about things when they are introduce if you feel the need for it. The result will be a little boring for the experimented programmers so feel free to juste take a look a the final source code instead, it should be pretty self explainatory!
The codes snipets have been enhanced to provide a contextual link to the gameQuery API documentation. When you click one of the keyword a small frame will appears with the corresponding documentation. To make this frame disappear just click on it. This allows to make clear what in the codes belongs to gameQuery and what doesn't.
Warning
English is not my mother thongue so be indulgent for the many spelling errors or typos and don't hesitate to send a mail to point them out to me! I tried my best to make things understandable for a beginer and in an excess of oversimplification I may have said something you think is not exact, don't hesitate to say so in the comment to let the other readers know about it!
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 sprite it's usefull to give some polish to 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 the illustration in this tutorial)
Development:
- Firefox - Well obviously you will need a web-browser at some time ! I use Firefox because I Firebug is such a great tool. Safari, Chrome and Opera all have this kind of tool but I haven't try 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 could you want more.
- A good code editor - There are so many of them, juste choose one. But you will realy 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 comming from the right side of the sceen thoward him. There is three kind of enemies, each one of them with different kind of movement and weapon. Whenever the player's spaceship is touched by an enemy or one of its missile it looses a unit of it's shield. If the spaceship has no more shield when it's hit it will explode and the player will loose a life. When the spaceship explode it will reapear if the player has still some "life" left, if he doesn't the game is over. After such a resurection the spaceship will be granted a temporary imunity for 3 seconds.
The first kind of enemy is the most frequent, we will call them "minion". They move in a straight line. They will not fire any missile.
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 of enemy are some sore of "end level boss". They are bigger and stronger but also far less frequent than the two other kind. They don't move much but fire 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 totaly random, remember that it's juste a tutorial! It should be very easy to add those features if you want to and it will make a good exercie :) .
Final Result
This is what we will obtain at the end of the tutorial. Use a,d,w,s to move the spaceship around and k to fire.