A reflex game is a simple fun game that measures your responding speed. It is quite simple to make and understand. We will be designing a reflex game that will calculate your responding speed. The rules are simple just press the stop button when you see the change in background color, and the time you took in doing so will be your speed.
The game provides you a variety of colors to chose from. A faster response will show a better quote of praising than a slower one.
So let us start with the basic HTML Layout.
The HTML Layout:
The HTML layout defines how your page will be looking. This part completely depends on your creativity. Just keep in mind to create a blank white background, so that the change is visible.
Other elements required are:
- A header containing the name of the game and some other information.
- A form element which could include the select from below option. This is required so that the user can choose from a number of options the particular color it wants.
- Two buttons : One for starting the game and the other for pressing the stop button.
This is the most basic HTML Layout. You may add OR remove any other portions into it.
The CSS Styling:
You may add your own custom CSS wherever possible. Here I’ll be just adding some basic CSS to the buttons.
Main Logic of the game:
We’ll be making 5 basic functions for the working of this game:
Starting the game. The start button will be required for this function. This function will be executed once the user presses the Start button.
The next function will be the remark() function. This function will include the remarks that the game will show on completion of the game.
The next stopTest() function will be executed on pressing the stop button. There can be 3 options that can be executed on pressing the stop button:
First, successful completetion, telling the response time.
Second, if user presses stop button before pressing the start button.
Third, if user presses the stop button before changing of the color.
Step 4 :
The fourth function is to get a random response time for changing of the background.
The final function is to ensure that start button is not pressed twice.
Final Demonstration and complete code :