JavaScript analog clock with no images and no CSS

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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers