Keyboard with historical game keys in orange

A simple HTML5 Game tutorial – Part 2

Following on from Part 1 we have put in place the foundation of our game.  But, we can’t really call it a game as we have no interaction. Reminder ourselves of the goal set out in Part 1 we need to achieve the following:

In you want to have a peek at the result of following this post click here.

Continue reading “A simple HTML5 Game tutorial – Part 2”

A simple HTML5 Game tutorial – Part 1

I’ve always wanted to create a game. It seems the older I get the closer I get. This post is the first in a small series which walks you through the steps I followed to create a simple game. Here is a taster of the end result:

A simple game create using HTML's canvas and JavaScript
Screenshot of HTML5 game

Continue reading “A simple HTML5 Game tutorial – Part 1”

CSS3 animated social cube mash-up

Several brilliant examples of CSS3 animations have caught my eye recently. There are some clever people out there producing cutting-edge examples rich with beautiful animations. I thought I’d mix a few ideas together to produce a 3D spinning globe using CSS3 and JQuery. The final result is here and a screen shot follows:

Cube spinning using  CSS3 technology

Continue reading “CSS3 animated social cube mash-up”

CSS3 cork board with sticky notes!

CSS is rather useful these days.  With the web getting more visual each day CSS3 is taking a central role in visualizing data.  Within this post one covers the basics to create a  This could be used to display your facebook friends, latest tweets or a virtual to-do list. Lets’s start with a screen-shot of the finish product:

css3-message-board-with-sticky-notes

Continue reading “CSS3 cork board with sticky notes!”

JavaScript the hoisting effect

JavaScript is one of the most talked about programming languages of the day. Being the language of the browser any modern programmer, developer or web designer cannot avoid it. It’s even sneaking onto our servers with courtesy of the node.js project. If you’re new to JavaScript there are a few ‘features’ that may trip you up, especially if you have been using a class based language. Take the following example in Java:

	public static void main(String[] args) {
		
		List<String> list = null;
		
		if((list = coloursInImage(img1)) != null) {
			
			int iNoOfColours = 0;
			
			iNoOfColours += list.size();
			System.out.println(iNoOfColours);
			
		}
		
		if((list = coloursInImage(img2)) != null) {
			
			int iNoOfColours = 0;
			
			iNoOfColours += list.size();
			System.out.println(iNoOfColours);
		}
	}

In Java the variable iNoOfColours will hold the size of the list as returned by the method ‘coloursInImage’. So if img1 has 8 colours and img2 two has 256 colours we’d see those numbers printed to the output window.

Let’s look at the JavaScript equivalent:

	var list = null,
		img1, img2;

	if((list = coloursInImage(img1)) !== null) {

		var iNoOfColours = Number();
		
		iNoOfColours += list.length;
		console.log(iNoOfColours);

	}

	if((list = coloursInImage(img2)) !== null) {

		var iNoOfColours;
		
		iNoOfColours +=	list.length;
		console.log(iNoOfColours);
	}

In JavaScript the variable iNoOfColours will hold the size of the array as returned by the method ‘coloursInImage’. So if img1 has 8 colours and img2 two has 256 colours we’d expect to see those numbers printed to the output window. However, we actually get 8 and 264. This is because of the hoisting effect – specifically how JavaScript works when handling declaration statements (var). Regardless of where a variable is declared, its declaration is hoisted to the top. The key here is to understand the declaration and initialization steps are treated separately and only the declaration will be hoisted. In our example, the first declaration also initialises the variable to 0. We then simply increment the variable’s value (zero) by the length of the array; thus, when repeating this within the second if-statement we end up summing the two. This is because the second declaration of the variable has been hoisted. The effect of which is that the expected scope does not mirror that we’d expect in Java. Something to watch out for!

Overview of the Master Boot Record

One of the most important parts of the computer is the Master Boot Record (MBR).  This little known hero is responsible for starting our operating systems – without it your Windows or Linux operating systems would not start.  In this post one will attempt to explain how the Master Boot Record is structured and how it works.  The post is an education for me, as what I’m about to write has been freshly researched due to my odd impulse to give the MBR its five minutes of glory. Continue reading “Overview of the Master Boot Record”

JavaScript Design Pattern – Singleton Pattern

The singleton pattern is a design pattern which restricts the creation of an object to the same instance. In practical terms this means the variable defined below would be looking at the same object instance:

var object1 = new Car(),
object2 = new Car();

object2.colour = 'red';

The example above changes the colour property of object2. With the singleton pattern object1 is the same object, thus, the colour property of object1 also reflects the change. The pattern is useful when there is a need to coordinate the logic across decoupled and thus distinctly separate areas of code while maintaining access to a shared and consistent central object. Let’s look at an implementation of a singleton pattern:

