<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<title>大家来找茬手机小游戏</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#back{
width: 300px;
height: 500px;
background: #000;
margin: 100px auto;
padding: 50px 50px 0;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
right: 0;
opacity: 0.8;
display: none;
}
h1{
text-align: center;
padding-top: 200px;
font-size: 50px;
}
h1 a{
color: #fff;
}
.container{
position: relative;
width: 300px;
height: 500px;
background: #aeaeae;
margin: 100px auto;
padding: 50px 50px 0;
}
.left{
float: left;
}
.right{
float: right;
}
.main{
width: 300px;
margin: 80px auto 20px;
background: orange;
text-align: center;
}
.list1{
width: 100%;
}
.list1>img{
width: 100%;
display: block;
}
button{
width: 200px;
margin: 0 auto;
height: 40px;
border: 0;
border-radius: 10px;
background: linear-gradient(#59AD42,#319428);
color: #fff;
font-size: 20px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
button:hover{
background: linear-gradient(#319428,#59AD42);
}
#turnOff{
width: 80px;
height: 40px;
display: block;
position: absolute;
background: transparent;
}
</style>
</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>
大家来找茬，找香蕉HTML5源码
版权申诉
5星 · 超过95%的资源 120 浏览量
2022-03-19
10:14:31
上传
评论
收藏 16KB RAR 举报 
43.rar （3个子文件） 
43 img 
1.png 7KB 2.png 7KB
index.html 4KB资源评论
暁之車2022-09-04资源使用价值高，内容详实，给了我很多新想法，感谢大佬分享~
reg183
- 粉丝: 1811
- 资源: 1万+
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减3.57元 开通VIP
