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

狂拍灰太狼

使用 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);}
});

实现效果如下：

【jQuery笔记】狂拍灰太狼案例笔记相关推荐

[jQuery基础] jQuery案例 -- 狂拍灰太狼
狂拍灰太狼(补充音效) 案例效果展示案例构架 1.背景图片 2.得分选项 3.时间进度条 4.游戏规则的点开以及关闭 5.开始游戏选项和重新开始选项案例思路布局html页面的基本样式设置得分 ...
七、jQuery狂拍大灰狼案例
在线案例显示:狂拍灰太狼首页布局基本布局完成首页的布局,背景使用了一张图片.其余元素,图中已经标出. <div class="container"><h1& ...
每个人都能制作的简易版狂拍灰太狼小游戏（HTML+CSS+JavaScript）
自制系列一完善版来了. 如果在制作过程中有任何问题你都可以私信我,我会一一答复你们的. 由于上一次发的进度条不是很完善,显得不美观,这次改进了进度条问题,使增强了游戏的体验感.制作过程很简单,每个人都 ...
Spring-学习笔记07【银行转账案例】
Java后端学习路线笔记汇总表[黑马程序员] Spring-学习笔记01[Spring框架简介][day01] Spring-学习笔记02[程序间耦合] Spring-学习笔记03[Spring的 ...
Redis-学习笔记06【Redis案例】
Java后端学习路线笔记汇总表[黑马程序员] Redis-学习笔记01[Redis环境搭建] Redis-学习笔记02[Redis命令操作] Redis-学习笔记03[Redis持久化] Redi ...
Filter和Listener-学习笔记03【Filter案例】
Java后端学习路线笔记汇总表[黑马程序员] Filter和Listener-学习笔记01[Filter快速入门] Filter和Listener-学习笔记02[Filter细节] Filter和 ...
Cookie和Session-学习笔记02【Cookie案例、JSP改造Cookie案例】
Java后端学习路线笔记汇总表[黑马程序员] Cookie和Session-学习笔记01[Cookie_快速入门.Cookie_细节] Cookie和Session-学习笔记02[Cookie案例 ...
嵌入式OS入门笔记-以RTX为案例：四.简单的时间管理
嵌入式OS入门笔记-以RTX为案例:四.简单的时间管理上一节简单记录了进程task.有了进程以后,我们需要关心怎么样分配CPU资源(或者运行时间)给每个进程.那么就要引入排程(scheduling) ...
嵌入式OS入门笔记-以RTX为案例：三.初探进程
嵌入式OS入门笔记-以RTX为案例:三.初探进程 1.理论进程,英文称呼很多Process, Task 等等,一般通用操作系统称Process的比较多,各种称呼涵义稍微有不一样.一般而言,进 ...

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

狂拍灰太狼

【jQuery笔记】狂拍灰太狼案例笔记相关推荐

最新文章

热门文章