【jQuery笔记】狂拍灰太狼案例笔记

最新推荐文章于 2022-08-19 18:57:41 发布

码小余の博客

最新推荐文章于 2022-08-19 18:57:41 发布

阅读量2.8k

点赞数

分类专栏： jQuery 文章标签： js

本文链接：https://blog.csdn.net/Cool_breeze_/article/details/106841832

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

狂拍灰太狼

使用 jQuery 语法实现的新浪微博页面

我要实现的功能：

点击开始游戏按钮，开始游戏
游戏有时间进度条
游戏结束以后可以点击重新开始按钮，重新开始游戏
有游戏规则
点击灰太狼加 10 分，点击小灰灰减 10 分，并且只能点击一次，以防用户一直点
点击之前显示没有被平底锅打击的图片，点击之后显示被平底锅打击的图片
游戏结束，动画结束

首先，布局HTML页面

<!--
 * @Author: 码小余
 * @Date: 2020-06-18 14:32:44
 * @LastEditTime: 2020-06-18 17:35:16
 * @FilePath: \代码\56-狂拍灰太狼\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>狂拍灰太狼</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/index.js"></script>
  </head>
  <body>
    <div class="container">
      <h1 class="score">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="#" class="close">[关闭]</a>
      </div>
      <div class="mask">
        <h1>GAME OVER</h1>
        <button class="reStart">重新开始</button>
      </div>
    </div>
  </body>
</html>

编写css样式代码

