JavaScript锅打灰太狼游戏

最新推荐文章于 2022-03-09 16:59:53 发布

ZXR__

最新推荐文章于 2022-03-09 16:59:53 发布

阅读量434

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/ZXR__/article/details/120455560

版权

利用原生js实现锅打灰太狼

下面是页面效果图

页面html代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"/>
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
  </head>

  <body>
    <div class="container">
      <!-- 积分 -->
      <div class="score">0</div>
      <!-- 进度条 -->
      <div class="bar"></div>
      <!-- 狼的容器 -->
      <div class="content"></div>
      <!-- 开始页面 -->
      <div class="start">
        <button class="gameStart">开始</button>
      </div>
      <!-- 结束页面 -->
      <div class="end">
        GAME OVER
        <button class="gameEnd">重新开始</button>
      </div>
    </div>
  </body>
  <script src="js/index.js"></script>
</html>

主要功能

实现灰太狼与小灰灰的随机出现和上下移动，以及拍打灰太狼时计分器加分，当拍打小灰灰时计分器减分，进度条结束时游戏结束

主要难点

实现图片上下移动时画面的流畅度，以及拍打灰太狼时的变化

图片上下移动js代码如下

利用两个定时器来解决图片上下时的卡顿问题，提高画面的流畅度


  setInterval(function () {
    var wolf = createWolf();
    // 狼上升的方法
    wolf.up = setInterval(function () {
      wolf.index++;
      if (wolf.index > 4) {
        clearInterval(wolf.up);
        downTimer();
      }
      wolf.setAttribute("src", `img/${wolf.type}${wolf.index}.png`);
    }, 120);
    // 狼下降的时间
    function downTimer() {
      wolf.down = setInterval(function () {
        wolf.index--;
        if (wolf.index <= 0) {
          wolfs.removeChild(wolf);
          clearInterval(wolf.down);
        }
        wolf.setAttribute("src", `img/${wolf.type}${wolf.index}.png`);
      }, 120);
    }
    wolfClick(wolf);
  }, 1200);

拍打灰太狼代码如下


function wolfClick(wolf) {
  wolf.onclick = function () {
    // 解决多次点击问题
    wolf.onclick = null;
    var sc = parseInt(score.innerHTML);

    if (wolf.type == "h") {
      score.innerHTML = sc + 10;
    }
    if (wolf.type == "x") {
      score.innerHTML = sc - 10;
    }

    wolf.index = 9;
    // 清除上升下降定时器
    clearInterval(wolf.up);
    clearInterval(wolf.down);
    wolf.clickTimer = setInterval(function () {
      wolf.index--;
      if (wolf.index <= 0) {
        wolfs.removeChild(wolf);
        clearInterval(wolf.clickTimer);
      }
      wolf.setAttribute("src", `img/${wolf.type}${wolf.index}.png`);
    }, 100);
  };
}

下面是运用的主要的两个函数方法

获取随机数的函数方法


function GetRandomInt(min, max) {
  return parseInt(Math.random() * (max - min + 1) + min);
}

获取所有定时器的函数方法


function timer() {
  var timer = setInterval(function () {}, 10);
  //循环清除定时器
  for (var i = 0; i < timer; i++) {
    clearInterval(i);
  }
}

还有许多不足继续完善，继续加油努力

ZXR__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript锅打灰太狼游戏

利用原生js实现锅打灰太狼下面是页面效果图页面html代码如下<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-widt
复制链接

扫一扫