Tap-the-Geek is a simple game, in which the player has to tap the moving GeeksForGeeks logo as many times as possible to increase their score. It has three levels easy, medium, and hard. The speed of the circle will be increased from level easy to hard. I bet, it is very difficult for the players to get a single score in the Hard level.
Why the game is simple?
How to play the game?
One must simply tap the moving logo as much as one can. If you are using a laptop, it is best to use a mouse instead of the laptop’s touchpad to get a good experience. Try the different difficulties by changing the levels, refresh the page before switching between levels.
- Divide the webpage into two sections, one is for the playing area and the other for the level selection and to display the score.
- Create the logo as a div element and set a reasonable height and width for the div which makes the player comfortable to tap.
- Set animation to move the logo to random directions using @keyframes. We will specify the left and top properties so that the logo moves to that location as the animation progresses.
- The animation part is over, let’s add functionality to count the number of times the logo has clicked.
- Finally, we can display the count as a score on the Score side. That’s it, our game is ready!