演示网站 大家来找茬手机小游戏
编写代码
</head>
<body>
<!--1.两张图片 预加载好;
2.布局-->
<div id="back">
<h1><a href="">重新开始</a></h1>
</div>
<div class="container">
<div class="left"><span>剩余时间: </span><span id="sec"> 30 </span> s </div>
<div class="right"><span>分数: </span><span id="score">0</span></div>
<div class="main">
<ul>
<li class="list1"><img src="img/2.png"></li>
</ul>
</div>
<button>点 击 开 始 游 戏</button>
<button id="turnOff">护眼模式</button>
</div>
<script type="text/javascript" charset="utf-8">
var btn=document.querySelector('button');
var z=30.00;
var sec=document.getElementById('sec');
var uls=document.querySelector('ul');
var li_1=document.getElementsByClassName('list1')[0];
var score=document.getElementById('score');
var level=1;
var n=0;
var turnOff=document.getElementById('turnOff');
turnOff.onclick=function(){
document.body.style.background='rgb(199,237,204)';
turnOff.innerHTML='普通模式';
turn();
}
function turn(){
turnOff.onclick=function(){
document.body.style.background='';
turnOff.innerHTML='护眼模式';
turnOff.onclick=function(){
document.body.style.background='rgb(199,237,204)';
turnOff.innerHTML='普通模式';
turn();
}
}
}
var back=document.getElementById('back');
btn.onclick=function(){
// 1.计时器
var timer=setInterval(function(){
z-=0.01;
z=z.toFixed(2);
sec.innerHTML=z;
if (z<=0) {
clearInterval(timer);
if (n<8) {
alert('GAME OVER!'+' '+'等级:睁眼瞎');
}else if (n>=20) {
alert('GAME OVER!'+' '+'等级:超神');
}else if (n>=12) {
alert('GAME OVER!'+' '+'等级:火眼金睛');
}else{
alert('GAME OVER!'+' '+'等级:高度近视');
}
back.style.display='block';
}
},10)
// 2.点击按钮消失,第一个li消失
btn.remove();
li_1.remove();
turnOff.remove();
// 3.添加4个li>img
app();
function app(){
level+=1;
for (var i=0;i<level*level;i++) {
var newLi=document.createElement('li');
uls.appendChild(newLi);
var newImg=document.createElement('img');
newLi.appendChild(newImg);
newLi.style.width=100/level+'%';
newLi.style.float='left';
newImg.style.display='block';
newImg.style.width=100+'%';
newImg.src='img/1.png';
newLi.style.backgroundColor='rgb('+rand(50,255)+','+rand(50,255)+','+rand(50,255)+')';
}
var x=rand(0,level*level-1); // 赋予一个随机房祖名下标
var imgs1=document.querySelectorAll('img');
imgs1[x].src='img/2.png'; // 随机一张图片变成房祖名
var li=document.querySelectorAll('li');
li[x].onclick=function(){
for (var i=0;i<level*level;i++) {
li[i].remove(this);
}
n+=1;
score.innerHTML=n;
if (level>10) {
level=10;
}
app();
}
}
}
// 随机函数
function rand(min,max){
return Math.round(Math.random()*(max-min)+min);
}
</script>
</body>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
