Menu
Setting up your HTML
Programming
Event Inputs
Mouse
Keyboard
E.H. Template
Movement
Sprite Object
Collision Detection
Sprite Template

Up one level

Starting with JavaScript

Now that you have set up your HTML, close Dreamweaver or Notepad (whichever you were using to edit your HTML code) and right-click on your myCode.js file. Choose Edit from the list and it should open with either Notepad or Dreamweaver.

If it opens under Dreamweaver, set the view to Code.
var timr;
window.moveTo(0,0);
//declare global variables out here.
//ALSO declare variables which are to be used as sprites out here.

function setup(){
  document.getElementById("instructions").style.visibility="hidden";
  //DEFINE SPRITES IN HERE!
  main();
}

function main(){
  //INSERT MAIN GAME CODE HERE
  
  //RUN VECTOR METHOD FOR EACH SPRITE HERE
  
  //DELETE THIS LINE AND THE PAIRS OF SLASHES BEFORE THE NEXT 3 CONDITIONAL LINES!
  //if(Game_Over_Condition is true){
    //gameOver();
  //}else{
    timr=window.setTimeout("main();",50); //About 20FPS
  //}
}

function gameOver(){
  document.getElementById("game_over").style.visibility="visible";
}

//Define sprite interaction functions out here
Now we must declare variables which control the activity of our DIVs. Where you see the line //ALSO declare variables which are to be used as sprites out here., delete them, and replace them with var. After the r in var, type a space, and then using the list of unique ID's for your divs, create a list of names to the following specification:
  1. Each variable must start with "s_"
  2. Each variable must end with the case sensitive unique ID of each DIV.
  3. Each variable must be followed by a comma (,) except for the final variable which must be followed by a semi-colon (;).
So, for example, if I had a selection of DIVs called ball, bat1, bat2 and net, my line would look like:

var s_ball, s_bat1, s_bat2, s_net;
Next it is time to link the DIVs to their respective variables. To do this, replace the line //DEFINE SPRITES IN HERE! with a series of lines each declaring a sprite object, like so:

s_ball = new sprite(32,32,"ball","ll");
s_bat1 = new sprite(16,64,"bat1","ll");
s_bat2 = new sprite(16,64,"bat2","ll");
s_net = new sprite(8,512,"net","ll");

You will notice that each sprite is set up with four attributes.
The first of these is the width of your DIV. Type it in from your list.
Next is the height of your DIV. Again, type it in from your list.
Third is the ID of your DIV. Remember that this is case sensitive and here, it should have a double inverted comma (") either side of it.
Finally comes the wrapping control. The first digit controls horizontal wrapping, the second vertical wrapping. Each digit may be "l" or "w".
    If one of these digits is "l", the axis it controls forbids the object from passing off its edges.
    If one of these digits is "w", the axis it controls allows the object to move off one edge, and reappear on the opposite edge!
From this point onwards, Mr Black will need to take you through the ins and outs of JavaScript and HTML programming to suit your individual needs.
Remember that while some members of your group are coding, the rest can get on with developing graphics.
If we have enough time at the end, we will be able to make some background music to put over your game!
For reference, I have included several explanations and demonstrations in the list to the left - it is not essential that you read each of these, but some of them may be helpful in making and understanding your games.
Last | Index | Next