LESSON 17 - April 20, 2013

HTML5 GAME DEVELOPMENT

Operation C.A.N.T (Canvas Ain't No Thang) LESSON # 17

Ben W. Savage

Hey folks!

Today we're going to talk about acceleration. It's quite a simple topic, and it shouldn't take you that long to understand fully. Acceleration is what happens when we send things across the screen and their velocity becomes greater and greater. The best example is that of a car. You simply step on the gas pedal and the car moves faster. Your car is not just moving, it's increasing the rate at which it moves.

Acceleration, like a couple other physics operations we'll be learning over the course of these lessons, is simply the plugging in of secondary variables which are added or multiplied to our values. We've seen this already with velocity (our VX and VY variables from the previous lesson).

Now let's take a closer look at what happens with velocity in order to understand acceleration which is nothing more than compounded velocity in HTML5.

To start with, we're going to return to our example from yesterday:

<!doctype html>
<title>BLASTOFF!</title>
<canvas id = "canvas" width = "550" height = "400"></canvas>
<style>
canvas
{
background-color: #dddddd;
}
</style>

<script>

var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");

var rectX = 100;
var rectY = 100;

var rectWidth = 50;
var rectHeight = 50;

var VX = 0;
var VY = 0;

window.setInterval(drawRectangle,10);



function drawRectangle()
{

context.clearRect(0,0,canvas.width,canvas.height);
context.fillStyle = "#44ff11";
context.fillRect(rectX,rectY,rectWidth,rectHeight);

rectX += VX;
rectY += VY;

if (rectX > canvas.width)
{
rectX = 0;
}
else if (rectX < 0 - rectWidth)
{
rectX = canvas.width - rectWidth;
}

if (rectY < 0)
{
rectY = canvas.height;
}
else if (rectY - rectHeight > canvas.height)
{
rectY = 0;
}

}

window.addEventListener("keydown",onKeyDown,false);
window.addEventListener("keyup",onKeyUp,false);

function onKeyDown(event)
{
if (event.keyCode == "37")
{
VX = -3;
}
else if (event.keyCode == "39")
{
VX = 3;
}
if (event.keyCode == "38")
{
VY = -3;
}
else if (event.keyCode == "40")
{
VY = 3;
}
}

function onKeyUp(event)
{
if (event.keyCode == "37")
{
VX = 0;
}
else if (event.keyCode == "39")
{
VX = 0;
}
if (event.keyCode == "38")
{
VY = 0;
}
else if (event.keyCode == "40")
{
VY = 0;
}
}

</script>

Now we're going to automate it so that it travels across the screen on its own. How do we do this? First off, we get rid of our keyboard events. Then we plug some initial values into our VX and VY variables. I've gone with 3 and 3, but you can change them around if you want. Just make sure your rectangle isn't flying so fast you can't see it accelerate when the time comes!

These go on top with the other variables....

var VX = 3;
var VY = 3;

And that does it! Our ship is now flying on auto-pilot. Here's our full, modified code:

<!doctype html>
<title>ACCELERATION</title>
<canvas id = "canvas" width = "550" height = "400"></canvas>
<style>
canvas
{
background-color: #dddddd;
}
</style>

<script>

var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");

var rectX = 100;
var rectY = 100;

var rectWidth = 50;
var rectHeight = 50;

var VX = 3;
var VY = 3;

window.setInterval(drawRectangle,10);

function drawRectangle()
{

context.clearRect(0,0,canvas.width,canvas.height);
context.fillStyle = "#44ff11";
context.fillRect(rectX,rectY,rectWidth,rectHeight);

rectX += VX;
rectY += VY;

if (rectX > canvas.width)
{
rectX = 0;
}
else if (rectX < 0 - rectWidth)
{
rectX = canvas.width - rectWidth;
}

if (rectY < 0)
{
rectY = canvas.height;
}
else if (rectY - rectHeight > canvas.height)
{
rectY = 0;
}
}

</script>

Cool, huh? Now, just to illustrate what's happening here, go ahead and set your setInterval timer to 500:

window.setInterval(drawRectangle,500);

This slows the animation WAY down to 1/2 a second per change, but this will give us a chance to see what's happening from close-up.

Every time our setInterval goes off, the rectX and rectY values of our rectangle are increased. If we start off at 100 x and 100 y, that means we add three to our rectY and rectY each time around. Therefore we have:

100,100
103,103
106,106
109,109
etc.

Slowing down our interval to 500 milliseconds helps us visualize that better. But how are going to implement acceleration, then? We need a new variable that we can add to VX and VY, right? If velocity is the constant adding of a value to our x and y values, acceleration is nothing more than the adding of an ACCELERATION value to our... VX and VY values!

So let's define some new values:

Ladies and gentlemen, I bring you: AX and AY. Let's add them right away to our ever-growing list of variables:

var AX =2;
var AY = 2;

The formula is simple: all we need to do is go to our drawRectangle function (you know, the one that is constantly running) and add these two simple lines:

VX += AX;
VY += AY;

And what does this do? Before running it, let's understand it first. Here's our list of rectX and rectY values once again. This time with acceleration:

103 103
108 108
115 115
124 124
135 135
etc.

Now run it and watch as our rectangle slowly jumps further and further with each leap. It starts out slowly, then adds the value of AX and AY on each tick. Neat, huh?

Here's the full code again with all of our changes. Feel free to change the speed of the setInterval if that helps you visualize it better. I've found that a value of about 50 or so works just fine. By the way, isn't it neat what happens to the rectangle when it start accelerating REALLY fast... it gets skippy, then stands still. In fact the term for this illusion is motion standstill. Don't you F.L. science?

<!doctype html>
<title>ACCELERATION</title>
<canvas id = "canvas" width = "550" height = "400"></canvas>
<style>
canvas
{
background-color: #dddddd;
}
</style>

<script>

var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");

var rectX = 100;
var rectY = 100;

var rectWidth = 50;
var rectHeight = 50;

var VX = 3;
var VY = 3;
var AX = 2;
var AY = 2;

window.setInterval(drawRectangle,500);

function drawRectangle()
{

context.clearRect(0,0,canvas.width,canvas.height);
context.fillStyle = "#44ff11";
context.fillRect(rectX,rectY,rectWidth,rectHeight);

rectX += VX;
rectY += VY;
VX += AX;
VY += AY;
console.log(rectX,rectY);

if (rectX > canvas.width)
{
rectX = 0;
}
else if (rectX < 0 - rectWidth)
{
rectX = canvas.width - rectWidth;
}

if (rectY < 0)
{
rectY = canvas.height;
}
else if (rectY - rectHeight > canvas.height)
{
rectY = 0;
}
}

</script>

Now this should give you ample space for experimentation. We are now familiar with the basics of screen boundaries and we can control the velocity and acceleration of things we choose to move across the screen. I'd like you to try moving different things and work with these until you can do them flawlessly. But you may have noticed at this point that you can only move things in straight lines. Fun for a while, but let's get rid of some constraints so we can REALLY follow our imaginations and be able to do whatever our minds conjure up. THAT'S the real goal of these tutorials: freeing imagination of all the shackles that limit free expression in game development with HTML5. Once you've got all the tools and have mastered the technical aspects, you can very easily rely on your own noggin for making games. So get ready for tomorrow when we look at other ways to produce movement!

So stay tuned and I hope you enjoyed! As always, thanks for following along! Code didn't work for you? Hate me? Are you my illegitimate child? Send input anytime!

Until tomorrow!

-Ben
@benwhi
Onward to Lesson Eighteen!
Back to Lesson Sixteen!
Back to Index