当前位置: 移动技术网 > IT编程>网页制作>HTML > jQuery实现小游戏源代码--打灰太狼

jQuery实现小游戏源代码--打灰太狼

2020年07月07日  | 移动技术网IT编程  | 我要评论

注:该游戏是通过学习B站李南江老师jQuery后,再其基础上做的修正。

不多说,直接上代码:代码有详细的注释,应该不难看懂

首先是HTML代码:值得一提的是,我这里引入的是jQuery1.12.4版本的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>打灰太狼</title>
  <link rel="stylesheet" href="css/index.css">
  <script src="../jquery-1.12.4.js"></script>
  <script src="js/index.js"></script>
</head>
<body>
<!--游戏的容器 -->
<div class="container">
  <h1>0</h1>
  <!-- 进度条-->
  <div class="progress"></div>
  <button class="start">开始游戏</button>
  <div class="rules">游戏规则</div>
  <!-- 游戏规则界面-->
  <div class="rule">
    <p>游戏规则:</p>
    <p>1.游戏时间:60s</p>
    <p>2.拼手速,殴打灰太狼+10分</p>
    <p>3.殴打小灰灰-10分</p>
    <a href="javascript:;" class="close">关闭</a>
  </div>

  <!-- 游戏结束界面-->
  <div class="mask">
    <h1>GAME OVER</h1>
    <button class="reStart">重新开始</button>
  </div>
</div>
</body>
</html>

接下来是CSS样式:

* {
  margin: 0px;
  padding: 0px;
}

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

.container > h1 {
  color: white;
  margin-left: 56px;
}

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

