最近時間比較充足，所以學習javascript，沒事的時候寫了一個小遊戲，測視力，有可能很多朋友都玩過，我也寫一下，大家共同分享一下，只是爲了學習。
不得不承認，還是有很多需要改進的地方的，但是都是爲了學習嗎，有時間了，就抓緊改一下。大神別笑，哈哈。
效果圖如下：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
margin: 0 auto;
width: 605px;
height: 400px;
/*background-color: #a6ff7f;*/
}
#matter{
position: absolute;
width: 400px;
height: 400px;
float: left;
/*background-color: #00bcd4;*/
}
#demand{
position: absolute;
left: 787px;
top: 20px;
width: 200px;
height: 100px;
/*background-color: antiquewhite;*/
}
#demand2{
position: absolute;
left: 787px;
top: 100px;
width: 200px;
height: 100px;
/*background-color: antiquewhite;*/
}
#m1,#m2,#m3,#m4{
width: 197px;
height: 197px;
margin-top: 2px;
margin-left: 2px;
background-color: yellow;
display: none;
float: left;
}
#mm1,#mm2,#mm3,#mm4,#mm5,#mm6,#mm7,#mm8,#mm9{
width: 131px;
height: 131px;
margin-top: 2px;
margin-left: 2px;
background-color: yellowgreen;
float: left;
display: none;
}
#mmm1, #mmm2, #mmm3, #mmm4, #mmm5, #mmm6, #mmm7, #mmm8, #mmm9, #mmm10, #mmm11, #mmm12, #mmm13, #mmm14, #mmm15, #mmm16{
width: 97px;
height: 97px;
margin-top: 2px;
margin-left: 2px;
background-color: blue;
float: left;
display: none;
}
</style>
</head>
<body>
<div class="box">
<div id="matter">
<div id="m1" onclick="m(1)"></div>
<div id="m2" onclick="m(2)"></div>
<div id="m3" onclick="m(3)"></div>
<div id="m4" onclick="m(4)"></div>
<div id="mm1" onclick="mm(1)"></div>
<div id="mm2" onclick="mm(2)"></div>
<div id="mm3" onclick="mm(3)"></div>
<div id="mm4" onclick="mm(4)"></div>
<div id="mm5" onclick="mm(5)"></div>
<div id="mm6" onclick="mm(6)"></div>
<div id="mm7" onclick="mm(7)"></div>
<div id="mm8" onclick="mm(8)"></div>
<div id="mm9" onclick="mm(9)"></div>
<!--<div id="m1"></div>-->
<!--<div id="m1"></div>-->
<div id="mmm1" onclick="mmm(1)"></div>
<div id="mmm2" onclick="mmm(2)"></div>
<div id="mmm3" onclick="mmm(3)"></div>
<div id="mmm4" onclick="mmm(4)"></div>
<div id="mmm5" onclick="mmm(5)"></div>
<div id="mmm6" onclick="mmm(6)"></div>
<div id="mmm7" onclick="mmm(7)"></div>
<div id="mmm8" onclick="mmm(8)"></div>
<div id="mmm9" onclick="mmm(9)"></div>
<div id="mmm10" onclick="mmm(10)"></div>
<div id="mmm11" onclick="mmm(11)"></div>
<div id="mmm12" onclick="mmm(12)"></div>
<div id="mmm13" onclick="mmm(13)"></div>
<div id="mmm14" onclick="mmm(14)"></div>
<div id="mmm15" onclick="mmm(15)"></div>
<div id="mmm16" onclick="mmm(16)"></div>
</div>
<div id="demand"></div>
<div id="demand2"></div>
</div>
</body>
<script type="text/javascript">
var time_11=20;
function time_1(){
time_11--;
document.getElementById("demand2").innerHTML="遊戲倒計時:"+time_11+"秒";
if(time_11==0)
{
if(score<16)
{
alert("遊戲結束"+"你的分數爲"+score+"\r\n"+"請注意您的眼睛");
}
else {
alert("遊戲結束"+"你的分數爲"+score+"\r\n"+"您的眼睛還不錯哦");
}
clearInterval(tt);
}
}
var tt=setInterval(time_1,1000);
var i=1;
var score=0;
var a=parseInt(Math.random()*255);
var b=parseInt(Math.random()*255);
var c=parseInt(Math.random()*255);
for(i=1;i<=4;i++){
document.getElementById("m"+i+"").style.display="block";
document.getElementById("m"+i+"").style.backgroundColor="rgba("+a+","+b+","+c+","+"1)";
}
var test=parseInt(Math.random()*4+1);
document.getElementById("m"+test+"").style.backgroundColor="rgba("+a+","+b+","+c+","+"0.9)";
function m(t){
if(t==test)
{
score+=1;
document.getElementById("demand").innerHTML="當前遊戲得分爲:"+score;
a=parseInt(Math.random()*255);
b=parseInt(Math.random()*255);
c=parseInt(Math.random()*255);
for( i=1;i<=4;i++){
document.getElementById("m"+i+"").style.display="none";
}
for(var j=1;j<=9;j++){
document.getElementById("mm"+j+"").style.display="block";
document.getElementById("mm"+j+"").style.backgroundColor="rgba("+a+","+b+","+c+","+"1)"
}
test=parseInt(Math.random()*9+1);
document.getElementById("mm"+test+"").style.backgroundColor="rgba("+a+","+b+","+c+","+"0.9)";
}
}
function mm(t2){
if(t2==test){
score+=2;
document.getElementById("demand").innerHTML="當前遊戲得分爲:"+score;
a=parseInt(Math.random()*255);
b=parseInt(Math.random()*255);
c=parseInt(Math.random()*255);
for( i=1;i<=9;i++){
document.getElementById("mm"+i+"").style.display="none";
}
for(var j=1;j<=16;j++){
document.getElementById("mmm"+j+"").style.display="block";
document.getElementById("mmm"+j+"").style.backgroundColor="rgba("+a+","+b+","+c+","+"1)";
}
test=parseInt(Math.random()*16+1);
document.getElementById("mmm"+test+"").style.backgroundColor="rgba("+a+","+b+","+c+","+"0.9)";
}
}
function mmm(t3){
if(t3==test){
score+=3;
document.getElementById("demand").innerHTML="當前遊戲得分爲:"+score;
a=parseInt(Math.random()*255);
b=parseInt(Math.random()*255);
c=parseInt(Math.random()*255);
for( i=1;i<=16;i++){
document.getElementById("mmm"+i+"").style.backgroundColor="rgba("+a+","+b+","+c+",1)";
}
test=parseInt(Math.random()*16+1);
document.getElementById("mmm"+test+"").style.backgroundColor="rgba("+a+","+b+","+c+","+"0.9)";
}
}
document.getElementById("demand").innerHTML="當前遊戲得分爲:"+score;
</script>
</html>