Implementing Mockworth Clock Game with HTML, CSS and Javascript

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

Technology

In Mockworth clock game, black circular dial is designed with the help of HTML and CSS, 24 “+” signs are designed using images and it is placed in circle with css property transform: rotate(x deg) translate(x px) rotate(-x deg) where x and y is 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() {

$(#id_name]).animate(

{opacity: 1},{

duration: 400,complete: function ()

{

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

}

}

);

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

When red dot skips, participant need to press space-bar and hit counts. These is achieved by using keypress() function and result is displayed in score board.

For example:

For counting space-bar pressed.

$(document).keypress(function(event){

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

if(keycode == '32' ){

SCORE = SCORE + 1 ;

}

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

});

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

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 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 postion red dot skip anomaly .
• Total number skip is random in complete one loop.
• The subject identifies this event by hitting the space bar (or other user-definable key).
• The entire game lasts up to a pre-defined number of loop.
• After the game over result is diplayed on Score Board in percentage.

This game is developed by Cryptex Technologies ROR developers in India.