[jQuery基础] jQuery案例 -- 狂拍灰太狼

狂拍灰太狼(补充音效)

案例效果展示

案例构架

1.背景图片
2.得分选项
3.时间进度条
4.游戏规则的点开以及关闭
5.开始游戏选项和重新开始选项

案例思路

布局html页面的基本样式
- 设置得分
- 设置时间进度条
- 设置开始游戏按键
- 设置游戏规则框架
- 设置游戏规则
- 设置 game over 和重新开始按键
设置这个游戏的基本规则
- 1.游戏时间:60s
- 2.拼手速,殴打灰太狼+10分
- 3.殴打小灰灰-10分

接下来开始正题,js的基本实现过程

监听点击时的效果

从游戏效果上看在开始游戏和重新游戏的时候会有图片的淡入淡出效果,在点击游戏规则和关闭上也会有淡入和淡出的效果

// 1.监听游戏规则的点击
$(".rules").click(function (e) {// 淡入 -- fadeIN()$(".rule").stop().fadeIn(100);
});// 2.监听关闭按钮的点击
$(".close").click(function (e) {// 淡出 -- fadeOUt()$(".rule").stop().fadeOut(100);
});// 3.监听开始游戏按钮的点击
$(".start").click(function (e) {// 开始游戏后实现游戏规则淡出效果$(this).stop().fadeOut(100);
});// 4.监听重新开始按钮的点击
$(".reStart").click(function () {// 点击开始让重新开始界面淡出消失$(".mask").stop().fadeOut(100);
});

接下来要开始处理进度条结束后的问题,我们可以看到在进度条结束后出现的重新开始以及在我们点击重新开始的时候要保证进度条是满的(也就是说要保证在点击之后width:180)
```
$(".progress").css({width: 180,
});
```
在进度条的基础上还要保证在重新开始点击按钮是得分为0
```
$(".score").text(0);
```

我们先解决进度条得问题
- 重新设置进度条的宽度 – 保证每一次点击开始游戏时进度条的宽度都是180px
```
$(".progress").css({width: 180,
});
```
- 开启定时器处理进度条的问题
  - 首先要拿到当前进度条的宽度
```
var progressWidth = $(".progress").width();
```
  - 减少当前的宽度
```
progressWidth -= 1;
```
  - 其次重新给进度条赋值一个宽度
```
$(".progress").css({width: progressWidth,
});
```
  - 然后也是主要的判断进度条是否走完
    - 确认进度条已经走完时,要关闭定时器
```
clearInterval(timer);
```
    - 重新显示开始界面 – 让game over 和重新开始界面淡入
```
$(".mask").stop().fadeIn(100);
```

接下来我们要开始处理灰太狼和小灰灰的动画问题

我们发现有小灰灰和灰太狼两种不同的图片,所以我们可以先定义两个数组,分别命名为wolf_1和wolf_2,将灰太狼和小灰灰的图片分别放在这两个数组中

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",
];

