html，css部分
<!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">
<title>Document</title>
<style media="screen">
#main{
width: 320px;
height: 480px;
background: url(‘img/game_bg.jpg‘) 0 0 no-repeat;
position: relative;
margin: 50px auto;
}
#wolfBox div{
width: 108px;
height: 101px;
cursor: pointer;
position: absolute;
background-repeat: no-repeat;
}
#menu{
position: absolute;
left: 0px;
top:200px;
width: 100%;
}
#menu a{
display: block;
text-decoration: none;
font-size: 36px;
text-align: center;
color:#fd5f02;
font-weight: bold;
text-shadow: 0 2px 5px #fbe850;
}
#timeBar{
width: 182px;
height: 16px;
/*background-color: red;*/
background: url(‘img/progress.png‘) 0 0 no-repeat;
position: absolute;
left:63px;
top:66px;
}
#score{
color: white;
font-size: 20px;
position: absolute;
left: 54px;
top: 10px;
font-family: arial;
}
</style>
</head>
<body>
<div id="main">
<div id="score">0</div>
<div id=timeBar></div>
<div id="wolfBox"></div>
<div id="menu">
<a href="javascript:void(0)">开始</a>
<a href="javascript:void(0)">游戏操作说明</a>
</div>
</div>
js部分
var wolfBox = document.getElementById(‘wolfBox‘);
//位置信息
var posList = [{l:"95px",t:"114px"},
{l:"182px",t:"141px"},
{l:"14px",t:"160px"},
{l:"15px",t:"221px"},
{l:"101px",t:"192px"},
{l:"197px",t:"213px"},
{l:"28px",t:"294px"},
{l:"116px",t:"274px"},
{l:"204px",t:"296px"}];
var autoPos = [];
var menu = document.getElementById(‘menu‘);
var beginBtn =menu.children[0];
var score = document.getElementById(‘score‘);
var timeBar = document.getElementById(‘timeBar‘);
var creTime,timer;
//计分
var count = 0;
beginBtn.onclick = function(){
// menu.style.left = 9999 + "px";
menu.style.display = "none";
creTime = setInterval(createWolf,800);
timer = setInterval(time, 50);
}
var perWidth = timeBar.offsetWidth;
//进度条
function time(){
perWidth--;
if(perWidth<=0){
//当进度条走完，清掉新建wolf的计时器
clearInterval(creTime);
//判断页面是否还存在wolf,不存在才清掉timer
if(wolfBox.children.length==0){
clearInterval(timer)
alert("over");
}
}
timeBar.style.width = perWidth + "px";
}
//生成wolf
function createWolf(){
//生成盒子
var wolf = document.createElement(‘div‘);
//放灰太狼还是小灰灰
var who = Math.random()>0.82?"x":"h";
// if(who=="x"){
// wolf.style.backgroundImage = "url(‘img/x.png‘)"
// }else{
// wolf.style.backgroundImage = "url(‘img/h.png‘)"
// }
wolf.style.backgroundImage = "url(‘img/"+who+".png‘)";
//出现的位置
var rnd = Math.floor(Math.random()*9);
//查询是否在之前3次出现过
while(autoPos.indexOf(rnd)>-1) {
rnd = Math.floor(Math.random()*9);
}
autoPos.push(rnd);
if(autoPos.length>=4){
autoPos.shift();
}
wolf.style.left = posList[rnd].l;
wolf.style.top = posList[rnd].t;
wolfBox.appendChild(wolf);
var index = 0;
//是否点击wolf的标志
var clickFlag = true;
//点击事件
wolf.onclick = function(){
//防止可以持续点击
wolf.onclick = null;
index = 5;
//点击灰太狼加10，小灰灰减10
if(who=="h"){
//字符串
// score.innerHTML +=10;
count+=10;
}else{
count-=10;
}
score.innerHTML = count;
clickFlag = false;
}
//判断是否走到第6张的标志位
var autoFlag = false;
var upTime = setInterval(function() {
//只有没有点击wolf并且走到第六张的时候
//index--(向下走)，其他情况都是
//index++(往上)
if(clickFlag&&autoFlag){
index--;
}else{
index++;
}
if(index>=9||index<=0){
clearInterval(upTime);
wolfBox.removeChild(wolf);
}
//当走到第6张的时候
if(index>=5){
autoFlag = true;
}
wolf.style.backgroundPosition = -index*108 +"px 0px";
}, 100);
}
</script>
</body>
</html>
下载地址https://pan.baidu.com/s/1jI2ofGy