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:
The mission of the posts is to explain how to replicate the above using HTML5’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.
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.
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”→
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”→
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.
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:
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:
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: