LESSON 12 - April 15, 2013

HTML5 GAME DEVELOPMENT

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

Ben W. Savage

Take a look back and try tell me we haven't covered a lot so far! Go ahead and thumb through any sort of manual for the canvas and you'll see that we've run through about 95% of all the basic features. Not bad for 11 lessons, huh?

Today we're switching gears and discussing more Javascript-related issues. We'll begin with event listeners, then move on to discuss a couple of other Javascript-specific components which will help us clear away the boundaries to our game design. Then we'll talk a bit about the DOM and what sort of role it plays in our games.

So to begin, I'd like to discuss the different types of event listeners.

Now we've already given event listeners a brief introduction a while back, we've showed you how to set them up, etc. but now is the time for us to try examples of the many different types of event listeners you can incorporate into your games. This is essential stuff as you'll be using an event listener of some kind nearly every time you make a game.

So what are the different types?

Today we'll start with the a couple mouse-based listeners, then add other types as our experience progresses.

Let's start off with our first event listener: onClick.

This one's fun. It listens for a particular mouse click and performs an action that you want. You'll see as we get into these that they're at the heart of a lot of game-related activites.

Let's start off by setting up our file like so:

<!doctype html>
<title>EVENT LISTENERS</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");

</script>

This you've seen a million times already. Now, let's add a filled circle to our canvas through the arc method.

Go ahead and add these three lines:

context.fillStyle = "#0055cc"; context.arc(100,100,30,0,6.285,false); context.fill();

...and this gives us a nice, blue circle at 100,100. Note that I've given the 6.285 radians which is equal to 360 degrees.

Now what we're going to do is make this circle become bigger every time we click the canvas. How do we do that?? Well, we can't do that with a timer, of course, because a timer has no way of determining whether a mouse has clicked the canvas or not. We need to apply an event listener to something...namely our canvas in this case!

We also need to create a variable that will determine our scaling increment, then another one that will establish the initial radius value value for our arc.

We'll place them right below our getContext line and it will look like this:

var increment = 1.2;
var arcRadius = 30;

This sets our increment to 1.2. We'll see what that does in a moment.

Now we need to create our event listener:

canvas.addEventListener("onclick",movingCircle,false);

As you can see, we've applied the listener to the canvas, specified the type of listener we want to use (these are always all lower-case and never camel case and placed within quotes), then we've given a name to our function "movingCircle" and given that last argument a value of "false".

Last time I ignored addressing that last "false" and I'll ignore addressing it today too! It's an advanced feature that deals with event capturing, bubbling, etc. We'll get into these advanced features in later lessons, but in the meantime, if you're DYING to know how it works, type in Javascript event capturing and you'll find more than enough info on the subject. Don't open Pandora's box, just leave it at false.

So now we need to wrap those three lines of code below in the movingCircle function we created. Simple enough:


function movingCircle(event)
{
context.fillStyle = "#0055cc";
context.arc(100,100,30,0,6.285,false);
context.fill();
}

At this point the contents of your script tags should look like this...

<script>

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

var increment = 5;
var arcX = 100;
canvas.addEventListener(onclick,movingCircle,false);

function movingCircle(event)
{
context.fillStyle = "#0055cc";
context.arc(100,100,30,0,6.285,false);
context.fill();
}

</script>

But we're not quite finished yet. We need to replace the X value in the context.arc() method with arcRadius. Now our arc will look like this:

context.arc(100,100,arcRadius,0,6.285,false);

Now all that's left is to multiply our radius by 1.2 (increasing by 120%) every click. Here's what it looks like.

increment *= 1.2;

Add this at the bottom of your script tag.

Note that this is ACTUALLY set up in a way that there's initially nothing on the screen, then the circle appears, then its radius increases with each click.

Let's run it once just to see how it works. Ready?

Now that's sort of fun! It also gives us an idea of how powerful these tools are and what possibilities for game development they can provide us with. Think of how many times you've used your mouse to interact with things on the screen! Tons, right?

Let's get through a couple more mouse-related event listeners today:

Next let's deal with "mouseover".

Kindly change your code around so it looks like this:

<script>

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

