Tutorial 1

##Introduction 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] (http://en.wikipedia.org/wiki/Side-scrolling_shooter#Scrolling_shooters). 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 sprites is entirely up to you. You can, for exemple, draw them by hand, scan them and then refine them in your favourite graphic editor. You can draw them directly on you computer like I did for the [first demo] (http://gamequery.onaluf.org/demos/1/).

##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] (http://www.gimp.org/) - 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] (http://www.blender.org/) - An incredible 3D modeler and renderer, you can even use it to make 3d games.
• [Inkscape] (http://inkscape.org/) - 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] (http://www.mozilla.org/en-US/firefox/fx/) - Well obviously you will need a web-browser at some time! I use Firefox because I think Firebug is such a great tool. Safari, Chrome and Opera all have this kind of tool but I haven't tried them yet.
• [Firebug] (http://getfirebug.com/) - This tool will change you life, really! :) DOM explorer, CSS, break-points, network stats, what more could you want.
• A good code editor - There are so many of them, just choose one. But you will realy benefit from using a specialised text editor instead of a general purpose one like windows notepad! [Netbeans] (http://netbeans.org/) or [Notepad++] (http://notepad-plus-plus.org/) are good options.

###Game Description The player controls a spaceship facing right and he must avoid or destroy enemies coming from the right side of the screen. There is three kinds of enemies, each with different kind of movement and weapon. Whenever the player's spaceship is touched by an enemy or one of its missiles the player loses a unit of shield. If the spaceship has no more shield when it's hit it will explode and the player will lose a life. When the spaceship explodes it will reappear if the player still has 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 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 resistant and moves in a less predictable way. We will call them "brainy". They will fire missiles 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 totally random. Remember that it's just a tutorial! It should be very easy to add other features if you want to and it will make a good exercise :) .

<iframe width="704" scrolling="no" height="254" frameborder="0" src="http://gamequery.onaluf.org/tutorials/1/iframeFinal.html"></iframe>