游戏说明：
选择框内文字正确的字体颜色，累积计分。本游戏可以锻炼反应能力，并且对集中注意力起到一定的训练效果。
运行效果（未作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>
本文出处：http://www.cnblogs.com/ytaozhao 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
