js实现简单打地鼠小游戏

C.&&

已于 2022-12-31 15:37:51 修改

阅读量8.5k

点赞数 3

文章标签： javascript 前端 vscode dom操作

于 2021-12-11 15:33:40 首次发布

本文链接：https://blog.csdn.net/m0_55603459/article/details/121873724

版权

一、简要

小地鼠随机出现在固定大区域，以每次固定时间间隔、不同的个数出现。玩家点中地鼠会记录砸中地鼠的次数，同时地鼠的状态会发生变化，游戏设置倒计时，倒计时结束游戏结束，弹出玩家砸中次数。

二、思路：

1.大盒子里面每隔一段时间就在不同的位置的出现小格子，取随机数来实现不同的出现位置

2.大盒子里面每隔一段时间就出现不同的数量的小格子，取随机数来每次定义出现的数量

3.记录的砸中次数和变化效果使用dom点击事件

三、程序实现效果：

1.游戏开始

2.砸中地鼠，记录加分，地鼠状态变化

3.游戏结束

四、具体代码

1.js代码

<script>
  // 实现效果
  // 大盒子里面每隔一段时间就在不同的位置出现不同数量小格子
  var a = document.querySelector('.rect');
  var c = 0;
  var d = document.querySelector('.text');
  var ul = document.querySelector('ul');
  var time = 9;
  var djs = document.querySelector('.text1')

  setInterval(fun,1000);

  function fun() {
    if (time == -1) { 
      clearInterval(fun);
      alert('你的总分是：' + c + '分！');
      time = 9
      c = 0
      d.innerHTML = "砸中了" + 0 + "次";
    } else {
      djs.innerHTML = '还有' + time + '秒后结束';
      time--;
    };
  }

  function init() {
    var num = Math.floor(Math.random() * 5 + 1);//每次出现的随机数量1-5
    for (var j = 0; j < num; j++) {
      ul.innerHTML += "<li></li>";
    }
    // 1.获取所有的li元素
    ul1 = document.querySelector('ul'); //重新获取父级ul
    var li = document.querySelectorAll('li');

    // 2.利用for循环遍历小格子
    for (var i = 0; i < li.length; i++) {
      var a = Math.floor(Math.random() * 7 + 1) * 50;
      var b = Math.floor(Math.random() * 7 + 1) * 50;
      li[i].id = i;
      li[i].style.marginLeft = a + "px";
      li[i].style.marginTop = b + "px";
      li[i].style.backgroundColor = 'orange';
      li[i].innerHTML = '地鼠';
      li[i].onclick = function () {//点击事件记录砸中地鼠
        c += 1;
        this.style.backgroundColor = 'red';//变化颜色
        this.innerHTML = '砸中了';
        d.innerHTML = "砸中了" + c + "次";
      }
    }
  }

  setInterval(() => {//注意不能用K++来删除元素，因为ul.children.length 是动态变化的
    for (let k = ul.children.length - 1; k >= 0; k--) {
      ul.removeChild(ul.children[k]); //删除元素
    }

    init();
  }, 800);

  init();
</script>

2.head的CSS代码与body代码

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      box-sizing: border-box;
    }

    #rect {
      width: 400px;
      height: 400px;
      margin: 50px auto;
      background: wheat;

    }

    ul {
      width: 400px;
      height: 400px;
      overflow: hidden;
    }

    li {
      position: absolute;
      width: 50px;
      height: 50px;
      float: left;
      font-size: 10px;
      line-height: 50px;
      text-align: center;
    }

    .text {
      font-size: 20px;
      margin-left: 45%;
    }
    .text1{
      color: red;
      font-size: 25px;
      margin-left: 43%;
    }
  </style>
</head>

<body>
  <div id="rect">
    <ul>
    </ul>
  </div>
  <div class="text1">还有10秒后结束</div>
  <span class="text">砸中了0次</span>
</body>