Script Setup
As we get into Animation, the introduction to gaming, there is a very specific organization of the file that helps keeps the script organized. Basically, we will be breaking the script into four parts:
- Variable Declarations
- Initializations
- Variable Updates
- Drawing
Each of these areas serve an important purpose and breaking them up into parts will help keep your confusing code organized. Below, we will discuss each section in detail.
Variable Declarations
In this section, all necessary variables will be declared. This will enable these variables to be used in a variety of methods throughout the program. Remember, a variable declaration is just the naming of a variable. In this section it is rare that a variable will be assigned a value. The main exception to this rule is the creation of image variables so that the image loads prior to the program running.
It is important that a variable is declared for each part of an image/shape that you may want to alter. For example, if I want to be able to alter the position of a box throughout the program, I will need to declare variables for both the x and y coordinates. If I want to alter the size of a box, I would need variables for the width and height.
<![CDATA[//box variables
var boxW;
var boxH;
//control variables
var canvas;
var ctx;
var timer;]]>
initialize()
This is the function that gets the ball rolling, so to speak. The purpose of the initialize method is to give values to all of the variables. This method should be called when the page loads
<![CDATA[<body onload='initialize();'>]]>. All declared variables should be given a valid starting value in this method. Also, the last line of the initialize method should call the update method.
<![CDATA[function initialize(){
boxW=10;
boxH=10;
canvas=document.getElementById('can');
ctx=canvas.getContext('2d');
timer=0;
update();
}]]>
update()
The update() method is responsible for altering any variables as needed. This is also the place that we can check timing events to see if an action should start or stop (in gaming, we would check for user input here). In other words, this is the controller of the script. This method will be repetively called (approximately 60 times per second) to make our animations appear smooth to the viewer.
We are going to make our box grow for two seconds and then shrink for two seconds. This set of actions will be repeated indefinitely until the animation is stopped. We will start with the growing code:
<![CDATA[boxW++; //increase the width of the box on each call to update
boxH++; //increase the height of the box on each call to update]]>
We only want this code to occur while the box is growing, so we need a new variable to track if the box is growing. At the top of the program declare a new variable
<![CDATA[var boxGrowing;]]> and then set its initial value to true in initialize()
<![CDATA[boxGrowing=true;]]>. We will toggle the value of this variable between true and false depending on the timer variable.
To keep track of the time in an animation, we can count on the fact that the update method will be called close to 60 times per second. Using this fact, we can simply increment the timer variable each time update is run. Then, if timer==60, we have reached 1 second; timer=120, means 2 seconds and so on. Since we want to change the action every 2 seconds, we are checking to see if the timer variable is divisible by 120, if it is, we will toggle the value of boxGrowing.
<![CDATA[timer++;
if(timer%120==0){
boxGrowing=!boxGrowing; //!boxGrowing makes a value of true into false and vice-versa
}]]>
This now allows us to perform apppropriate variable updates based on if the box should be growing or shrinking:
<![CDATA[if(boxGrowing){
boxW++;
boxH++;
}
else{
boxW--;
boxH--;
}]]>
The last two things that happen in the update function are a call to draw() and the code to repeat the process. So, our final update() method looks as follows:
<![CDATA[function update(){
timer++;
if(timer%120==0){
boxGrowing=!boxGrowing;
}
if(boxGrowing){
boxW++;
boxH++;
}
else{
boxW--;
boxH--;
}
draw();
requestAnimationFrame(update); //this calls update repeatedly
}]]>
draw()
The draw() method is responsible for drawing all items to the screen. Prior to drawing, we need to clear the screen so that old versions are taken away or we will get trails.
<![CDATA[function draw(){
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.beginPath();
ctx.rect(0,0,boxX, boxY);
ctx.fill();
ctx.closePath();
}]]>