【原】用javascript实现一个锻炼注意力的小游戏

游戏说明：

选择框内文字正确的字体颜色，累积计分。本游戏可以锻炼反应能力，并且对集中注意力起到一定的训练效果。

运行效果（未作UI修饰，界面一般）：

**请将以下代码直接复制到记事本中，把后缀改为*.html运行**

<html>
<head>
<style>
#gamepanel{
width:200px;
height:300px;
border:solid black 2px;
float:left;
}
#uppanel{
height:70px;
border-bottom:solid 1px black;
}
#colorbrick{
border:solid 1px black;
margin-top:20px;
margin-left:40px;
width:100px;
height:30px;
text-align:center;
color:#3f8f3e;
font-weight:bold;
font-size:25px;
}
#score{
width:100px;
height:70px;
border: solid black 2px;
border-left:none;
float:left;
}
li{
font-size:20px;
margin-bottom:10px;
border:1px solid grey;
width:100px;
}
li:hover{
backgroud-color:#324ddf;

}
#restart{
margin-top:50px;
cursor:hand;
font-size:30px;
background-color:red;
}
</style>
<script>
window.onload=reloadBrick;
function reloadBrick()
{
   var brick=document.getElementById("colorbrick");
   var textcolors=["green","black","purple","red","blue"];
   var textIndex = Math.floor(Math.random()*5);
   brick.innerHTML=textcolors[textIndex];
   var fontcolorIndex=Math.floor(Math.random()*5);
   brick.style.color=textcolors[fontcolorIndex];
}

myscore=0;
total=0;

function option_click(color)
{
   total +=1;
   var correctColor=document.getElementById("colorbrick").style.color;
   if(correctColor==color)
  {
     myscore+=1;
  }
document.getElementById("total").innerHTML="Total:"+total;
document.getElementById("myscore").innerHTML="My Score:"+myscore;  
reloadBrick();
}

</script>
</head>
<body>
<div id="gamepanel">
<div id="uppanel">
<div id="colorbrick">ggggg</div>
</div>
<div id="downpanel">
<div id="options">
<p>Select the font-color: </p></br>
<ul>
<li onclick="option_click('black')" onmouseover="this.style.cursor='hand'; this.style.backgroundColor='#dfeeef'" onmouseout="this.style.backgroundColor='white'">black</li>
<li  onclick="option_click('red')" onmouseover="this.style.cursor='hand'; this.style.backgroundColor='#dfeeef'" onmouseout="this.style.backgroundColor='white'">red</li>
<li onclick="option_click('green')" onmouseover="this.style.cursor='hand'; this.style.backgroundColor='#dfeeef'" onmouseout="this.style.backgroundColor='white'">green</li>
<li onclick="option_click('blue')" onmouseover="this.style.cursor='hand'; this.style.backgroundColor='#dfeeef'" onmouseout="this.style.backgroundColor='white'">blue</li>
<li  onclick="option_click('purple')" onmouseover="this.style.cursor='hand'; this.style.backgroundColor='#dfeeef'" onmouseout="this.style.backgroundColor='white'">purple</li>
</ul>
</div>
</div>
</div>
<div id="score">
<div id="total">Total:0</div>
<div id="myscore">My Score:0</div>
<div  id="restart"onclick=" location.reload()">Restart</div>
</div>

</body>
</html>