HTML代码：
[code]<!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代码：
[code]@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代码：
[code]// 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);}
爱站程序员基地
