【原】用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>

 

作者：Tony zhao 欢迎访问:找与淘网

本文出处：http://www.cnblogs.com/ytaozhao    本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

 

posted @ 2012-08-09 15:45  Tony Zhao  阅读(860)  评论(0)  编辑  收藏  举报