- it技术
- 测试眼力网页游戏
<!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
: 0px
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
: 0px
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
);
}
.img
{
}
</style
>
</head
>
<body
>
<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
>
</br
>
<div
class="main">
<ul
>
<li
class="list1"><img id
="img" src
="234" class="" onerror
=imgURL()></li
>
</ul
>
</div
>
<button
>点击开始游戏
</button
>
</div
>
<script language
="javascript">
var a
="img/1.png";
var b
='img/11.png';
function
imgURL()
{
var c
=Math
.random();
if(c
>=0.5)
{document
.images
.img
.src
=a
;document
.images
.img
.class=1;}
else
{document
.images
.img
.src
=b
;document
.images
.img
.class=11;}
}
</script
>
<script type
="text/javascript" src
="js/game.js"></script
>
</body
>
</html
>
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 back
=document
.getElementById('back');
var aa
=document
.images
.img
.class;
var ad
=document
.images
.img
.src
;
btn
.onclick
=function()
{
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
<=12)
{alert('Game Over!'+' '+'等级：正常视力');}
else if(n
<=20)
{alert('Game Over!'+' '+'等级：天兵天将');}
else
{alert('Game Over!'+' '+'等级：悟空转世');}
back
.style
.display
='block';
}
},10);
btn
.remove();
li_1
.remove();
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+'%';
if(aa
==11)
{ newImg
.src
='img/22.png';}
else if(aa
==1)
{ newImg
.src
='img/2.png';}
newLi
.style
.backgroundColor
='rgb('+rand(50,255)+','+rand(50,255)+','+rand(50,255)+')';
}
var x
=rand(0,level
*level
-1);
var imgsl
=document
.querySelectorAll('img');
imgsl
[x
].src
=ad
;
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
);
}
