Having fun with HTML5 - Canvas, part 4

Yan Cui

I help clients go faster for less using serverless technologies.

Table of Content

To Start Off..

Drawing the Target board

Animating the Target Boards

Adding Interactions

Adding Notifications

Demo

References:

Following on from part 3 where we basically made a little app that lets you scribble with HTML5’s canvas element, let us push on and see what else we can achieve with the canvas element.

The logical next step would be to made animations, and give you a way to interact with the animation. So how about a little game that lets you shoot moving targets like those classic Point Blank games? Hands up who’s up for that?

Good good, that’s decided then! :-)

To Start Off..

First, we’ll need a simple HTML page, something like my previous demos would do:

   1: <div id="wrapper">

   2:     <h1>HTML5 Canvas Demo</h1>

   3:     <h3>Shoot 'em!</h3>

   4:     <aside id="message"></aside>

5:

   6:     <div class="hide">

   7:         <canvas id="target" width="101" height="101" class="hide"/>

   8:     </div>

9:

  10:     <div class="block">

  11:         <canvas id="canvas" class="block" width="800" height="700"

  12:                 onSelectStart="this.style.cursor='crosshair'; return false;"/>

  13:     </div>

  14: </div>

Nothing fancy here, the CSS for this page is also pretty basic too, the only thing worth noting is that to get the crosshair cursor inside the canvas I included this in my CSS:

   1: #canvas

   2: {

   3:     cursor: crosshair;

   4: }

The onSelectStart line in the canvas HTML is to ensure that the crosshair cursor is used when you click and hold inside the canvas element.

You might have also noticed that I had specified two canvas elements in the HTML, this is to simplify the task of drawing moving targets onto the main canvas. With the 2D context object’s drawImage function, you can draw an img, canvas, or video element so I can draw the target onto the target canvas during initialization and then reuse it in the main canvas.

Drawing the Target board

Next, I need to draw the target boards, and make them look like this, but without the score on the rings:

(Why not just use an image? Because where’s the fun in that! ;-) )

As you can imagine, we can create a target board looking like this by drawing 6 circles, with the innermost 2 circles having roughly half the radius of the other 4 and the outermost 2 circles having the inversed fill/stroke colour combination. Expand the below section to see the initializeTargetCanvas function which takes a canvas element and draws a target board in inside it:

// Draws the target canvas
function initializeTargetCanvas(element) {
    var baseX = 1.5, baseY = 1.5;

    // get the width and height of the element
    var width = (element.width - baseX * 2) / 2,
        height = (element.height - baseY * 2) / 2;

    // work out the necessary metrics to draw the target
    var radius = Math.min(width, height),
        centreX = baseX + radius,
        centreY = baseY + radius,
        ringWidth = radius / 10;

    // get the 2D context to start drawing the target!
    var context = element.getContext("2d");
    context.lineWidth = "2";

    // define function to draw a ring
    var drawRing = function (strokeStyle, fillStyle, ringRadius) {
        context.strokeStyle = strokeStyle;
        context.fillStyle = fillStyle;

        // draw the circle
        context.beginPath();
        context.arc(centreX, centreY, ringRadius, 0, Math.PI * 2, true);
        context.closePath();

        context.stroke();
        context.fill();
    };

    // draw the rings for each score
    drawRing("#000", "#FFF", radius);
    drawRing("#000", "#FFF", radius -= (ringWidth * 2));
    drawRing("#FFF", "#000", radius -= (ringWidth * 2));
    drawRing("#FFF", "#000", radius -= (ringWidth * 2));
    drawRing("#FFF", "#000", radius -= (ringWidth * 2));
    drawRing("#FFF", "#000", radius -= ringWidth);
}

Animating the Target Boards

Being able to draw an already created target board onto the canvas page is one thing, but how do I animate them using the canvas? Having looked at a few other examples it seems the common way to do animation with the canvas is to simply clear the canvas and redraw the contents on a regular interval. This seems a little low level and requires a bit of plumbing but I’m sure it won’t be long (if not already) before some good, solid frameworks emerge to make these tasks easier.

For now though, let me illustrate how you might create this frame by frame animation yourself.

If you separate the responsibilities of the app, broadly speaking you end up with:

a View – i.e. the canvas element, responsible for displaying the targets
a Model – the objects representing the targets in the scene, responsible for keeping track of their current position, etc.

If you’ve dealt with any sort of MVC/MVP/MVVM pattern then this kind of separation of duty should be familiar to you already. On each frame (or if you prefer, every time the setInterval delegate function gets invoked), you update the position of the targets in the model, then redraw the targets onto the canvas to reflect their updated positions:

This is all you need to do to create a basic animation. So in my case, I need a simple Target object to keep track of:

