【原】用javascript实现一个锻炼注意力的小游戏
2012-08-09 15:45
513 查看
游戏说明:
选择框内文字正确的字体颜色,累积计分。本游戏可以锻炼反应能力,并且对集中注意力起到一定的训练效果。运行效果(未作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 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
相关文章推荐
- 【JavaScript】canvas实现一个小游戏
- JavaScript实现一个空中避难的小游戏
- javascript实现一个网页加载进度loading
- 第一次用javascript写了一个不用刷新就能实现--用户名验证的例子
- Javascript 实现一个原生的路由系统
- JavaScript中,prototype对象是实现面向对象的一个重要机制
- 【JavaScript】javascript的eval函数实现的一个简单计算器
- Javascript实现一个进度条
- 实现一个简单的Javascript级联下拉菜单
- JavaScript强化教程 —— JS实现一个基本的打地鼠游戏
- 发现一个好的javascript网站(http://www.softcomplex.com/products/tigra_menu/demo/steps/)有关于用JAVASCRIPT实现下拉菜单。
- 自己尝试写的一个javascript简易版本的《别踩白块儿》小游戏
- javascript实现的一个简单统计图类
- JavaScript判断一个URL链接是否有效的实现方法
- JavaScript实现MVVM之我就是想监测一个普通对象的变化
- javascript实现的一个信息提示的小功能/
- JavaScript判断一个URL链接是否有效的实现方法
- JavaScript分步实现一个出生日期的正则表达式
- javascript实现2048小游戏
- 基于javascript实现泡泡大冒险网页版小游戏