没看源代码，可能思路有些不一样，还做了如下优化：
1、增加了音效 增加了狼儿钻回洞里的动画。
2、计分规则
3、设置了combo系统， 连续5个combo 时间+10S
4、打小灰灰会减分 减时间
5、挂到了我的个人服务器上，可以去以下网址体验以下：
锅打灰太狼
www.dh70.top
6、需要优化的部分：
①、如果游戏中把鼠标换成平底锅就更好了
②、CSS部分 刚开始不会用text.shadow属性，自己硬生生做的阴影，好傻 /：笑哭
③、前期没想好，没有完全按照面向对象的思维做，如果重新做一次，会先创建“狼”的类，在类中写属性和方法。
源码如下：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="images/logo.png" type="image/x-ico">
<title>锅打灰太狼</title>
<link rel="stylesheet" href="huitailang.css">
<script
src='https://code.jquery.com/jquery-1.12.4.js'
integrity='sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU='
crossorigin='anonymous'>
</script>
<script src="huitailang.js"></script>
<script
src='https://code.jquery.com/jquery-1.12.4.js'
integrity='sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU='
crossorigin='anonymous'>
</script>
</head>
<body>
<div class="content">
<span class="score">0</span>
<div class="timebarbg">
<div class="timebar"></div>
<span></span>
</div>
<div class="combo">
<span class="combo1">COMBO×</span>
<span class="combo2">COMBO×</span>
<span class="combo3">0</span>
<span class="combo4">0</span>
</div>
<button class="start">开始游戏</button>
<div class="over">
<div></div>
<button class="restart">重新开始</button>
<p class="over1">游戏结束</p>
<p class="over2">游戏结束</p>
</div>
<div class="help">游戏规则</div>
<div class="rules">
<div>
<p>
游戏规则
</p>
<span>X</span>
<p>
1.鼠标点击灰太狼使用平底锅;<br>
2.只许敲打灰太狼,不许殴打小灰灰.每次殴打灰太狼+10分;每次误伤小灰灰-10分;<br>
3.时间倒计时60秒,时间耗尽游戏结束;<br>
4.连续敲打灰太狼形成Combo,5次combo奖励10秒,积分+20;<br>
5.每次敲打小灰灰扣5秒;<br>
6.U are OK to go!Have fun!~<br>
</p>
</div>
</div>
</div>
<audio src="http://www.dh70.top/jQuery/huitailang/sounds/open.mp3" autoplay loop></audio>
<audio src="http://www.dh70.top/jQuery/huitailang/sounds/start.mp3" id="startAudio"></audio>
<audio src="http://www.dh70.top/jQuery/huitailang/sounds/hbeat.mp3" id="hbeatAudio"></audio>
<audio src="http://www.dh70.top/jQuery/huitailang/sounds/xbeat.mp3" id="xbeatAudio"></audio>
<audio src="http://www.dh70.top/jQuery/huitailang/sounds/openlang.mp3" id="hopenAudio" autoplay></audio>
<audio src="http://www.dh70.top/jQuery/huitailang/sounds/combo.mp3" id="comboAudio"></audio>
<audio src="http://www.dh70.top/jQuery/huitailang/sounds/over.mp3" id="overAudio"></audio>
<audio src="http://www.dh70.top/jQuery/huitailang/sounds/timeSub.mp3" id="subAudio"></audio>
</body>
</html>CSS 部分：
*{
margin: 0;
padding: 0;
}
.content{
width: 320px;
height: 480px;
background: url("images/game_bg.jpg") no-repeat 0 0;
margin: 50px auto 0;
position: relative;
background-color: black;
}
.score{
display: inline-block;
font-size: 30px;
color: white;
font-family: Arial, Helvetica, sans-serif;
margin: 5px 60px;
}
.timebarbg{
width: 180px;
height: 16px;
margin: 21.5px 63px;
border-radius: 30px;
position: relative;
overflow: hidden;
}
.timebar{
position: absolute;
width: 180px;
height: 16px;
background-color: orangered;
}
.help{
width: 100%;
height: 20px;
background-color: #27ae60;
text-align: center;
position: absolute;
bottom: 0;
cursor: pointer;
font-family: "黑体";
color:#ecf0f1
}
.start{
width: 150px;
height: 30px;
font: 25px "黑体";
position: absolute;
left: 85px;
top: 323px;
background-color: rgb(231, 64, 3);
border-radius: 15px;
border: none;
color: white;
outline: none;
}
.restart{
width: 150px;
height: 30px;
font: 25px "黑体";
position: absolute;
left: 85px;
top: 323px;
background-color: rgb(30, 100, 128);
border-radius: 15px;
border: none;
color: white;
outline: none;
}
.timebarbg>span{
position: absolute;
top: -3px;
left: 10px;
font-size: 16px;
color: white;
}
.over{
display: none;
}
.over1{
font: 50px "黑体";
color: black;
position: absolute;
top: 203px;
left:53px;
}
.over2{
font: 50px "黑体";
color: yellow;
position: absolute;
top: 200px;
left:50px;
}
.over>div{
width: 320px;
height: 480px;
background-color: #000000;
position: absolute;
top:-20px;
opacity: 0.5;
}
.lang{
background: url("images/x.png") no-repeat;
width: 100px;
height: 100px;
overflow: hidden;
background-position: -108px 0;
position: absolute;
}
.beatlang{
background: url("images/x.png") no-repeat;
width: 100px;
height: 100px;
overflow: hidden;
/* background-position: -900px 0; */
position: absolute;
}
.combo{
display: none;
}
.combo2{
color: yellow;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif, sans-serif;
font-size: 30px;
position: absolute;
left: 5px;
top: 410px;
}
.combo1{
color: black;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif, sans-serif;
font-size: 30px;
position: absolute;
left: 8px;
top: 413px;
}
.combo4{
color: yellow;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif, sans-serif;
font-size: 30px;
position: absolute;
left: 115px;
top: 410px;
}
.combo3{
color: black;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif, sans-serif;
font-size: 30px;
position: absolute;
left: 118px;
top: 413px;
}
.rules>div{
display: none;
position: absolute;
width: 100%;
height: 415px;
background-color: #2ecc71;
bottom: 20px;
}
.rules>div>p:first-child{
text-align: center;
font-size: 30px;
font-family: "微软雅黑";
color:#ecf0f1;
text-shadow: 3px 3px 2px black
}
.rules>div>p:last-child{
margin:0 10px;
font-size: 18px;
font-family: "微软雅黑";
line-height: 40px;
color:white;
text-shadow:3px 1px 6px #34495e;
}
.rules>div>span{
width: 25px;
text-align: center;
position: absolute;
border-radius: 5px;
background-color: #3498db;
right:5px;
top:5px;
cursor: pointer;
}
.rules>div>span:hover{
background-color: #d35400;
}JS部分：
$(document).ready(function(){
var time=60;
var timer1,timer2,timer3,timer4;
var score=0;
var combo=0;
var beatWolf=true;
var pos;
var arr=[[99,115],[207,297],[120,275],[30,295],[200,212],[18,221],[105,192],[189,143],[20,160]]
$(".start").click(function(){
$(this).fadeOut(500);
gameStart();
});
$(".restart").click(function(){
time=60;
$(".timebarbg").children("span").text(time);
$(".timebar").stop().animate({width:time*3},200,"linear");
$(".over").fadeOut(100);
gameStart();
});
$("body").delegate(".lang","click",function(){
clearInterval(timer3);
beat(pos);
$(this).remove();
if(beatWolf){
score+=10;
combo+=1;
$(".combo").stop().fadeIn(500);
$(".combo3,.combo4").text(combo);
$(".combo3,.combo4").stop().animate({
fontSize:"+=12px",
left:"+=3px",
top:"-=10px"
},"fast");
if(combo==5){
combo=0;
score+=20;
timeAdd();
document.getElementById("comboAudio").play();
$(".combo2,.combo4").css({
color:"#e74c3c"
});
$(".combo3,.combo4").stop().animate({
fontSize:"400px",
left:"-=80px",
top:"-=400px",
},"slow");
$(".combo3").animate({
fontSize:"30px",
left:"118px",
top:"413px"
},"fast");
$(".combo4").animate({
fontSize:"30px",
left:"115px",
top:"410px"
},"fast");
$(".combo").fadeOut(1000,function(){
$(".combo2,.combo4").css({
color:"yellow"
});
});
}
}else{
score-=10;
combo=0;
$(".combo3").text(combo);
$(".combo4").text(combo);
$(".combo3").stop().animate({
fontSize:"30px",
left:"118px",
top:"413px"
},"fast");
$(".combo4").stop().animate({
fontSize:"30px",
left:"115px",
top:"410px"
},"fast");
$(".combo").fadeOut(1000);
timeSub();
}
$(".score").text(score)
});
$(".rules").children().children("span").click(function(){
$(".rules").children().slideUp("fast");
});
$(".help").click(function(){
$(".rules").children().slideToggle("fast");
});
function langs(){
clearInterval(timer2);
clearInterval(timer3);
$.each($(".lang"),function(){
$(".lang").remove();
});
timer4=setInterval(function(){
pos=randomNum(0,8)
if(randomNum(0,1)>0){
$lang=creatLang("url('images/h.png')");
beatWolf=true;
}else{
$lang=creatLang("url('images/x.png')");
beatWolf=false;
}
moveIn(arr[pos],$lang);
if(time<0){
clearInterval(timer4);
}
},2000)
}
function gameStart(){
document.getElementById("startAudio").play();
score=0
$(".score").text(score);
timecount();
langs();
}
function timecount(){
timer1=setInterval(function(){
$(".timebar").stop().animate({width:time*3},1000,"linear")
$(".timebarbg").children("span").text(time);
time--;
if(time<0){
clearInterval(timer1);
$(".over").fadeIn(100);
document.getElementById("overAudio").play();
$(".combo").fadeOut(500);
combo=0;
}
},1000);
}
function timeAdd(){
time+=10
if(time>60){
time=60;
}
}
function timeSub(){
time-=5
if(time<0){
time=0;
}
}
function creatLang(str){
$dishu=$("<div class='lang'></div>");
$(".start").after($dishu);
$(".lang").css({
"background": str
});
return $dishu
}
function moveIn(arr,$lang){
var pos=0;
$lang.css({
"left":arr[0]+"px",
"top":arr[1]+"px"
})
timer2=setInterval(function(){
$lang.css("backgroundPosition",pos)
pos-=108;
if(pos<=(-108*5)){
clearInterval(timer2);
timer3=setInterval(function(){
$lang.css("backgroundPosition",pos);
pos+=108;
if(pos==0){
clearInterval(timer3);
$lang.remove();
}
},150)
}
},150)
}
function randomNum(minNum,maxNum){
switch(arguments.length){
case 1:
return parseInt(Math.random()*minNum+1,10);
break;
case 2:
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
break;
default:
return 0;
break;
}
}
function beat(pos){
if(beatWolf){
var $beatDishu=$("<div class='beatlang'></div>");
$beatDishu.css({
"background": "url('images/h.png')"
})
$(".start").after($beatDishu);
document.getElementById("hbeatAudio").play();
}else{
var $beatDishu=$("<div class='beatlang'></div>");
$beatDishu.css({
"background": "url('images/x.png')"
})
$(".start").after($beatDishu);
document.getElementById("xbeatAudio").play();
document.getElementById("subAudio").play();
}
var bpos=-108*6;
$beatDishu.css({
"left":arr[pos][0]+"px",
"top":arr[pos][1]+"px",
"backgroundPosition":bpos+"px 0"
});
var timer5=setInterval(function(){
bpos-=108;
$beatDishu.css({
"backgroundPosition":bpos+"px 0"
})
if(bpos<-1080){
clearInterval(timer5);
$beatDishu.remove();
}
},100)
}
});