X, Y coordinates of the top left hand corner of the target
the radius of the target
the direction and speed (per frame) it’s moving at

using MooTools here’s the class I arrived at this Target ‘class’:

/* GLOBAL VARIABLES */
var WIDTH,              // width of the canvas area
    HEIGHT,             // height of the canvas area
    …
    targets = new Array(),  // the live targets
    targetId = 0,        // the current target ID
    …

// define the Target 'class' to represent an on-screen target
var Target = new Class({
    initialize: function (x, y, radius, dx, dy) {
        var _id, _x, _y, _radius, _dx, _dy, is;

        _id = targetId++;

        // the X and Y coordinate of the top left corner
        _x = x;
        _y = y;

        // the radius of the target
        _radius = radius;

        // the rate of movement in the X and Y direction
        if (dx) {
            _dx = dx;
        } else {
            _dx = Math.ceil(Math.random() * 10);
        }
        if (dy) {
            _dy = dy;
        } else {
            _dy = Math.ceil(Math.random() * 10);
        }

        // getters
        this.getId = function () {
            return _id;
        }

        this.getX = function () {
            return _x;
        };

        this.getY = function () {
            return _y;
        };

        this.getRadius = function () {
            return _radius;
        };

        // move the target to its position for the next frame
        this.move = function () {
            _x += _dx;
            _y += _dy;

            // change direction in X if it 'hits' the border
            if ((_x + _radius * 2) >= WIDTH || _x <= 0) {
                _dx *= -1;
            }

            // change direction in Y if it 'hits' the border
            if ((_y + _radius * 2) >= HEIGHT || _y <= 0) {
                _dy *= -1;
            }
        };

        // draws the target on the canvas
        this.draw = function () {
            context.drawImage(targetElement, _x, _y);
        };

        // hit the target!
        this.hit = function () {
            for (var i = 0; i < targets.length; i++) {
                var target = targets[i];

                if (target.getId() == _id) {
                    targets.splice(i, 1);
                    break;
                }
            }
        };
    }
});

The draw function, which is invoked at regular intervals, first clears the canvas (by filling it with the background colour) then goes through all the targets in the targets array and updates their location and then draw them onto the canvas:

// clear the canvas page
function clear() {
    context.fillStyle = "#000";
    context.fillRect(0, 0, WIDTH, HEIGHT);
}

// redraw the target boards on the canvas
function draw() {
    // clear the canvas page first
    clear();

    for (var i = 0; i < targets.length; i++) {
        targets[i].move();
        targets[i].draw();
    }
}

This will give you the basic animation loop, here’s how it looks with 10 moving targets on screen at the same time:

Adding Interactions

Now that the animations are in place, let’s add some player interactions. The interactions I’m after here is simple, click in the canvas and knock out any (can be one or more) target that’s clicked on.

I’ve already gone over the process of calculating the coordinates of the click in respect to the canvas in a previous blog post here, this is what that code looks like:

   1: // works out the X, Y position of the click INSIDE the canvas from the X, Y

   2: // position on the page

   3: function getPosition(mouseEvent, element) {

   4:     var x, y;

   5:     if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) {

   6:         x = mouseEvent.pageX;

   7:         y = mouseEvent.pageY;

   8:     } else {

   9:         x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

  10:         y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;

  11:     }

12:

  13:     return { X: x - element.offsetLeft, Y: y - element.offsetTop };

  14: }

If I can work out where you’ve clicked in the canvas’ coordinate system, then I can simply run a hit test against each moving target and compare the distance between the click and the centre of the target and the target’s radius:

If the distance is smaller or equal to the radius then the click happened INSIDE the target and therefore it’s a hit, otherwise it’s a miss. Sounds reasonable enough? Here’s the code that takes a position (a simple object with X and Y position of the click inside the canvas’ coordinate system) and return the targets it has hit:

// check if the player managed to hit any of the live targets
function hitTest(position) {
    var hitTargets = new Array();

    // check if the position is within the bounds of any of the live targets
    for (var i = 0; i < targets.length; i++) {
        var target = targets[i];

        var targetCentreX = target.getX() + target.getRadius(),
            targetCentreY = target.getY() + target.getRadius();

        // work out the distance between the position and the target's centre
        var xdiff = position.X - targetCentreX,
            ydiff = position.Y - targetCentreY,
            dist = Math.sqrt(Math.pow(xdiff, 2) + Math.pow(ydiff, 2));

        // if that distance is less than the radius of the target then the
        // position is inside the target
        if (dist <= target.getRadius()) {
            hitTargets.push(target);
        }
    }

    return hitTargets;
}

To hook this up, I added an event handler to the mousedown event on the canvas during initialization:

