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