HTML5 games

Mailson Menezes, Thiago Figueredo, Luís Gabriel Lima

Openbossa @ INdT

About us

Mailson Menezes

blog.mailson.org

Thiago Figueredo

@figueredo_

Luís Gabriel Lima

luisgabriel.me

We're developing the HTML5 version of The Incredible Circus

HTML + CSS + JS

HTML defines structure

<div id="my-division"></div>

CSS defines presentation

<div id="my-division" style="width: 200px; height: 200px; background-color: grey"></div>

JS defines behavior

<div id="my-division" style="width: 200px; height: 200px; background-color: grey"></div>
                        <script>
                        var mydiv = document.getElementById("my-division");
                        var onclick = function () {
                        alert("clicked");
                        };
                        mydiv.addEventListener("click", onclick);
                        </script>

This isn't new! What is this hype about?

New elements

Audio

Video

Drawing API

Storage

JavaScript 101

JavaScript is a object-oriented, prototype-based programming language

It's used as a browser programming language

Hello, world


function hello(name) {
    var message = "Hello, " + name;
    console.log(message);
}
                    

Function scope


function example () {
    if (true) {
        var a = 6;
    }
    console.log(a);
}
                    

OO JS - The easy way


var Person = function (name) {
    this.name = name;
    this.sayHello = function () {
        console.log("Hello, my name is " + this.name);
    };
};

var p = new Person("John Doe");
p.sayHello();
                    

Further reading

Introduction to object-oriented JavaScript Simple JavaScript inheritance

Canvas

HTML definition


<canvas id="game" width="480" height="854"></canvas>
                    

Access via JavaScript


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

There are plenty of functions on a canvas2d context


context.drawImage();
context.fillRect();
context.drawText();
context.fillText();
                    

Reference

Specification

Canvas tutorial

Image


var img = new Image();
img.src = "html5.svg";
                        

Dealing with asynchronous load


var img = new Image();
img.onload = function () {
    // Do some logic
    console.log("Image loaded");
};
img.src = "html5.svg";
                        

Painting on canvas


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

context.drawImage(img, 3, 14);
                        

Painting a section of the image


context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
                        

Events


var canvas = document.getElementById("game");
function onclick (e) {
    console.log("Click position: " + e.clientX + " " + e.clientY);
}
canvas.addEventListener("click", onclick);
                        

Using anonymous functions


var canvas = document.getElementById("game");
canvas.addEventListener("click", function (e) {
    console.log("Click position: " + e.clientX + " " + e.clientY);
});
                        

Game structure

Sprites (game elements)

Main loop

Sprite


var SimpleSprite = function (x, y) {
    this.x = x || 0;
    this.y = y || 0;

    this.image = new Image();
    this.image.src = "simple.png";

    this.update = function (delta) {
        this.x = this.x + 5 * delta;
    };

    this.draw = function (context) {
        context.drawImage(this.image, this.x, this.y);
    };
};
                    

Animated sprite

Sprite sheet

Load as a regular image


var AnimatedSprite = function () {
    ... // Simple sprite properties

    this.image = new Image();
    this.image.src = "spritesheet.png";

    ... // Simple sprite update & draw
}
                    

Frame counter

Animation has 2 frames

Change frame each 500 ms

Define animation properties


var AnimatedSprite = function () {
    ... // Simple sprite properties
    ... // Sprite sheet load

    this.currentFrame = 0;
    this.animationTimer = 0;
    this.frameTime = 500; // Change frame each 500ms
    this.frameCount = 2;

    ... // update & draw
}
                    

Compute current frame


    this.update = function (delta) {
        ... // Simple sprite computation

        this.animationTimer += delta;
        var frameInc = Math.floor(this.animationTimer / this.frameTime);
        this.animationTimer %= this.frameTime; // reset timer
        this.currentFrame += frameInc;
        this.currentFrame %= this.frameCount; // reset frame counter
    };
                    

Frame drawing


this.draw = function (context) {
    var frameX = this.image.width * this.currentFrame;
    context.drawImage(this.image, // image
        frameX, 0, this.image.width, this.image.height, // source
        this.x, this.y, this.image.width, this.image.height // dest
    );
};
                  

Game


var Game = function () {
    this.update = function (delta) {
        for (var i = 0; i < this.sprites.length; i++) {
            this.sprites[i].update(delta);
        }
    };

    this.draw = function (context) {
        for (var i = 0; i < this.sprites.length; i++) {
            this.sprites[i].draw(context);
        }
    };
};
                  

Main loop


var game = new Game();
var TICK = 30;
function mainLoop () {
    game.upate(TICK);
    game.draw(context);

    setTimeout(mainLoop, TICK);
}

mainLoop();
                    

Further reading

window.requestAnimationFrame

requestAnimationFrame for smart animating

Hands on!

Resources

Sample game

Download

Read more

HTML5 Rocks

WebPlatform

Mozilla developer network - MDN

Dive into HTML5