Simple Reaction Game using Javascript

NERD ALERT! This is a javascript challenge I completed some time ago. It took me several hours. Because I am a newbie coder, I found some of the logic confusing. So I thought others – like yourself–might benefit from my experience. I have tried to tease out the logic.

Step by Step Javascript Tutorial

Description of the reaction game

In this reaction game the user is asked to click on a randomly appearing shape as quickly as they can. Their response time will be recorded. The shape is either a square or a circle, has a random size between 30px and 200px in width, can appear anywhere on a 550px wide screen and has a random colour.

Pulling the javascript task apart

Mark up and style the page

First you will construct a simple HTML document with a heading and instruction text (see the screen shot above). The shape is styled using a div element, by giving the div an id of “box”. Then the paragraph element will be used to insert the response time. This has an id of “printReactionTime”

.

Use the outside container element to keep the game on the centre of the screen and limit the screen size.

Now give the inside box (div element) some styling. This is the default styling for the shape. The size (width and height), colour, position (relative to where it is now), and shape (square or circle) will be changed using javascript.

Design the javascript functions that will change the shape

Random colour

You can use a hex code to specify web colour using hexadecimal values. The code consists of three hex code pairs to specify the intensity of red, green and blue. The syntax is #xx xx xx. You can read more about colour codes on the Color codes page.

The getRandomColor function places all the possible hexadecimal values into an array using the .split() method. Then an iterative for loop is used to append a randomly selected array value to a varibale called “color”. The new color will be returned when the function is called later in the javascript program.

Random size and position

For this task you can use the Math.random() method.

The randomSize variable has a minimum value of 30px and a maximum value or 200px. The randomPosn variable has a maximum size of 550 px. Of course you can change this!

Be aware that you will only want to call the getRandomSize function once to style the shape width and height. You don’t want a shape with different sizes for width and height. So call the getRandomSize function as a variable later in the program.

Change the shape to a square or circle

The first thing you need to know is that the CSS property of border radius with a value of 50% will change a rectangular shape into a rounded shape. So we will need to change the CSS styling for #box. In javascript you can’t use hyphens or colons, so the css property becomes borderRadius (see later in the program)

Again the Math.random() method is used so that a circle is produced on half the occasions, in a randomised fashion.

Put the randomised box shape together

Now that you have put together a series of functions to style the box shape it is time to call the functions from inside another function–called restyleBox. If you call this function by adding restyleBox(); to your code at this (incomplete) stage, you will see the shape appear with all the randomised properties–but you will need to refresh your browser window to see the shape reappear.

Note that I have added the variable randomSize to call the getRandomSize() function. This same random number can be added to the width and height properties for the box– so you get a square or a circle(rather than an ellipse or rectangle).

Start the Reaction Game

Add an onclick event

So now you have a shape that will jump around when you refresh the browser. But you need to make this happen whenever the shape is clicked.

You can attach an onclick event to the div #box element in your HTML, then call up the function called startGame() in your javascript.

What needs to happen

When you run this reaction game you need to

1. Record the time when the page loads in the browser (initial time, startTime)
2. The shape will disappear then reappear after a random interval. A new time is recorded (startTime)
3. The user clicks on the shape and the time is recorded again(endTime). The total time is calculated endTime – startTime and the result is printed on the page (in seconds)
4. The shape disappears for random interval
5. Step 2 repeats…

Make the shape disappear and reappear

To make the shape disappear then reappear the CSS property display:none and display:block are used.

box.style.display =”block”;//make the shape reappear

box.style.display =”none”;

After the shape is clicked the display:none property is added to the #box element. Then when the restyleBox function is called the display:block property is added.

Record the reaction times

You can store the times in variables called startTime and endTime using the newDate().getTime() method. This records the time in millseconds. So when you take take the start time away from the end time you need to divide by 1000 to get an answer in seconds.

Add startTime and display:block to the restylBox function. Also add the startTime variable outside the function at the very top of your javascript to capture the time when the page loads.

Generate a random time deelay

You can use the setTimeout(function,time) method – where the function will be restyleBox and the time will be a random number of milliseconds – and the Math.random() methods to generate the delay. Note that you don’t need to use the parentheses with the function name i.e. don’t use restyleBox() in the setTimeout method.

Call the appearAfterDelay() function. It can be added after the restyleBox() function. So what will happen now is a new shape appearing after the page first loads in the browser, and the time of its appearance will be recorded.

The reaction game starts with a click

Everything is now in place to start the game!

You can download the HTML and Javascript documents as PDF files here.

---