.container > .start {
  width: 150px;
  line-height: 35px;
  position: absolute;
  top: 400px;
  left: 85px;
  background: linear-gradient(#E55C3D, #C50000);
  border-radius: 30px;
  border: none;
  color: white;
  font-size: 18px;
}

.container > .rules {
  width: 100%;
  line-height: 20px;
  position: absolute;
  bottom: 0px;
  background-color: #cccccc;
  text-align: center;
}

/*以下为游戏规则样式*/
.container > .rule {
  width: 320px;
  height: 439px;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  padding-top: 50px;
  text-align: center;
  box-sizing: border-box;
  /*默认隐藏*/
  display: none;
}

.rule > p {
  color: white;
  margin-top: 30px;
}

.rule > .close {
  display: inline-block;
  margin-top: 30px;
  color: #00CC00;
}

/*以下的为游戏结束样式*/
.container > .mask {
  width: 320px;
  height: 439px;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  padding-top: 100px;
  text-align: center;
  box-sizing: border-box;
  /*默认不显示*/
  display: none;
}

.mask > h1 {
  color: white;
  font-size: 40px;
  text-shadow: 3px 3px 0px #ffffff;
}

.mask > .reStart {
  width: 150px;
  line-height: 35px;
  position: absolute;
  top: 356px;
  left: 85px;
  background: linear-gradient(#74ACCF, #007DDC);
  border-radius: 30px;
  border: none;
  color: white;
  font-size: 18px;
}

还有JS的代码如下:

$(function () {
  //进度条定时器名称
  var timer
  //切换图片的定时器名称
  var wolfTimer
  //变量a,用来判断定时器是否已经开始执行,默认为0没有开启
  var a = 0
  //变量b,用来判断动画灰太狼是否已经执行,默认为0没有开启
  var b = 0
  //1监听游戏规则按钮
  $(".rules").click(function () {
    //暂停进度条定时器
    clearInterval(timer)
    //暂停灰太狼动画
    stopWolfAnimation()
    //显示游戏规则界面
    $(".rule").stop().fadeIn(100)
  })

  //2监听关闭按钮
  $(".rule>a").click(function () {
    //a不等于0说明定时器没有执行过,恢复当前的进度条定时器
    //可以避免一开始就点游戏规则而导致游戏开始执行!!
    if (a !== 0 && b !== 0) {
      //恢复当前的进度条定时器
      progress()
      //恢复灰太狼动画
      startWolfAnimation()
    } else {
      //暂停灰太狼动画
      stopWolfAnimation()
    }
    //隐藏游戏规则界面
    $(".rule").stop().fadeOut(100)
  })

  //3监听开始游戏按钮
  $(".start").click(function () {
    //让开始按钮隐藏
    $(this).stop().fadeOut(100)
    //让进度条开始执行,调用定时器函数
    progress()
    //调用执行灰太狼动画的定时器
    startWolfAnimation()
  })

  //4监听重新开始的按钮
  $(".mask").click(function () {
    //当显示重新开始按钮时,说明定时器已经至少调用一次了,所以将a重新设为0
    a = 0
    //当点击时,隐藏当前结束界面,显示游戏开始时的默认界面
    $(this).stop().fadeOut(100)
    //让进度条立刻恢复成原来的宽度
    $(".progress").css("width", 180)
    //显示开始游戏按钮
    $(".start").fadeIn(100)
    //点击重新开始时,将已累加的分数清零
    $(".container>h1").text(0)
  })

  //设置进度条的定时器
  function progress() {
    timer = setInterval(function () {
      //当调用定时器时,a值变成1,表至少已执行过一次
      a = 1;
      //获取当前进度条的宽度
      var width = $(".progress").width()
      //每次减2个宽度,并设置给当前的进度条
      width -= 2
      $(".progress").width(width)
      if (width <= 0) {
        //当进度条为0时停止定时器
        clearTimeout(timer)
        //当进度条为0时,显示游戏结束界面
        $(".mask").stop().fadeIn(100)
        //进度条结束后,调用停止灰太狼动画的定时器
        stopWolfAnimation()
      }
    }, 100)
  }

  //设置一个用来显示动画灰太狼的方法
  function startWolfAnimation() {
    //一旦调用动画,b值改为1,表至少已执行过一次
    b = 1
    // 1.定义两个数组保存所有灰太狼和小灰灰的图片
    var wolf_1 = ['./img/h0.png', './img/h1.png', './img/h2.png', './img/h3.png', './img/h4.png', './img/h5.png', './img/h6.png', './img/h7.png', './img/h8.png', './img/h9.png'];
    var wolf_2 = ['./img/x0.png', './img/x1.png', './img/x2.png', './img/x3.png', './img/x4.png', './img/x5.png', './img/x6.png', './img/x7.png', './img/x8.png', './img/x9.png'];
    // 2.定义一个数组保存所有可能出现的位置
    var arrPos = [
      {left: "100px", top: "115px"},
      {left: "20px", top: "160px"},
      {left: "190px", top: "142px"},
      {left: "105px", top: "193px"},
      {left: "19px", top: "221px"},
      {left: "202px", top: "212px"},
      {left: "120px", top: "275px"},
      {left: "30px", top: "295px"},
      {left: "209px", top: "297px"}
    ];
    //3创建一个图片对象
    var $img = $("<img src='' class='wolfImage'>")
    //4获取随机数,用来获取图片的位置
    var int = Math.ceil(Math.random() * 8)
    //5设置图片位置
    $($img).css({
      position: "absolute",
      left: arrPos[int].left,
      top: arrPos[int].top
    })
    //6获取数据数组类型(0或1)0为灰太狼 1为小灰灰
    var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2
    //7设置定时器,用来设置图片的切换,默认从第一张开始
    window.imgIndexStart = 0
    window.imgIndexStop = 5
    wolfTimer = setInterval(function () {
      //只用切换到第五张图
      if (imgIndexStart >= imgIndexStop) {
        //删除图片
        $(".wolfImage").remove()
        //清除定时器
        clearInterval(wolfTimer)
        //重新调用:执行灰太狼动画的方法
        startWolfAnimation()
      }
      //设置图片中的src属性的值
      $img.attr("src", wolfType[imgIndexStart])
      imgIndexStart++;
    }, 200)
    //8将图片添加到界面上
    $(".container").append($img)
    //9调用游戏规则方法
    gameRules($img)
  }

  //创建一个游戏得分规则方法
  function gameRules($img) {
    //给图片绑定只能执行一次的单击响应事件
    $($img).one("click", function () {
      //当点击图片时,修改切换图片的索引,显示敲打图片
      window.imgIndexStart = 5
      window.imgIndexStop = 9
      //获取当前图片的灰太狼(包含 h)还是小灰灰(包含 x)
      var str = $(this).attr("src")
      //包含'h'的大于0,返回true,代表灰太狼,否则为小灰灰
      var flag = str.indexOf("h") >= 0
      if (flag) {
        //打灰太狼加十分
        $(".container>h1").text(parseInt($(".container>h1").text()) + 10)
      } else {
        //打小灰灰减十分
        $(".container>h1").text(parseInt($(".container>h1").text()) - 10)
      }
    })
  }

  //设置一个用来暂停动画灰太狼的方法
  function stopWolfAnimation() {
    //删除图片对象
    $(".wolfImage").remove()
    //清楚切换图片的定时器
    clearInterval(wolfTimer)
  }

})

最终实现效果如下:该小游戏会自动计时计分等

该小游戏所需要的图片资源在以下链接中,可自取:

链接:https://pan.baidu.com/s/1iONaeBpq1c2-Zfs7JxhSaQ 
提取码:2nvb 
 

本文地址:https://blog.csdn.net/weixin_45902966/article/details/107159262

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网