Open In App

Tap-the-Geek | Simple HTML CSS and JavaScript Game

Last Updated : 22 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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?

The game is simple because, it is made up of  HTML, CSS, and Javascript only with very less lines of code. It uses simple CSS animation property to make the logo move and HTML DOM to do some actions like counting the number of taps made by the player to calculate the score and display it.

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.

Implementation:

  • 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!

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        body {
            margin: 0px;
            background: #000;
        }
  
        .crcl {
            width: 80px;
            height: 80px;
            border-radius: 100%;
            position: relative;
            background-image: url(
                );
            background-size: cover;
            animation: movement;
        }
  
        /* To set the positions for the logo
        for the whole animation */
        @keyframes movement {
            0% {
                left: 0px;
                top: 0px
            }
  
            5% {
                left: 300px;
                top: 200px
            }
  
            10% {
                left: 600px;
                top: 100px
            }
  
            15% {
                left: 600px;
                top: 600px
            }
  
            20% {
                left: 300px;
                top: 600px
            }
  
            25% {
                left: 600px;
                top: 400px
            }
  
            30% {
                left: 100px;
                top: 0px
            }
  
            35% {
                left: 600px;
                top: 200px
            }
  
            40% {
                left: 100px;
                top: 500px
            }
  
            45% {
                left: 0px;
                top: 600px
            }
  
            50% {
                left: 600px;
                top: 600px
            }
  
            55% {
                left: 300px;
                top: 200px
            }
  
            60% {
                left: 600px;
                top: 100px
            }
  
            65% {
                left: 800px;
                top: 600px
            }
  
            70% {
                left: 300px;
                top: 600px
            }
  
            75% {
                left: 600px;
                top: 400px
            }
  
            80% {
                left: 100px;
                top: 0px
            }
  
            85% {
                left: 600px;
                top: 200px
            }
  
            90% {
                left: 100px;
                top: 500px
            }
  
            95% {
                left: 0px;
                top: 600px
            }
  
            100% {
                left: 600px;
                top: 200px;
            }
        }
  
        .details {
            float: right;
            width: 400px;
            height: 100vh;
            position: relative;
            background-color: rgb(6, 148, 25);
            color: white;
            display: block;
            text-align: center;
        }
  
        .ground {
            float: left;
        }
  
        .level {
            display: flex;
            margin: 10px;
            margin-top: 25px;
        }
  
        .display_score {
            margin-top: 25px;
        }
  
        button {
            border-radius: 25px;
            width: 8em;
            height: 3em;
            font-size: 20px;
            border: 2px solid white;
            background: transparent;
            color: white;
            margin: 10px;
            cursor: pointer;
        }
  
        button:hover {
            background-color: white;
            color: rgb(6, 148, 25);
            box-shadow: 0px 10px 20px 10px white;
            transition-duration: 1s;
        }
    </style>
</head>
  
<body>
    <div class="ground">
        <div id="circle" onclick="count()"></div>
    </div>
    <div class="details">
        <h1>Tap The Geek</h1>
        <h3>Click on a difficulty to start the game</h3>
        <div class="level">
            <button onclick="easy()">EASY</button>
            <button onclick="medium()">MEDIUM</button>
            <button onclick="hard()">HARD</button>
        </div>
        <div class="display_score">
            <h2>Score</h2>
            <h2 id="score">0</h2>
        </div>
        <button onclick="restart()">RESTART</button>
    </div>
  
    <script>
  
        // Setting the level to Easy by having the
        // duration of the whole animation to the maximum 
        function easy() {
            document.getElementById('circle')
                .style.animationDuration = '20s';
            document.getElementById('circle')
                .className = 'crcl';
        }
  
        // Setting the level to Medium by having the
        // duration of the whole animation to the maximum 
        function medium() {
            document.getElementById('circle')
                .style.animationDuration = '15s';
            document.getElementById('circle')
                .className = 'crcl';
        }
  
        // Setting the level to Hard by having the
        // duration of the whole animation to the maximum
        function hard() {
            document.getElementById('circle')
                .style.animationDuration = '12s';
            document.getElementById('circle')
                .className = 'crcl';
        }
  
        let cnt = 0;
  
        // Function to count the number of taps
        // and display the score
        function count() {
            cnt = parseInt(1) + parseInt(cnt);
            var scr = document.getElementById('score');
            scr.innerHTML = cnt;
        }
  
        // Restart the game by refreshing the page
        function restart() {
            window.location.reload();
        }
    </script>
</body>
    
</html>


Output:



Previous Article
Next Article

Similar Reads

Underscore.js _.tap() Function
Underscore.js is a JavaScript library that provides a lot of useful functions that help in the programming in a big way like the map, filter, invoke, etc even without using any built-in objects. The _.tap() function is an inbuilt function in Underscore.js library of JavaScript which is used to call interceptor with the stated object. Moreover, the
2 min read
jQuery Mobile tap Event
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. The tap event in jQuery Mobile is fired when an element area receives a quick and full touch event. We can use this event for different purposes. Syntax: jQuery(".selector").on("tap", function( event ) { }) Approac
1 min read
Collect.js tap() Function
Collect.js is a fluent and convenient wrapper for working with arrays and objects. The tap() function accepts the collection as a parameter and without affecting the collection it allows the user to tap into the collection at a specific point and do anything with the item. Installation: Install the Collect.js module using the following command: npm
1 min read
jQWidgets jqxTouch tap Event
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxTouch is used for identifying and triggering touch events such as 'swipe', 'swipe left', 'swipe right', 'tap', and 'orientationchange' on touch-enabled device
2 min read
React Suite DateRangePicker One tap
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. React Suite DateRangePicker component provides the user an interface to select a date range. React Suite DateRangePicker Component’s oneTap prop takes a boolean value. It denotes whether to click once on the sel
3 min read
React Suite DatePicker Usage One tap
React Suite is an open-source front-end library built on top of the React framework that consists of many React components that make it easy for developers to build great user interfaces. In this article, we will be seeing React Suite DatePicker Usage One tap. The DatePicker Component is used to take the input of date and time from the users. When
3 min read
Lodash _.tap() Method
Lodash _.tap() method of Sequence in lodash is used to call interceptor. Moreover, the main task of the method is to "tap into" a method chain sequence so that the intermediate results can be modified. Syntax:_.tap(value, interceptor);Parameters: value: It is the value to be given to the interceptor.interceptor: It is the function to be called.Retu
2 min read
Simple Tic-Tac-Toe Game using JavaScript
In this article, we will create a Tic-Tac-Toe Game using JavaScript. We will be using validation checks to implement the game features. The UI is designed using CSS so it is easy to create. In the game, Player-1 starts playing the game and both players make their moves in consecutive turns. The player who makes a straight 3-block chain wins the gam
11 min read
Create a Simple Interest Calculator using HTML CSS and JavaScript
Simple Interest is the term used to describe the rate at which money is borrowed or lent. Simple Interest Calculator serves as a practical tool for computing interest on loans or savings without compounding. It allows you to determine the simple interest on the principal amount, offering flexibility in calculating daily, monthly, or yearly interest
3 min read
Design a simple counter using HTML CSS and JavaScript
A simple counter is a numeric display that increments or decrements based on user interaction. To design one using HTML, CSS, and JavaScript, create a display area and buttons. Use JavaScript to increment or decrement the counter value and update the display accordingly. Here is the Sample Image of the counter that we are going to make: [caption wi
4 min read