其次要保存一个数组中图片可能出现的所有位置

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);
```
向上取整,四舍五入
0 * 8 = 0 == 0
0.1* 8 = 0.8 == 1
0.2* 8 = 1.6 == 2
0.3* 8 = 2.4 == 2
0.4* 8 = 3.2 == 3
0.5* 8 = 4.0 == 4
0.6* 8 = 4.8 == 5
0.7* 8 = 5.6 == 6
0.8* 8 = 6.4 == 6
0.9* 8 = 7.2 == 7
1* 8 = 8 == 8
然后要设置图片显示的位置,利用随机位置实现随机图片的效果(判断是否等于0?等于0为wolf_1,等于1为wolf_2)
```
var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;
```
之后要设置图片的内容
```
window.wolfIndex = 0;
window.wolfIndexEnd = 5;
```
- 设置每隔一段时间切换一张图片效果
  - 判断图片是否到第五张
    - 到了第五张图片要删除图片
```
$wolfImage.remove();
```
    - 关闭定时器
```
clearInterval(wolfTimer);
```
    - 然后动画做完之后继续调用做下一个动画
```
startWolfAnimation();
```

之后在我们重新开始游戏后,让定时器再次开始,保证图片能够重新获取到显示的位置
```
$(".container").append($wolfImage);
```
然后我们要实现加分减分的过程
- 首先能够想到的就是要保证图片能够点击一次,不可能要点击一次图片就让分数加一次
  - 修改索引
```
indow.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);
}
```
最后我们要保证在进度条为0后要停止灰太狼和小灰灰的动画
- 要删除图片
```
$(".wolfImage").remove();
```
- 然后关掉定时器
```
clearInterval(wolfTimer);
```

补充(加入音效效果)

在开始点击以及重新开始的时候播放音乐

在游戏结束后音效自动停止

// 开始动画时的音乐
function startmusic(){var $music = $("<audio src='./我爱平底锅.mp3' loop='loop' autoplay='autoplay'></audio>")$(".music").append($music)
}
// 游戏结束的关闭动画
function stopmusic(){$(".music").empty()
}

之后还有一些零碎的细节要处理

比如要在点击重新开始按钮点击的时候要保证让开始游戏方法运作
比如在获取随机图片位置的时候保证是向上取整,四舍五入
比如在游戏点击灰太狼和小灰灰的时候出现的击打效果和加分效果

效果拆解

开始游戏界面

重新游戏界面

游戏规则界面

游戏加分减分

时间进度条

图片地址

链接：https://pan.baidu.com/s/1DUDiSNI2vrFO8vkqQt9qGQ
提取码：nkm9

代码展示

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</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"><!-- 设置得分 -- 默认为0 --><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><!-- 设置输了的game over和重新开始 -- 默认不显示--><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: white;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: white;background: linear-gradient(#E55C3D,#C50000);border-radius: 20px;border: none;font-size: 20px;position: absolute;top: 320px;left: 50%;margin-left: -75px;cursor: pointer;
}/* 设置最下面的游戏规则的框架 */
.container>.rules{width: 100%;height: 20px;background: #ccc;position: absolute;left: 0;bottom: 0;text-align: center;cursor: pointer;
}/* 设置最下面的游戏规则 */
.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;cursor: pointer;
}/* 设置规则的字体颜色和大小 */
.rule>p{line-height: 50px;color: white;
}
.rule>a{color: red;
}/* 设置输了的game over 和 重新开始 */
.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;cursor: pointer;
}/* 设置game over的颜色、大小和阴影 */
.mask>h1{color: #ff4500;text-shadow: 3px 3px 0 #fff;font-size: 40px;
}/* 设置重新开始按钮 */
.mask>button{width: 150px;line-height: 35px;text-align: center;color: white;background: linear-gradient(#74ACCF,#007DDC);border-radius: 20px;border: none;font-size: 20px;position: absolute;top: 320px;left: 50%;margin-left: -75px;cursor: pointer;
}

js部分

// 先做游戏规则
// 确保开始游戏和重新游戏时规则的淡入淡出问题
// 处理进度条在结束后出现重新开始,以及在点击重新开始时保证时间的进度条是满的(width:180)
// 开始处理灰太狼和小灰灰的动画问题
// 分别处理灰太狼和小灰灰的图片(放在两个数组内)
// 获取到图片的不同位置
// 随机获取到图片的位置
// 随机获取两组数组中的位置
// 利用随机位置实现随机图片效果
// 实现每隔一段时间切换一张图片
// 判断是否到了第五张图片,到了删掉,关掉定时器,然后动画做完之后继续调用做下一个动画
// 在重新开始游戏后,让定时器重新开始,图片重新获取位置显示
// 实现加分减分
// 拿到点击图片的地址,进行判断,辨别是否是灰太狼$(function () {// 1.监听游戏规则的点击$(".rules").click(function (e) {// 淡入 -- fadeIN()$(".rule").stop().fadeIn(100);});// 2.监听关闭按钮的点击$(".close").click(function (e) {// 淡出 -- fadeOUt()$(".rule").stop().fadeOut(100);});// 3.监听开始游戏按钮的点击$(".start").click(function (e) {// 开始游戏后实现游戏规则淡出效果$(this).stop().fadeOut(100);// 调用处理进度条的方法progressHandler();// 调用处理灰太狼动画的方法startWolfAnimation();// 开始播放音乐按钮startmusic()});// 4.监听重新开始按钮的点击$(".reStart").click(function () {// 得分重置为0$(".score").text(0);// 点击开始让重新开始界面淡出消失$(".mask").stop().fadeOut(100);// 调用处理进度条的方法progressHandler();// 调用处理灰太狼动画的方法 -- 点击重新开始游戏后,让开始游戏方法运作startWolfAnimation();// 开始播放音乐按钮startmusic()});// 定义一个专门处理进度条的方法function progressHandler() {// 重新设置进度条的宽度 -- 保证每一次点击开始游戏时进度条的宽度都是180px$(".progress").css({width: 180,});// 开启定时器处理进度条var timer = setInterval(function () {// 拿到进度条当前的宽度var progressWidth = $(".progress").width();// 减少当前的宽度progressWidth -= 1;// 重新给进度条赋值宽度$(".progress").css({width: progressWidth,});// 监听进度条是否走完if (progressWidth <= 0) {// 关闭定时器 -- 确认进度条已经走完clearInterval(timer);// 显示重新开始界面 -- 让game over 和重新开始界面淡入$(".mask").stop().fadeIn(100);// 进度条归0后停止灰太狼的动画stopWolfAnimation();// 停止背景音乐stopmusic()}}, 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,});// 随机获取数组类型 -- 判断是否等于0?等于0为wolf_1,等于1为wolf_2var 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);}});}// 进度条归0后停止灰太狼的动画function stopWolfAnimation() {// 删掉图片$(".wolfImage").remove();// 关掉定时器clearInterval(wolfTimer);}// 开始动画时的音乐function startmusic(){var $music = $("<audio src='./我爱平底锅.mp3' loop='loop' autoplay='autoplay'></audio>")$(".music").append($music)}// 游戏结束的关闭动画function stopmusic(){$(".music").empty()}//向上取整,四舍五入/*0  * 8 = 0   == 00.1* 8 = 0.8 == 10.2* 8 = 1.6 == 20.3* 8 = 2.4 == 20.4* 8 = 3.2 == 30.5* 8 = 4.0 == 40.6* 8 = 4.8 == 50.7* 8 = 5.6 == 60.8* 8 = 6.4 == 60.9* 8 = 7.2 == 71* 8 =  8    == 8*/// console.log(Math.random());// console.log(Math.round(0.5));//向上取整
});

[jQuery基础] jQuery案例 -- 狂拍灰太狼相关推荐

【jQuery笔记】狂拍灰太狼案例笔记
狂拍灰太狼使用 jQuery 语法实现的新浪微博页面我要实现的功能: 点击开始游戏按钮,开始游戏游戏有时间进度条游戏结束以后可以点击重新开始按钮,重新开始游戏有游戏规则点击灰太狼加 10 ...
每个人都能制作的简易版狂拍灰太狼小游戏（HTML+CSS+JavaScript）
自制系列一完善版来了. 如果在制作过程中有任何问题你都可以私信我,我会一一答复你们的. 由于上一次发的进度条不是很完善,显得不美观,这次改进了进度条问题,使增强了游戏的体验感.制作过程很简单,每个人都 ...
[jQuery基础] jQuery核心函数和工具方法
核心函数核心函数调用jQuery的核心函数 $() jQuery 传递一个函数 $(function () {alert("hello lnj") } 接受一个字符串选择器返 ...
[jQuery基础] jQuery案例 -- qq音乐以及初步解决Ajax 跨域问题
qq音乐案例案例效果展示案例效果结构划分整体布局歌曲条目部分顶部栏底部栏歌词显示部分案例实现功能 a. QQ音乐播放器静态页面布局 * 页面整体布局规划和实现 * 页面顶部布局和静态效 ...
[jQuery基础] jQuery案例 -- 新浪微博
新浪微博案例思路主要说说JavaScript的思路随时要监听内容的输入有内容输入添加,按钮可以点击没有内容输入禁止点击按钮监听点击发布按钮拿到用户输入的内容根据内容创建节点插入微 ...
[jQuery基础] jQuery事件相关案例 -- 电影排行榜、Tab选项卡
电影排行榜实现效果展示实现步骤第一步(实现静态效果) css部分 *{margin: 0;padding: 0;}.box{width: 300px;height: 450px;margin: ...
[jQuery基础] jQuery动效案例(二) -- 图标特效、无限循环滚动(简易轮播图)
图标特效实现效果展示实现步骤第一步(实现静态效果) CSS部分 *{margin: 0;padding: 0; } ul{list-style: none;width: 400px;height ...
[jQuery基础] jQuery动效案例(一) -- 弹窗广告、对联广告
弹窗广告实现效果展示实现步骤第一步(实现静态效果) CSS部分 *{margin: 0;padding: 0; } .ad{position: fixed;right: 0;bottom: 0; ...
JQuery | JQuery语言 | JQuery基础 | JQuery语言基础
文章目录前言一.JQuery语言介绍一.JQuery版本: 二.JQuery源文件说明: 三.JQuery使用条件: 二.入口函数一.第一种入口函数二.第二种入口函数三.JavaScrip ...