Tutorial 1 - Control

Overlay

It may be a good idea to let the player know how many sheild and life is left for his ship. If we had a score system we would want to show this to. Like for the #background, #actors and other groups we create a group (#overlay) to hold those informations. Here we won’t use any gameQuery function since it’s only text we’re displaying. We need to create two placeholder divs at the right position in our group. We can do this with the append method since a group (like a sprite) is a simple div.

$("#overlay").append("<div id='shieldHUD'style='color: white; 
                width: 100px; position: absolute; font-family: verdana, sans-serif;'>
                </div><div id='lifeHUD'style='color: white; width: 100px; position: absolute;
                right: 0px; font-family: verdana, sans-serif;'></div>");

We then need to keep those information updated. And for this we will use… yes you guessed right a callback. In our callback we can simply select the right div and replace it content. WE don’t want to use append() here since it will add something but html method (or the text one). It replaces the content by the element described by the string given as argument.

$("#shieldHUD").html("shield: "+$("#player")[0].player.shield);
        $("#lifeHUD").html("life: "+$("#player")[0].player.replay);

Allways keep in mind that gameQuery is just writing plain HTML nodes and that you can still use all that jQuery has to offers on them!

HTML file

The HTML file is use for two things, first it brings together jQuery, gameQuery and your game javascript sources. Then it displays a static screen explaining to the user what she as in front of her without any need for a javascript execution. This may allow you to explain that the game needs javascript for example, here we just display a welcome screen and a “click here” text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
          <head>
            <title>gameQuery - Tutorial 1 - Final result</title>
            <script type="text/javascript" src="../jquery.min.js"></script>
            <script type="text/javascript" src="../jquery.gamequery.js"></script>
            <script type="text/javascript" src="./tutorial.final.js"></script>
            <style type="text/css">
              html,body{
                margin: 0;
                padding: 0;
                background: black;
              }
              #welcomeScreen{
                width: 700px; 
                height: 250px; 
                position: absolute; 
                z-index: 100; 
                background-image: url(logo.png); 
                font-family: verdana, sans-serif;
              }
              #loadingBar{
                position: relative;
                left: 100px; 
                height: 15px; 
                width: 0px; 
                background: red;
              }
            </style>
          </head>
          <body>
          <div id="playground" style="width: 700px; height: 250px; background: black;">
            <div id="welcomeScreen">
              <div style="position: absolute; top: 120px; width: 700px; color: white;">
                <div id="loadingBar" ></div><br />
                <center><a style="cursor: pointer;" id="startbutton">
                  Click here to start!
                </a></center>
              </div>
            </div>
          </div>
          </body>
        </html>

Start button

At this point you have done all that you needed except for one thing, start the game. To do this you must use the startGame method. You can call it at the end of your code to make the game start automaticaly but it may be a good idea to let the user choose when he want to start palying. We will enhace the “click here” text to call this method like we did before with the restart link.

//initialize the start button
        $("#startbutton").click(function(){
          $.playground().startGame(function(){
            $("#welcomeScreen").fadeTo(1000,0,function(){$(this).remove();});
          });
        })

The function provided to the startGame method will be called once the playground is initialized and all images and sound are loaded. Here we juste slowly remove the welcome screen.

Loading bar

“But hey, whats that loadingBar div in the html code?” you may ask yourself. Well it’s a good question. It’s a place holder for … the loading bar! gameQuery loads your resources before it starts and you can give feedback to the user about the progression of this action through the loading bar. The setLoadBar method allows you to give a div that will sees it’s width increase as the resources load. All you need to do is provide the name of the div and the final size in pixels you would like to obtain.

$().setLoadBar("loadingBar", 400);

However keep in mind that the progression indicator in not very efficent, for example every sprite is worth the same in the progression, a 2ko one exactly as much a 300ko one. For the sounds it’s even worst since not all plugins allows for the probing of the loaded state, so gameQuery does it’s best to guess but if nothing is found it will consider the sounds loaded when the last image is ready (anyway keep in mind that at the time of the writing of this tutorial sound support is only experimental in gameQuery).

Last word

Well that’s it. Thank you for reading this, I hope that I’ve convinced you that writing a game in javascript is less voodoo as it used to be! I’d like to empasis that all that we’ve seen in this tutorial is probably the least important part of developing a game! When you play a game you expect it to look good and be fun to play! So I recommand you to spend enough time on those two area (I didn’t 😀 ). I’ll be very interested to see what you will be able to do with this library (or another).

Fork me on GitHub