context.fillStyle = "#0055cc";
context.arc(100,100,30,0,6.294,false);
context.fill();

canvas.addEventListener("mouseover",mouseOverCircle,false);

function mouseOverCircle(event)
{
context.fillStyle = "#008888";
context.arc(100,100,30,0,6.294,false);
context.fill();
}

</script>

See what's happening here? The circle is blue until you move your mouse onto the canvas, at which point it becomes a sort of turquoise-colored circle. Neat! Didn't catch it in time? Just reload your page and watch how the circle changes when you hover the mouse over the canvas.

Now let's add a "mouseout" listener to our canvas, so that whenever we move our mouse OFF the canvas, the circle changes back to its original blue color. Change your script to the following:

<script>

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

context.fillStyle = "#0055cc";
context.arc(100,100,30,0,6.294,false);
context.fill();

canvas.addEventListener("mouseout",mouseOutCircle,false);
canvas.addEventListener("mouseover",mouseOverCircle,false);

function mouseOverCircle(event)
{
context.fillStyle = "#008888";
context.arc(100,100,30,0,6.294,false);
context.fill();
}

function mouseOutCircle(event)
{
context.fillStyle = "#0055cc";
context.arc(100,100,30,0,6.294,false);
context.fill();
}

</script>

Even neater! Let's try the listeners called "mousedown" and "mouseup" to create the same effect. We'll attach these listeners to the canvas as we did with mouseout and mouseover. This will be our result:

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

context.fillStyle = "#0055cc";
context.arc(100,100,30,0,6.294,false);
context.fill();

canvas.addEventListener("mousedown",mouseDownCircle,false);
canvas.addEventListener("mouseup",mouseUpCircle,false);

function mouseDownCircle(event)
{
context.fillStyle = "#008888";
context.arc(100,100,30,0,6.294,false);
context.fill();
}

function mouseUpCircle(event)
{
context.fillStyle = "#0055cc";
context.arc(100,100,30,0,6.294,false);
context.fill();
}

</script>

All you really needed to do for this one was substitute "mousedown" for "mouseout" in the event listener, and later in the function, then do the same thing with "mouseup". Go ahead and hold down the mouse anywhere you like on the canvas to make the circle change colors. Then release it to make it turn back to blue.

This too is pretty neat, right?

Aw heck, I was going to finish the lesson here, but we can still throw in another two, right?

Why don't we try to add this guy to our code right below the other two listeners?

canvas.addEventListener("dblclick",mouseDblclickCircle,false);

Now all that remains is to add this function at the very bottom of our script tags:

function mouseDblclickCircle(event)
{
context.fillStyle = "#ffbb00";
context.arc(100,100,30,0,6.294,false);
context.fill();
}

By double clicking we get a nifty orange color.

Ok, last one, I promise!

Change all your script tag contents to the following:

<script>

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

context.fillStyle = "#0055cc";
context.arc(100,100,30,0,6.294,false);
context.fill();

var increment = 1.8;
var arcRadius = 10;

canvas.addEventListener("mousemove",mouseMoveCircle,false);

function mouseMoveCircle(event)
{
context.fillStyle = "#5500ee";
context.arc(100,100,arcRadius,0,6.294,false);
context.fill();
arcRadius += increment;
}

</script>

This one's fun! Every time you move the mouse, the radius of the circle gets bigger and bigger! Stop moving and it temporarily stops growing.

Now I know all this business is nothing but a series of simple reactions, here we're creating the groundwork for everything you'll need to know about game development with today's lessons. The canvas stuff is great, and you'll find it's very useful, but let's regard the first 11 lessons as a sort of introduction. It's somewhat akin to learning to drive: you've got to take a driving class and a written test before you can get behind the wheel and drive off into the sunset!

So like I said, over the course of the next few weeks I'm going to help you explore more hands-on, practical game techniques. You'll most likely find these VEEERY fun to work with. I know I was when I first learned these!

So CONGRATS for having roughed it through the first part and remember....

..the best is yet to come, folks!

Tomorrow we start with keyboard events!

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 Thirteen!
Back to Lesson Eleven!
Back to Index