function Game() {
    
    // the cached instance 
    var instance;
    
    // rewrite the constructor
    Game = function Game() {
        return instance;
    };

    // carry over the prototype 
    Game.prototype = this;

    // store the instance 
    instance = new Game();

    // reset constructor pointer 
    instance.constructor = Game;

    // default properties
    instance.lives = 3;
    instance.score = 0;

    return instance;
}

This code above creates an object called “Game”. To make sure the object is a singleton the constructor is rewritten during the object’s first invocation. This rewrite means any subsequent instances of the object simply returns the value of the instance variable. The instance variable within the object is set during the initial creation of the object prior to the new constructor being applied. Two properties are created after the line that rewrites the constructor; to repeat the above for clarity, this property creation will only be performed once for the first object.

Proving the above we can create two instances of the Game object and assert they are equal:


// update prototype and create instance
Game.prototype.player = "Greg";
var g = new Game();

// update prototype and create instance
Game.prototype.difficulty = 'hurt me plenty';

var g2 = new Game();

console.log("New player property works: " + (g.player === g2.player));
console.log("Both instances of Game are equal: " + (g === g2)); // true 
console.log("All prototype properties work: " + 
            (undefined !== 
                 (g.player && g.difficulty && g2.player && g2.difficulty)));
console.log("The initial score property works: " + g.score);
g2.score += 100;
console.log("The properties work after update: " + g.score);
console.log("The constructor points correctly: " + (g.constructor === Game));

The code above creates two instance of the Game object variables: ‘g’ and ‘g2’. The lines which follow then compare the two objects to assert the are truly equal. This will return the following result:

New player property works: true
Both instances of Game are equal: true
All prototype properties work: true
The initial score property works: 0
The properties work after update: 100
The constructor points correctly: true 

The implementation of the pattern is fairly simple. Although, the pattern does endure a fair amount of criticism. This is because the pattern implements a global space into your code which could be argued as being an anti-pattern. In my opinion used sparingly the pattern can be useful.

JavaScript Design Pattern – The Chaining Pattern

The basic theory of a chaining pattern is to call method after method of a given object without having to split the calls over several lines. Here is an example of calling several methods procedurally:

myObj.method1();

myObj.method2();

myObj.method3();
...
myObj.methodX();

And with a chaining pattern:

method1().method2().method3().methodX();

I can imagine you are asking, “What use is this? And how does it work?”. Well let us first look at a real world example. The JQuery library makes extensive use of this pattern. Take the following example for instant:

$('div').fadeOut(1800).
    fadeIn(1800).
    slideUp(800).
    slideDown(800).
    animate({height:'20px'}, 500).
    animate({width:'20px'}, 500).
    fadeOut(1800);

This implementation allows a user of JQuery to ‘chain’ together animations provided by JQuery. Very powerful! Other libraries such as ExtJS make similar use of the pattern.

To implement the chaining pattern each method must return the instance of the object being called. In other words they return the ‘this’ variable. In JavaScript ‘this’ always refers to the “owner” of the function we’re executing. Thus, this enables the next chained method to execute. A theoretical example of the above JQuery example follows:

var $ = function(selector) { 
    
    this.fadeOut = function(duration) {
        console.log('fadeOut');
        return this;
    }
    
    this.fadeIn = function(duration) {
        console.log('fadeIn');
        return this;
    }
    
    this.slideUp = function(duration) {
        console.log('slideUp');
        return this;
    }
    
    this.slideDown = function(duration) {
        console.log('slideDown');
        return this;
    }
    
    this.animate = function(style, duration) {
        console.log('animate');
        return this;
    }
    
    return this;
}

$('div').fadeOut(1800).
    fadeIn(1800).
    slideUp(800).
    slideDown(800).
    animate({height:'20px'}, 500).

This example simply prints the name of each invoked method to the console; however, it illustrates the pattern quite well.

With anything in life the pattern has advantages and disadvantages. The beauty of the pattern is that it makes the chained method read like a book: almost self documenting syntax! It is also concise and there is less to type for us busy developers. Another advantage of the pattern is that it forces us to split down our methods into smaller reusable chunks.

The disadvantages are it is harder to debug. If any of the methods within the chain fails you will only be informed that the line of code that failed is the one invoking the chain. Meaning the true error is hidden within the chained methods.

3 Step CSS Animation Tutorial

CSS3 includes the ability to animate elements using nothing more that pure CSS – no JavaScript or Flash required.  An animation is defined as the transition of an element moving from one state to another.  For example a simple square can be move from one position to another using CSS e.g.

CSS Animation illustration Continue reading “3 Step CSS Animation Tutorial”