$("#canvas").mousedown(function (mouseEvent) {
    // get the coordinates of the click inside the canvas
    var position = getPosition(mouseEvent, this);

    // find out which targets were hit
    var hitTargets = hitTest(position);

    // hit the targets
    for (var i = 0; i < hitTargets.length; i++) {
        hitTargets[i].hit();
    }
}

And now, when you ‘hit’ a target it’ll be removed from the array of moving targets and therefore won’t be drawn again when the canvas is refreshed in the next frame.

Adding Notifications

Finally, for this first-pass implementation of a mini-shooting game, I’d like to add some notifications to tell you when you’ve hit something, or when you’ve missed completely!

This is slightly trickier than the targets as the messages should not stay around forever until some user-triggered action, instead it should be shown for a given amount of time (or frames). To facilitate this requirement, I created another ‘class’ called Message:

// define the Message 'class' to represent an on-screen message
var Message = new Class({
    initialize: function (x, y, message, duration) {
        var _id, _x, _y, _message, _duration;

        _id = messageId++;

        // X, Y coordinates of where to display the message
        _x = x;
        _y = y;

        // the message
        _message = message;

        // how many frames to display the message for
        _duration = duration;

        this.getId = function () {
            return _id;
        }

        this.draw = function () {
            if (_duration >= 0) {
                context.textBaseline = "middle";
                context.textAlign = "center";
                context.fillStyle = "#FFF";
                context.strokeStyle = "#000";
                context.font = "bold 40px arial";

                // draw the message at the specified X, Y coordinates
                context.fillText(_message, _x, _y);

                _duration--;
            } else {
                // remove the message
                for (var i = 0; i < messages.length; i++) {
                    var message = messages[i];

                    if (message.getId() == _id) {
                        messages.splice(i, 1);
                        break;
                    }
                }
            }
        }
    }
});

The Message objects can only been drawn a number of times, after which it will remove itself from the array of messages currently being displayed.

To make it a bit more interesting, I defined a number of messages which will be displayed depending on how many targets you’ve managed to hit at once:

   1: // define the messages to show

   2: var hitMessages = new Array();

   3: hitMessages[0] = "MISS";

   4: hitMessages[1] = "HIT!";

   5: hitMessages[2] = "DOUBLE HIT!!";

   6: hitMessages[3] = "HAT-TRICK!!!";

   7: hitMessages[4] = "UN~BELIEVABLE!!!!";

   8: hitMessages[5] = "OH MY GOSH!!";

On the mousedown event handler (see above) I added these couple of lines to push a new message to the messages stack to be displayed for 30 frames, and the message is determined by how many targets was hit:

   1: // use one of the defined messages if possible, otherwise use a default

   2: var hitMessage = hitMessages[hitTargets.length];

   3: if (hitMessage == undefined)

   4: {

   5:     hitMessage = "TOO GOOOOOOOOD..";

   6: }

7:

   8: messages.push(new Message(position.X, position.Y, hitMessage, 30));

For example, if you managed to hit three targets one shot:

Pretty neat, eh? :-)

Demo

Here is the full demo, over the next couple of days, I will polish it up and add some more features to make it feel more gamey and post another update. In the mean time though, feel free to play around with it and let me know of any suggestions you have on how to improve it!

References:

HTML5 canvas cheat sheet

Dive into HTML5 – peeks, pokes and pointers

Having fun with HTML5 – Canvas, part 1

Having fun with HTML5 – Canvas, part 2

Having fun with HTML5 – Canvas, part 3

Having fun with HTML5 – Canvas, part 5

Whenever you’re ready, here are 3 ways I can help you:

Production-Ready Serverless: Join 20+ AWS Heroes & Community Builders and 1000+ other students in levelling up your serverless game. This is your one-stop shop for quickly levelling up your serverless skills.
I help clients launch product ideas, improve their development processes and upskill their teams. If you’d like to work together, then let’s get in touch.
Join my community on Discord, ask questions, and join the discussion on all things AWS and Serverless.

4 thoughts on “Having fun with HTML5 – Canvas, part 4”

Pingback: Having fun with HTML5 – Canvas, part 5 | theburningmonk.com
Pingback: Having fun with HTML5 – Canvas, part 3 | theburningmonk.com
Pat
December 16, 2011 at 6:27 am

Thanks for posting this! There is a few concepts I was trying to figure out, which are shown in your tutorial/example. Cool game!
Pingback: Having fun with HTML5 - Canvas, part 2 | theburningmonk.com

Having fun with HTML5 – Canvas, part 4

To Start Off..

Drawing the Target board

Animating the Target Boards

Adding Interactions

Adding Notifications

Demo

References:

Related posts:

4 thoughts on “Having fun with HTML5 – Canvas, part 4”

Leave a Comment