console
window.onload=function(){
var option = byclassName(document,'option')[0];
var strong = bytagName(option,'strong');
var div = bytagName(option,'div')[0];
var btn = bytagName(option,'button')[0];
var ali = bytagName(option,'li');
var speed = 2000;
var sum = 0;
var len = randoms();
var long = 5;
var str = strong[0].innerHTML;
var score = strong[1].innerHTML;
btn.onclick=function(){
time();
}
for(var i=0;i<ali.length;i++){
ali[i].onclick=function(){
var opj = this;
score++;
strong[1].innerHTML=score;
var url = opj.style.backgroundImage;
clearInterval(opj.timer);
opj.style.backgroundImage='url(./images/icon/h6.png)';
shake(opj,'left',0,function(){
opj.style.top=0;
opj.style.backgroundImage=url;
});
}
}
function time(){
if(speed>280){speed-=20;}
console.log(speed);
setTimeout(function(){
move(ali[len[sum]],'top',long,600,function(){
shake(div,'top',0);
ali[len[sum]].style.top=0;
str--;strong[0].innerHTML=str;
if(str<=0&&score<=50){
alert('初出茅庐，重新开始吧！');location.reload();
}else if(str<=0&&score<=79){
alert('继续加油，决胜千里之外！');location.reload();
}else if(str<=0&&score>=80){
alert('还有这种操作？！');
alert('墙我都不服，就服你！大佬再来一局吧！');
location.reload();
}
});
sum++;if(sum>=len.length){sum=0;len = randoms();if (long<10) {long++;};}
time();
},speed);
}
function randoms(){
var len = [];
for(var i =0;i<ali.length;i++){
len.push(i);
}
len.sort(function(a,b){
return Math.random()-0.5;
});
return len;
}
}
<title>Document</title>
</head>
<body>
<div class='option'>
<p>开始游戏后点击表情！</p>
<button>开始游戏</button>
<div>
<span class='count count1'>机会:<strong>10</strong></span>
<span class='count count2'>计分:<strong>0</strong></span>
<div>
<ul>
<li style="background:url(./images/icon/b1.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z1.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b13.png)no-repeat center;background-size:90px;"></li>
</ul>
<ul>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b2.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z2.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z14.png)no-repeat center;background-size:90px;"></li>
</ul>
<ul>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b3.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z3.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b15.png)no-repeat center;background-size:90px;"></li>
</ul>
<ul>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b4.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z4.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z16.png)no-repeat center;background-size:90px;"></li>
</ul>
<ul>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b5.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z5.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b17.png)no-repeat center;background-size:90px;"></li>
</ul>
<ul>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z18.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b6.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z6.png)no-repeat center;background-size:90px;"></li>
</ul>
<ul>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b1.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b7.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z7.png)no-repeat center;background-size:90px;"></li>
</ul>
<ul>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z12.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b8.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z8.png)no-repeat center;background-size:90px;"></li>
</ul>
<ul>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b15.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b9.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z9.png)no-repeat center;background-size:90px;"></li>
</ul>
<ul>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z16.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/b10.png)no-repeat center;background-size:90px;"></li>
<li style="background:url(http://my-code.nos-eastchina1.126.net/jsrun/images/game/z10.png)no-repeat center;background-size:90px;"></li>
</ul>
</div>
</div>
</div>
<script src='http://my-code.nos-eastchina1.126.net/jsrun/warehouse.js'></script>
.option{width: 1200px;height: 600px;margin: 0 auto;text-align: center;}
.option p{width: 100%;font-size: 20px;color: #000;}
.option div{width: 900px;height: 500px;margin: 20px auto;background-color: #ccc;position: relative;}
.option div div{overflow: hidden;}
.option div span{position:absolute;width: 70px;height: 40px;background-color: #EFE4B0;left: -80px;top: 0;line-height: 40px;}
.option div .count2{top: 50px;}
.option div ul{width: 80px;height: 80px;margin: 0;
padding: 0;list-style: none;
float: left;margin-left: 7px;position: relative;top: -80px;
}
.option div ul li{width: 100%;height: 100%;position: absolute;top:0;left: 0;z-index: 999;}