Simple HTML CSS and JavaScript Game

Last Updated : 31 Jul, 2024

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(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
                );
            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:

You can see the output of the project below:

Design Hit the Mouse Game using HTML, CSS and Vanilla Javascript

ashwin13602

Improve

Article Tags :

Simple HTML CSS and JavaScript Game

Why the game is simple?

How to play the game?

Similar Reads