admin 管理员组文章数量: 1087649
jQuery小游戏之锅打灰太郎
HTML代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>锅拍灰太狼</title>
<link rel="stylesheet" type="text/css" href="css1.css"/>
<script src="../jquery.js"></script>
<script src="Untitled-1.js"></script>
</head>
<body>
<div class="container"><h1 class="score">0</h1><div class="progress"></div><button class="start">开始游戏</button><div class="rules"><a href="#">游戏规则</a></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代码：
@charset "utf-8";
/* CSS Document */
*{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);}
js代码：
// JavaScript Document
$(function () { var wolftimer=null;//1、游戏规则的显示和隐藏$(".rules").click(function() {$(".rule").show();});$(".close").click(function() {$(".rule").hide();});//2.1开始游戏单击事件$(".start").click(function () {$(this).hide();//2.2进度条动画progressHandler();//2.3灰太狼动画WolfAnimation();});//3.重新开始$('.reStart').click(function(){$('.mask').hide();progressHandler();WolfAnimation();$('.score').text('0');});
});//进度条方法
function progressHandler() {var timer=setInterval(function () {var w=$('.progress').width()-3;$('.progress').css('width',w);if(w<=0){clearInterval(timer);stopWolfAnimation()$('.mask').show();}},1000);//恢复进度条（走完之后）$('.progress').css('width',180);};//灰太狼动画function WolfAnimation(){//1、定义两个数组，保存所有灰太狼和小灰灰的图片var wolf_0=['./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_1=['./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',]//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'>");//4、设置图片显示的位置，随机图片位置设置var posIndex = Math.floor(Math.random()*9);$wolfImage.css({position:"absolute",left:arrPos[posIndex].left,top:arrPos[posIndex].top});//5.图片地址设置//随机出现小灰灰和灰太狼var wolftype=Math.random()<0.5?wolf_0:wolf_1;var wolfIndex=0;var wolfIndexEnd=5;wolftimer=setInterval(function () {$wolfImage.attr("src",wolftype[wolfIndex]);wolfIndex++; if(wolfIndex>wolfIndexEnd){ clearInterval(wolftimer);$('.wolfImage').remove();WolfAnimation();}},300);//6.插入图片$(".container").append($wolfImage); //7.处理游戏规则,只执行一次$('.wolfImage').one('click',function(){var flag=$('.wolfImage').attr('src').indexOf('h');if(flag>0){$('.score').text(parseInt($('.score').text())+10);}else{$('.score').text(parseInt($('.score').text())-10);}//拍打动画wolfIndex=6;wolfIndexEnd=9;});}
//停止动画
function stopWolfAnimation() {$(".wolfImage").remove();clearInterval(wolftimer);}
本文标签： jQuery小游戏之锅打灰太郎
版权声明：本文标题：jQuery小游戏之锅打灰太郎 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687332641a90567.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论