* {
  margin: 0;
  padding: 0;
}
.container {
  width: 320px;
  height: 480px;
  background: url("../images/game_bg.jpg") no-repeat 0 0;
  margin: 50px auto;
  position: relative;
}
.container > h1 {
  color: #fff;
  margin-left: 60px;
}
.container > .progress {
  width: 180px;
  height: 16px;
  background: url("../images/progress.png") no-repeat 0 0;
  position: absolute;
  top: 66px;
  left: 63px;
}
.container > .start {
  width: 150px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  background: linear-gradient(#e55c3d, #c50000);
  border-radius: 20px;
  border: none;
  outline: none;
  font-size: 20px;
  position: absolute;
  top: 320px;
  left: 50%;
  margin-left: -75px;
}
.container > .rules {
  width: 100%;
  height: 20px;
  background: #ccc;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
}
.container > .rule {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 100px;
  box-sizing: border-box;
  text-align: center;
  display: none;
}
.rule > p {
  line-height: 50px;
  color: #fff;
}
.rule > a {
  text-decoration: none;
  color: red;
}
.container > .mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 200px;
  box-sizing: border-box;
  text-align: center;
  display: none;
}
.mask > h1 {
  color: #ff4500;
  text-shadow: 3px 3px 0 #fff;
  font-size: 40px;
}
.mask > button {
  width: 150px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  background: linear-gradient(#74accf, #007ddc);
  border-radius: 20px;
  border: none;
  outline: none;
  font-size: 20px;
  position: absolute;
  top: 320px;
  left: 50%;
  margin-left: -75px;
}

编写js代码

/*
 * @Author: 码小余
 * @Date: 2020-06-18 14:32:18
 * @LastEditTime: 2020-06-18 18:38:53
 * @FilePath: \代码\56-狂拍灰太狼\js\index.js
 */
$(function () {
  // 1. 监听游戏规则的点击
  $(".rules").click(function (e) {
    $(".rule").stop().fadeIn(100);
  });
  // 2. 监听关闭按钮的点击
  $(".close").click(function (e) {
    $(".rule").stop().fadeOut(100);
  });
  // 3. 监听开始按钮的点击
  $(".start").click(function (e) {
    $(this).stop().fadeOut(100);
    // 调用处理进度条的方法
    progressHandler();
    // 调用处理灰太狼动画的方法
    startWolfAnimation();
  });
  // 4. 监听重新开始按钮的点击
  $(".reStart").click(function () {
    // 得分重置为0
    $(".score").text(0);
    $(".mask").stop().fadeOut(100);
    // 调用处理进度条的方法
    progressHandler();
    // 调用开始灰太狼动画的方法
    startWolfAnimation();
  });

  // 定义一个专门处理进度条的方法
  function progressHandler() {
    // 重新设置进度条的宽度
    $(".progress").css({
      width: 180,
    });
    // 开启定时器处理进度条
    var timer = setInterval(function () {
      // 拿到进度条当前的宽度
      var progressWidth = $(".progress").width();
      // 减少当前的宽度
      progressWidth -= 1;
      // 重新给进度条赋值宽度
      $(".progress").css({
        width: progressWidth,
      });
      // 监听进度条是否走完
      if (progressWidth <= 0) {
        // 关闭定时器
        clearInterval(timer);
        // 显示重新开始界面
        $(".mask").stop().fadeIn(100);
        // 停止灰太狼的动画
        stopWolfAnimation();
      }
    }, 100);
    return timer;
  }

  var wolfTimer;
  // 定义一个专门处理灰太狼动画的方法
  function startWolfAnimation() {
    // 1.定义两个数组保存所有灰太狼和小灰灰的图片
    var wolf_1 = [
      "./images/h0.png",
      "./images/h1.png",
      "./images/h2.png",
      "./images/h3.png",
      "./images/h4.png",
      "./images/h5.png",
      "./images/h6.png",
      "./images/h7.png",
      "./images/h8.png",
      "./images/h9.png",
    ];
    var wolf_2 = [
      "./images/x0.png",
      "./images/x1.png",
      "./images/x2.png",
      "./images/x3.png",
      "./images/x4.png",
      "./images/x5.png",
      "./images/x6.png",
      "./images/x7.png",
      "./images/x8.png",
      "./images/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 $wolfImage = $("<img src='' class='wolfImage'>");
    // 随机获取图片的位置
    var posIndex = Math.round(Math.random() * 8);
    // 4. 设置图片显示的位置
    $wolfImage.css({
      position: "absolute",
      left: arrPos[posIndex].left,
      top: arrPos[posIndex].top,
    });
    // 随机获取数组的类型
    var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;
    // 5. 设置图片的内容
    window.wolfIndex = 0;
    window.wolfIndexEnd = 5;
    wolfTimer = setInterval(function () {
      if (wolfIndex > wolfIndexEnd) {
        $wolfImage.remove();
        clearInterval(wolfTimer);
        startWolfAnimation();
      }
      $wolfImage.attr("src", wolfType[wolfIndex]);
      wolfIndex++;
    }, 300);
    // 6. 将图片添加到界面上
    $(".container").append($wolfImage);

    // 7. 调用处理游戏规则的方法
    gameRules($wolfImage);
  }

  // 处理游戏规则的方法
  function gameRules(wolfImage) {
    wolfImage.one("click", function () {
      // 修改索引
      window.wolfIndex = 5;
      window.wolfIndexEnd = 9;
      // 拿到当前点击土拍你的地址
      var $src = $(this).attr("src");
      // 根据图片地址判断是否是灰太狼
      var flag = $src.indexOf("h") >= 0;
      // 根据点击的图片类型增减分数
      if (flag) {
        // +10
        $(".score").text(parseInt($(".score").text()) + 10);
      } else {
        // -10
        $(".score").text(parseInt($(".score").text()) - 10);
      }
    });
  }

  // 定义停止动画方法
  function stopWolfAnimation() {
    $(".wolfImage").remove();
    clearInterval(wolfTimer);
  }
});

实现效果如下：

码小余の博客

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
【jQuery笔记】狂拍灰太狼案例笔记

狂拍灰太狼使用 jQuery 语法实现的新浪微博页面我要实现的功能：点击开始游戏按钮，开始游戏游戏有时间进度条游戏结束以后可以点击重新开始按钮，重新开始游戏有游戏规则点击灰太狼加 10 分，点击小灰灰减 10 分，并且只能点击一次，以防用户一直点点击之前显示没有被平底锅打击的图片，点击之后显示被平底锅打击的图片游戏结束，动画结束首先，布局HTML页面<!-- * @Author: 码小余 * @Date: 2020-06-18 14:32:44 * @LastE
复制链接

扫一扫