56-狂拍灰太狼游戏

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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

*{padding: 0;margin: 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;left: 63px;top: 66px;
}
.container>.start{width: 150px;/*高度加不加其实都行，因为有行高了嘛，把高度就给撑起来了*/height: 35px;line-height: 35px;/*这句就算不加文字也是居中的,因为是在按钮里*/text-align: center;background: linear-gradient(#E55C3D,#C50000);border: none;color: white;font-size: 20px;border-radius: 20px;position: absolute;top: 320px;/*绝对定位的元素left设为50%时，是已左上角为原点的，所以只要再使用margin属性添加负值补偿回来即可。便可左右居中*/left: 50%;margin-left: -75px;
}
.container>.rules{width: 100%;height: 20px;background: #ccc;position: absolute;bottom: 0;left: 0;/*这个就必须得加上了，div可不像按钮有有自动居中的效果*/text-align: center;
}
.container>.rule{height: 100%;width: 100%;background: rgba(0,0,0,0.5);/*由于container这个div里刚开始有个计分的h1，它是块元素，所以会站位，所以要绝对定位调这个蒙版的位置*/position: absolute;bottom: 0;left: 0;padding-top: 100px;box-sizing: border-box;text-align: center;display: none;
}
.rule>p{line-height: 50px;color: white;
}
.rule>a{color: red;
}
.container>.mask{width: 100%;height: 100%;background: rgba(0,0,0,0.5);position: absolute;left: 0;bottom: 0;padding-top: 200px;box-sizing: border-box;text-align: center;display: none;
}
.mask>h1{color: #f84f03;/*字体阴影，前两个参数是x，y轴偏移距离，第三个是模糊程度，0代表无模糊，第四个代表字体阴影的颜色*/text-shadow: 3px 3px 0 white;
}
.mask>.reStart{width: 150px;height: 35px;line-height: 35px;text-align: center;font-size: 20px;border-radius: 20px;border: none;position: absolute;top: 320px;left: 50%;margin-left: -75px;color: white;background: linear-gradient(#74ACCF,#007DDC);
}

$(function () {//1.监听游戏规则事件点击$(".rules").click(function () {$(".rule").stop().fadeIn(100);});//2.监听游戏规则关闭事件点击$(".close").click(function () {$(".rule").stop().fadeOut(100);});//3.监听开始游戏事件点击$(".start").click(function () {//开始游戏按钮消失$(this).stop().fadeOut(100);//执行进度条方法progressHandler();//执行灰太狼动画startWolfAnimation();});//4.监听重新开始游戏事件点击$(".reStart").click(function () {//重新开始界面消失$(".mask").stop().fadeOut();//重新执行进度条方法progressHandler();//重新执行灰太狼动画效果startWolfAnimation();//重新开始的时候分数要归零$(".score").text(0);});//定义一个专门处理进度条的方法function progressHandler() {$(".progress").css({width:180})//开启定时器，进度条长度逐渐减短var timer=setInterval(function () {/*（1）.当这个进度条的长度放在定时器里面的时候，下面有个进度条的长度随分数变化的代码，要写成如下所示的那个样子，（2）若进度条的长度放在定时器外面，即window.$progressWidth，那么下面的代码只需写成if(flag){window.$progressWidth+=10}else{window.$progressWidth-=10}即可。因为（1）情况下，是先开启了定时器，然后再拿到定时器的长度，即定时器的长度是不断更新的。如果下面的代码不变，而将var $progressWidth=$(".progress").width();放在定时器上面的话，就是说先拿到定时器的长度，然后开启定时器，下面的代码 $(".progress").css({ width: $(".progress").width()+10})是改变定时器的值，而不是$progressWidth的值，所以会出现视觉上猛的一增长，但也会瞬间恢复原长的视觉效果，在根本上不起作用。* *///拿到进度条的长度var $progressWidth=$(".progress").width();$progressWidth-=1;$(".progress").css({width:$progressWidth})//如果进度条的长度小于等于0，那么关闭定时器，并将重新开始界面显示出来,并停止狼的动画效果if($progressWidth<=0){clearInterval(timer);$(".mask").stop().fadeIn(100);stopWolfAnimation();}},100)}//定义一个专门处理灰太狼动画的方法var wolfTimer;function startWolfAnimation() {//定义两个数组保存所有灰太狼和小灰灰的图片var wolf_1=['./images/h0.png','./images/h1.png','./images/h2.png', './images/h3.png','./images/h4.png','./images/h5.png','./images/h5.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/x5.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"}];/*Math.random()是随机生成0-1的数， Math.round()是四舍五入扩展：parseInt(5.1234) //5 只保留整数部分Math.floor(5.1234)//5 向下取整，和parseInt一样Math.ceil(5.1234) //6向上取整（有小数，就+1）Math.round(5.1234)//四舍五入Math.abs(-1)//取绝对值Math.max(1,2)//2 返回两者中较大值Math.min(1,2)//1 返回两者中较小者Math.random()//随机生成0-1的数*///生成随机位置var wolfPosIndex=Math.round(Math.random()*8);$wolfImage=$("<image src='' class='wolfImage'>")$wolfImage.css({position:"absolute",left:arrPos[wolfPosIndex].left,top:arrPos[wolfPosIndex].top})//随机获取狼的类型var wolfType=Math.round(Math.random())==0?wolf_1:wolf_2//实现灰太狼和小灰灰的动画效果/*此处将两个索引定义为在内部的全局变量，是为了再点击狼后，无论何时，这个狼逐渐出现的动画就要停止，而改为拍打的动画*/window.wolfStartIndex=0;window.wolfEndIndex=5;wolfTimer=setInterval(function () {if(wolfStartIndex<wolfEndIndex) {$wolfImage.attr("src",wolfType[wolfStartIndex])wolfStartIndex++;}else {$wolfImage.remove();/*这个定时器记得一定要关，否则不关闭这个定时器而在调用startWolfAnimation方法时，就会有多个定时器同时打开，就会出现万狼出洞的效果* */clearInterval(wolfTimer);startWolfAnimation();}},300)$(".container").append($wolfImage)gameRules($wolfImage);}//定义一个专门处理游戏规则的方法function gameRules($wolfImage) {$wolfImage.one("click",function () {//点击，改变索引，即停止当前动画，改为拍打动画window.wolfStartIndex=5;window.wolfEndIndex=9;//获取图片的地址var $src=$(this).attr("src");//    根据图片判断是否是灰太狼var flag=$src.indexOf("h")>-1;if (flag){//如果是灰太狼，那么分数+10，并且进度条的长度就+10$(".score").text(parseInt( $(".score").text())+10);$(".progress").css({width: $(".progress").width()+10})}else {//如果是小灰灰，那么分数-10，并且进度条的长度-10$(".score").text(parseInt( $(".score").text())-10);$(".progress").css({width: $(".progress").width()-10})}})}//定义一个灰太狼动画结束的方法function stopWolfAnimation() {/*在停止动画的时候，首先要把最后的图片给移除了，如何得到这个图片呢？方法有三1.将这个图片在外部定义为全局变量 即var $wolfImage2.将这个图片在内部定义为全局变量 即window.$wolfImage3.在创建这个图片的时候给这个图片加个class*/$(".wolfImage").remove();/*停止动画的时候也要关闭定时器，不然狼的动画效果会持续进行，获取这个wolfTimer方法有二1.在外部定义全局变量 即var wolfTimer2.在内部定义全局变量 即window.wolfTimer*/clearInterval(wolfTimer);}
})

需要图片的请取百度云自取。

链接：https://pan.baidu.com/s/1XPtKFCDGJX0f-nPLMS8nGQ
提取码：tm2t
复制这段内容后打开百度网盘手机App，操作更方便哦

56-狂拍灰太狼游戏相关推荐

每个人都能制作的简易版狂拍灰太狼小游戏（HTML+CSS+JavaScript）
自制系列一完善版来了. 如果在制作过程中有任何问题你都可以私信我,我会一一答复你们的. 由于上一次发的进度条不是很完善,显得不美观,这次改进了进度条问题,使增强了游戏的体验感.制作过程很简单,每个人都 ...
【jQuery笔记】狂拍灰太狼案例笔记
狂拍灰太狼使用 jQuery 语法实现的新浪微博页面我要实现的功能: 点击开始游戏按钮,开始游戏游戏有时间进度条游戏结束以后可以点击重新开始按钮,重新开始游戏有游戏规则点击灰太狼加 10 ...
[jQuery基础] jQuery案例 -- 狂拍灰太狼
狂拍灰太狼(补充音效) 案例效果展示案例构架 1.背景图片 2.得分选项 3.时间进度条 4.游戏规则的点开以及关闭 5.开始游戏选项和重新开始选项案例思路布局html页面的基本样式设置得分 ...
从零开发一个灰太狼游戏是什么样的体验？（建议收藏）
极客江南: 一个对开发技术特别执着的程序员,对移动开发有着独到的见解和深入的研究,有着多年的iOS.Android.HTML5开发经验,对NativeApp.HybridApp.WebApp开发有着独 ...
七、jQuery狂拍大灰狼案例
在线案例显示:狂拍灰太狼首页布局基本布局完成首页的布局,背景使用了一张图片.其余元素,图中已经标出. <div class="container"><h1& ...
支付宝之小鸡拍球游戏（C++）
小鸡拍球 [问题描述]"蚂蚁庄园"的小鸡拍球游戏中,有三种可能的得分:5分.8分和10分.现从键盘输入一个整数的得分值,请输出该局游戏可能的得分组合. [输入形式]输入只有一行,包 ...
python拍七游戏代码_拍七数字游戏 - Johannes-Jensen - 博客园
最近写作业时,老师留了一道关于拍七数字游戏的题,"拍7游戏"规则是:一堆人围成一圈,开始时,任意指定一人说出数字"1"后,一圈人按顺时针方向,每人按整数由小到大 ...
逢7必过或拍7游戏（七的倍数、带7的）用C语言实现
相信我们大家都玩过这个游戏. 逢7必过拍7游戏是家庭聚会.朋友聚餐经常玩的游戏,任意一人开始轮流报数,数字从1开始凡是遇到任何7的倍数和带7的数字都要拍手. 规则是:第一个人随机说一个数字,大家依次从 ...
拍七游戏（zzuli）
题目描述军训休息的时候,教官带领大家玩拍七游戏. 这个游戏的规则是,大家依次从1开始报数,如果将要报的数中含有7或者是7的倍数,那么便应该报"pass". 例如,小伙伴们依次报出 ...
python拍七游戏代码_python实现逢七拍腿小游戏的思路详解
逢七拍腿游戏几个小朋友在一起玩逢七拍腿的游戏,从1开始数数,当数到7的倍数或者尾号是7时,拍一下腿.现在从1数到99,假设每个人都没有错,计算一下共要拍腿几次? 第一种实现思路:通过在for循环语句 ...

56-狂拍灰太狼游戏

56-狂拍灰太狼游戏相关推荐

最新文章

热门文章