Windows 10 Progress widget with the HTML5 Canvas

I recently decided to take the plunged and updated from Windows 8 to Windows 10.  Wow! it seemed to take what felt like hours.  I was granted the privilege to see Microsoft’s new please wait progress tracker for quite sometime.  If you have not seen it; progress is measured through movement by using the perimeter of a circle.  As the progress moves from from zero, through to one-hundred percent the perimeter of the circle is filled, forming a simple and clean user interface.  This is the progress widget used during the upgrade:

Windows 10 Progress Widget

The mission of the posts is to explain how to replicate the above using HTML5’s canvas.

Continue reading “Windows 10 Progress widget with the HTML5 Canvas”

How to draw a Dartboard using HTML’s Canvas

This post will cover the steps required to draw a traditional Dartboard using HTML5’s canvas.  The final product produces the following rendered board.

Dartboard
Dartboard drawn using HTML5’s canvas

To tackle this task one’s thought process was to picture how one would draw a dartboard using layers.  In theory you would start by drawing the black circle that forms the base of the board.  Followed by the alternating black and while pie sections.  The double and treble arcs would then be placed accordingly, followed by the outer-bull and bulls-eye circles.  And finally, the wire-works between the pie sections and lettering on the outer ring.

Continue reading “How to draw a Dartboard using HTML’s Canvas”

Canvas Drag and Drop with Collision Detection

In this post I’ll cover the basics of implementing drag and drop with collision detection using the Canvas element and JavaScript. The end result will produce the following:

Drag and Drag shapes on the canvas

Each item on the canvas is represented by a rectangle.  When clicking inside the bounds of an rectangle the inner circle’s colour changes to grey to indicate the item is selected.  Release the button results in a mouse up event .  Between the mouse down and up events the item can be dragged and thus moved around the canvas.  When two objects collide they will be coloured red. This functionality has been implemented as follows. Continue reading “Canvas Drag and Drop with Collision Detection”

Automate screenshots with Node and Grunt

nodeThe official site claims ‘Node is built on Chrome’s JavaScript runtime it can be used for building fast, scalable network applications’.  Drilling into that verbiage; it is quite obvious what fast means.  Scalable is also semi-obvious; but, only within context.  Scalable in this context means an application – for example a website similar to twitter – can easily be modified to cater for increasing demand: such as the number of users accessing a site increasing.  Without understanding the technology behind sites such as twitter we can all imagine the amount of people tweeting at any one time – a lot.  How does the technology behind twitter handle this amount of activity: in short the answer is, by being scalable.  The final part of Node’s official statement refers to the ‘network application’.  This simply means the components that provide technology behind any given website and/or mobile app.   Continue reading “Automate screenshots with Node and Grunt”

A simple HTML5 Game tutorial – Part 4

A simple game create using HTML's canvas and JavaScript Screenshot of HTML5 game[/captifon]

In the previous parts  (1, 2 and 3) we’ve developed a basic game which allows a player to move a target around the screen and shot some bad guys. In this post we’ll add labels to show the shots fired, hits and accuracy ratio.  This will give the player a reason for playing e.g. improve your statistics by shooting all of the bad guys with the minimum amount of shots.  With this in place we can start to think about adding levels and keeping a high-score table.
Continue reading “A simple HTML5 Game tutorial – Part 4”

Great Little Computer!

A simple HTML5 Game tutorial – Part 3

Following on from Part 2 we have put in place the foundation of our game and have some ‘bad guys’ moving in a menacing manner.  We are close to having a game: if we could just shot the ‘bad guys’.  Reminding ourselves of the goals set out in Part 1 we need to achieve the following: Continue reading “A simple HTML5 Game tutorial – Part 3”

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”

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!