点击极客 |简单的 HTML CSS 和 JavaScript 游戏

Tap-the-Geek是一款简单的游戏，玩家必须点击移动的 GeeksForGeeks logo 尽可能多地增加他们的分数。它分为简单、中等和困难三个级别。圆圈的速度将从易到难增加。我敢打赌，玩家很难在Hard级别获得一个分数。

为什么游戏很简单？

游戏很简单，因为它由HTML、CSS 、 和仅Javascript 代码行数非常少。它使用简单的CSS 动画 使徽标移动和HTML DOM的属性 做一些动作，比如计算玩家点击的次数来计算分数并显示它。

如何玩游戏？

一个人必须尽可能多地点击移动的标志。如果您使用的是笔记本电脑，最好使用鼠标而不是笔记本电脑的触摸板，以获得良好的体验。通过更改级别尝试不同的难度，在级别之间切换之前刷新页面。

执行：

• 将网页分为两个部分，一个是游戏区域，一个是关卡选择和显示分数。
• 将徽标创建为div元素，并为 div 设置合理的高度和宽度，让玩家可以舒适地点击。
• 使用@keyframes设置动画以将徽标移动到随机方向。我们将指定left和top属性，以便徽标随着动画的进行移动到该位置。
• 动画部分结束了，让我们添加功能来计算徽标的点击次数。
• 最后，我们可以在 Score 端将计数显示为分数。就是这样，我们的游戏准备好了！

例子：

HTML

  

    
        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;
        }
    

  

    
        
    
    
        Tap The Geek
        Click on a difficulty to start the game
        
            EASY
            MEDIUM
            HARD
        
        
            Score
            0
        
        RESTART
    
  
    
  
        // 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();
        }
    

    

输出：