jpowcode

Years ago I remember seeing a presentation in which a small game was displayed. The game involved flashing a pattern of dots on the screen for a brief instance, a fraction of a second, or a glimpse. The aim was to describe exactly the pattern you had just seen. For example a 5x7 array of dots might be displayed, but surprisingly is it remarkable difficult to know whether you saw 5x6, 5x7 or 5x8. This has something to do with the brains ability to see how many of something it is seeing without having to count. When you look at three items you know there are three without having to count 'one', 'two', 'three', but when there are seven items it's not so easy. Play the game below to see what I mean.

The game has been created with a little help from the html canvas object. First within the body section of the html we create a navigation bar with some buttons each button will call a function defined within the javascript file. The GlimpseLevel and DrawLevel functions take as input the data required for each level in the form of coordinates. Then we set up the canvas object allowing us to draw to the screen and a current_level variable to keep track of which level number we are currently on.

Each level is defined as a set of coordinates in the form [x, y, r,] representing the x and y coordinates relative to the center of the canvas and r, the radius of each circle.

The main functionality of the game is controlled by some javascript. First define an array to hold the information for all the levels. Then define some functions as follows:

• clearLevel - simply resets the canvas to be empty
• Next - increments the current_level variable by one
• Previous - decrements the current_level variable by one
• DrawCircle - takes a coordinate pair as input and draws a circle to the canvas relative to the center.
• DrawLevel - calls DrawCircle for all the coordinates in the current level .
• GlimpseLevel - calls DrawLevel, but after a fixed time period clears the canvas.

And lastly we have a little bit of style, mainly to position everything neatly.