Implementing Mockworth Clock Game with HTML, CSS and Javascript

Implementing Mockworth Clock Game with HTML, CSS and Javascript

14 Dec 2016
Implementing Mockworth Clock Game with HTML, CSS and Javascript

The Mockworth Clock Game is a concentration game based on Mockworth Clock. The Game has a black background circular Dial with 24 "+" marks representing 24 slots like a clock and a red dot jumping over these slots. The red dots move in short jumps like the second hand of an analog clock, approximately every second. At infrequent and irregular intervals, the red dots make a double jump, e.g. 3 times in 1 complete loop. Basically, the game is to detect when the double jumps occur by pressing the space bar. Typically, Mackworth's participants would play these games for the predefined number of loops.

The Clock is an experimental device used in the field of experimental psychology to study the effects of long-term vigilance on the detection of signals. It was originally created by Norman Mackworth as an experimental simulation of long-term monitoring by radar operators in the British Air Force during World War II.



In the Mockworth clock game, the black circular dial is designed with the help of HTML and CSS, 24 “+” signs are designed using images and it is placed in a circle with CSS property transform: rotate(x deg) translate(x px) rotate(-x deg) where x and y are user-defined.


For example:

red dot pointing at 12 o'clock

.deg270 {

transform: rotate(270deg) translate(17em) rotate(-270deg);


Red dot movement is achieved with the help of javascript animate() function and opacity CSS property. And to make red dot movement in loop, we use javascript recursive setTimeout(function()) function.


For example:

To blink red dot at some interval of time.

setTimeout(function() {


{opacity: 1},{

duration: 400,complete: function ()


$(this).css({opacity: 0}); <.p>




Skipping of red dot is done by Math.round(Math.random()) function.

When the red dot skips, participants need to press the space bar and hit counts. This is achieved by using the keypress() function and the result is displayed on the scoreboard.


For example:

For counting, the space bar is pressed.


var keycode = (event.keyCode ? event.keyCode : event.which);

if(keycode == '32' ){



document.getElementById(' id_name ').innerHTML = SCORE;


At the end of the game, the final result is displayed, which is using the parseInt() and text() functions.


Game Procedures

  • A circle, with 24 equally spaced "slots" (as represented by the empty space between two "+" marks), is presented on the computer screen.
  • The Subject can put n number of loops as per interest in the input box and starts the game.
  • A red dot starts from the 12'o clock position and flashes in turn in each "slot".
  • The dot stays visible for 1 sec and so there is an interval of 1 sec between each flash.
  • At some position red dot skip anomaly.
  • The total number skip is a random incomplete one loop.
  • The subject identifies this event by hitting the space bar (or other user-definable keys).
  • The entire game lasts up to a pre-defined number of loops.
  • After the game is over the result is displayed on Score Board in percentage.



sudhakar kadam


I really love this game .....mindblowing ....keep it guys


Leave a comment: