Reaction Time Game

This is a simple game that measures how fast your reactions and reflexes are.

Game Idea

• The game starts when the player clicks the Start Game button.
• After that, the game shows a green box to the player after a random amount of time.
• The player has to click on the box as fast as possible in order to achieve a high score.

Technologies Used

I've used:

• Tailwind CSS for styling.
  
• Vite for asset bundling.
  
• Vue 3 Composition API for the game logic and UI reactivity.

Game's Logic

Reactive States

1. The clicked property is used to check if the game is in progress or not, to prevent the user from spamming the start new game button, and also to prevent the user from starting a new game while a game is already running.

2. The initClick property is used to check if the game is the first game or not and to show the custom message to start the game or start a new game.

3. The toggle property is used to show and hide the green box.

4. The score property is used to record the time the player took to click the box.

5. The evaluation property is a calculated reactive property that's dependent on the score and calculated by the evaluateScore() helper function.

   • The evaluateScore() function accepts the score and returns a string that's based on the time elapsed.

How It Works

• Based on whether it's the first game or not, we show a custom message to start the game or start a new game.

• In order for our green box to show, we need a switch to toggle the show and hide states of the box.

  • In our case, it's the toggle property, a boolean that's false by default, therefore the box is hidden.

• When the player starts the game, the ButtonClick() function is invoked.

  • Inside this function, we set the clicked property to true and after a random amount of time generated by the getRandomInt() helper function, we set the toggle property to true therefore, the box shows up.

  • At the same time, we start a timer by recording the exact moment that the box showed using the Date() class with the getTime() method.

• After the player clicks the box, we record the time he clicked in and calculate the elapsed time using this equation: [ t_{\text{final}} = t_{\text{end}} - t_{\text{start}}]

• After calculating the score we send it as a prop to the ScoreBoard component to show the score on the screen.

  • We don't show the score and evaluation unless the player has a score that's greater than zero score > 0.

• In addition to showing the score, we evaluate the player's score based on a custom ranking system.

• Then we set the clicked property back to false and the toggle property to false to hide the box.

• This cycle repeats for each new game.

Project Setup

1. Installing frontend assets

npm install

2. Running the application

npm run dev

3. Open the game in the browser from Here or run it locally from Here