欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-03-13 08:04:53
注：该游戏是通过学习B站李南江老师jQuery后，再其基础上做的修正。不多说，直接上代码:代码有详细的注释，应该不难看懂首先是HTML代码:值得一提的是，我这里引入的是jQuery1.12.4版本的 打灰太狼

注：该游戏是通过学习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)
  }

})

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

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

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

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

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

上一篇： 唯品会2021Q2活跃用户数大涨32%，特卖电商还有多少向上空间？

下一篇： HiveSQL找出连续日期及连续的天数

推荐阅读