Talking about Html and Javascript.
There are a lot JavaScript analog clocks out there, but most of them use images or CSS3 tricks to make them move.
I am showing you an analog clock made without any image and without any style thanks to Raphaël JavaScript Library.
Raphaël is a JavaScript library that let you your work with vector graphics on the web using the SVG W3C Recommendation and VML as a base for creating graphics which works on Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
This is what we are going to create:
And as you can see from the source code there isn’t any image or CSS style as the clock is fully made with vectors.
Triqui Clock
let's explore it in detail:
Line 6: loading Raphaël library
Line 10: creation of a canvas object called canvas on which we will draw the clock. The parameters are the id of the container (clock_id, you can find it at line 48), the width and the height of the object, in pixels
Line 11: drawing a circle called clock with center at 100,100 with a 95 pixels radius.
Line 12: setting some attributes for clock (the circle): fill":"#f5f5f5" will fill the circle with that color ,"stroke":"#444444" will decide the stroke color and "stroke-width":"5" is the width, in pixels, of the stroke.
Line 13: creating a variable called hour_sign that we'll use to draw the hours.
Lines 14-20: the for loop goes through all 12 hours representable in a clock, uses trigonometry to find the starting and ending point of each hour sign, then uses path method to create a path element according to the string passed as argument which represents the path in SVG format. For more information about this format, check the official SVG docs. Anyway, it's a very easy format since it follows the "move and line" theory, just like AS3.
If we look at line 21, which draws the hour hand
it can be translated into AS3 this way:
We keep drawing clock parts until line 29, using the same methods.
At line 30 we call update_clock function which will place all hands in the correct position according to your computer's time, then at line 31 we make such function being executed at every second.
update_clock just determines current hours, minutes and seconds and updates the hands using rotate method which wants as arguments the amount of degrees to rotate the object and the center of rotation.
The degrees are determined by dividing 360 by the number of possible values (60 for seconds and minutes, 12 for hours) then multiplying such value by the current hours/minutes/seconds.
Hour hand is also rotated a bit more as minutes pass by, just like in real clocks.
Just notice the perfect code for the hour hand would be
rather than
but dividing minutes by 2.5 rather than 2 will make hour hand rotate slower and will give a better visual effect.
Hope you will like Raphaël JavaScript Library, I can show you how to make a little puzzle game with it if I receive a good feedback.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.