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”→
Tip #2 in this series touches on the topic of security. With the latest heartbleed vulnerability within OpenSSL hitting the headlines security it currently at the forefront. I think it is fair to say that security is not a priority for most web developers: for some it is not even on the radar. The problem is, that it is way, way too easy, to roll-out a site for a new project, get paid and move on. But, what happens to the site a week, month or a year down the line? Worse case scenario is the site gets hacked. Why? Because, it is not being kept up-to-date with the latest security patches and your web developer has moved on.
The simple solution is to keep you platform up-to-date. Whether it Magento, Symfony, WordPress or Joomla. It needs to be kept current. If you were offered a way to improve the security of your house would you take it? Of course you would. The same should apply to your website. Security vulnerabilities are discovered all the time. We should give the framework vendors credit here. They issue security patches with a high level of speed and efficiency. The problem you face is getting that security patch installed on your website. I’d suggest striking a deal with your web designer/agency so they are responsible. Of course they would expected some recompense for this, but, it shouldn’t be a lot. Any web designer/agency who will not agree to this are obviously not a good choice to begin with. Security first!
Web development is a hard playing field to operate in. The competition is great and keeping ahead of your competitors is difficult. Assuming potential customers rate your work and compare your goods against the competition means there is no place for complacency. This tip will help ensure level’s of quality are high and more importantly transparent and measurable to your audience!
2013 Responsive Design really exploded. It seems to have past the test of time and is here to say. Yes, it causes web developers a little more of a headache than a non-responsive site; however, the advantages it brings are well worth reaping. With the ever increasing number of mobile devices it is hard to ignore responsive design. Continue reading “Responsive Design does not equal Mobile Optimised”→
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: