HTML和JS写的简单游戏——打地鼠

不爱学习的小鹏同学

已于 2023-06-06 13:14:33 修改

阅读量1.2k

点赞数 1

分类专栏：小游戏文章标签： javascript html 游戏

于 2023-06-06 13:11:47 首次发布

本文链接：https://blog.csdn.net/fjjshj231/article/details/131065515

版权

本文介绍了一个利用HTML、CSS和JavaScript编写的打地鼠小游戏。游戏规则包括：地鼠随机出现并1秒后消失，玩家需在地鼠消失前点击得分，游戏时间30秒，结束后显示总得分。

摘要由CSDN通过智能技术生成

css代码

        
    #game-board {
      width: 600px;
      height: 400px;
      border: 1px solid gray;
      position: relative;
    }
    #mole {
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: brown;
      display: none;
    }

js代码

<script>
    var mole = document.getElementById('mole');
    var gameBoard = document.getElementById('game-board');
    var scoreBoard = document.getElementById('score');
    var timerBoard = document.getElementById('timer');
    var score = 0;
    var time = 30;

    // 随机生成地鼠的位置
    function generateMolePosition() {
      var x = Math.random() * (gameBoard.offsetWidth - mole.offsetWidth);
      var y = Math.random() * (gameBoard.offsetHeight - mole.offsetHeight);
      return { x: x, y: y };
    }

    // 出现地鼠
    funct