JS 原生 锅打灰太狼小游戏

 1.先来看页面首页效果图

 整个首页由一个大的div包裹，背景图也是在外层div设置的，然后就一个开始游戏的按钮，还有进度条图片，也包括进度条结束后出现的蒙版页面

 

2.点击开始页面，动画开始加载，会随机出现小灰灰和灰太狼

 

 

 

 3.敲打灰太狼加分，小灰灰减分

   

 

4.进度条走完，游戏结束，出现结束页面

 

5.点击重新开始按钮即可再玩一次游戏

 

6.来看一下html结构和css样式

 <div class="container">
    <h1 class="score">0</h1>
    <div class="progress"></div>
    <div class="start">开始游戏</div>
    <div class="game_over">
      <p>游戏结束</p>
      <button class="restart">重新开始</button>
    </div>
  </div>

 

<style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 320px;
      height: 480px;
      background: url(./img/game_bg.jpg) 0 0 no-repeat;
      position: relative;
      margin: 50px auto;
    }

    .container>.score {
      color: white;
      margin-left: 60px;
    }

    .container>.progress {
      width: 180px;
      height: 30px;
      position: absolute;
      top: 66px;
      left: 63px;
      background: url(./img/progress.png) 0 0 no-repeat;
    }

    .container>.start {
      position: absolute;
      top: 300px;
      left: 50%;
      margin-left: -50px;
      width: 100px;
      height: 40px;
      border-radius: 40px;
      color: white;
      background-color: #d41f12;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }

    .container>.game_over {
      width: 320px;
      height: 480px;
      background-color: rgba(0, 0, 0, 0.8);
      position: absolute;
      top: 0;
      text-align: center;
      display: none;
    }

    .game_over>p {
      color: red;
      font-size: 30px;
      margin: 200px 0 50px;
    }

    .game_over>button {
      width: 100px;
      height: 40px;
      border-radius: 40px;
      color: white;
      background-color: #d41f12;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      border: none;
    }
  </style>

7.JS代码

<script>
    var start = document.querySelector('.start');
    var container = document.querySelector('.container');
    var progress = document.querySelector('.progress');
    var restart = document.querySelector('.restart');
    var game_over = document.querySelector('.game_over');
    var score = document.querySelector('.score');

    var scores = 0;

    var timer;

    var timers;

    //监听 开始游戏 的事件
    start.addEventListener('click', function () {
      //alert('2222')
      start.style.display = 'none';

      //点击开始游戏后 进度条 会逐渐消失
      pro()

      //循环出现灰太狼
      htlAnimation()
    });

    //监听 重新开始 按钮的事件
    restart.addEventListener('click', function () {
      scores = 0;
      score.innerHTML = 0;
      game_over.style.display = 'none'
      pro()
      htlAnimation()
    });

    //灰太狼动画函数
    function htlAnimation() {


      // 创建一个随机位置 数组
      var arrPos = [
        { left: "15px", top: "160px" },
        { left: "95px", top: "115px" },
        { left: "185px", top: "140px" },
        { left: "15px", top: "220px" },
        { left: "100px", top: "192px" },
        { left: "195px", top: "210px" },
        { left: "205px", top: "295px" },
        { left: "26px", top: "294px" },
        { left: "118px", top: "274px" },
      ];

      //创建一个 随机生成 灰太狼 和 小灰灰 的数组
      var arrHX = ["h", "x"];

      //创建一个随机数 0-8
      var ranNum = Math.floor(Math.random() * 9);

      //创建一个随机数 0-1
      var ranNum1 = Math.floor(Math.random() * 2);


      //创建一个图片对象
      var img = new Image();
      img.setAttribute('class', 'imgs');

      //图片定位
      img.style.position = 'absolute';
      img.style.top = arrPos[ranNum].top
      img.style.left = arrPos[ranNum].left
      window.num1 = 0;
      var num2 = 5;
      window.num3 = 5;
      // 开启定时器 依次播放每张图片
      timer = setInterval(function () {
        if (num1 <= num3) {
          img.src = `./img/${arrHX[ranNum1]}${num1}.png`;
          num1++;
        } else if (num2 >= 0 && num1 <= 9) {
          img.src = `./img/${arrHX[ranNum1]}${num2}.png`;
          num2--;
        } else if (num2 < 0 || num1 > 9) {
          img.remove()
          clearInterval(timer)
          htlAnimation()
        }
      }, 200)

      //追加图片到父级
      container.appendChild(img)

      //调用一个点击图片加分的函数
      scoreAdd(img)

    }

    //创建一个进度条消失函数
    function pro() {

      progress.style.width = "180px"
      //console.log(progress)
      var timer1 = setInterval(function () {

        var jdt = progress.offsetWidth
        jdt -= 6
        progress.style.width = jdt + 'px'
        if (jdt <= 0) {
          game_over.style.display = 'block'
          // 进度条走完 清除定时器
          clearInterval(timer1)
          clearInterval(timer)

          //进度条走完  获取 img 然后 删除
          var imgs = document.querySelectorAll('.imgs');
          imgs[0].remove()
        }

      }, 500)
    }

    //创建一个 点击图片加分的函数
    function scoreAdd(img) {
      var imgArr = document.querySelectorAll('img')
      // console.log(imgArr.src)
      var clicks = true;
      for (var i = 0; i < imgArr.length; i++) {
        imgArr[i].onclick = function () {

          if (clicks) {
            //点击图片后 改变全局变量 num1 和 num3  使htlAnimation() 里面的 if 判断条件变为 6 < 9
            window.num1 = 6
            window.num3 = 9

            // console.log(imgArr[0].src)

            //获取 创建好的 所有 img的 src 属性值 
            var imgSrc = imgArr[0].attributes.src.value // ./img/x2.png

            // 用indexOf 来检查 imgSrc 里面 是否包含 字符串 "h" 有则 返回0 true
            var bol = imgSrc.indexOf("h") >= 0;

            if (bol) {
              scores += 10;
              score.innerHTML = scores

            } else {
              scores -= 10;
              score.innerHTML = scores

            }
          }

          clicks = false
          //console.log(bol)
        }
      }
    }
  </script>

我是使用了三个方法，来控制 灰太狼和小灰灰 动画的完成、进度条的消失、还有点击图片加分减分功能，然后通过事件监听来执行这三个方法

 

 8.结束语

 上面就是大概效果了，如果有哪里写的不好的，希望各位大佬能指点一二，期望收到你们的留言

感谢！！！！