|
我一直在寻找一种方法来锻炼自己的注意力，我在网上搜了一下可以通过玩一些类似于找茬游戏、连连看、射击游戏等来锻炼自己的注意力。不过我想自己动手来制作一个小网页游戏来锻炼自己的注意力。制作一个小游戏如果用flash来制作的话挺方便的，但是flash的制作软件太大而且不免费；java是个不错的选择，不过我还不太熟悉它。所以干脆用记事本编一个网页，然后通过用javascript来控制达到人机交互的目的。 由于我是一个业余编程爱好者，没经过系统的训练，代码中确实有许多冗杂以及不符合规范的地方（其中有一段代码有冗余是因为我起初的想法与后来的打算不符，但又懒得去多修改几行代码，所以直接修改那个变量的赋值而造成的），但我比较懒，所以专业人士请勿见怪^_^ 原文中是这样描述的：我国年轻的数学家杨乐、张广厚，小时候都曾采用快速做习题的办法，严格训练自己集中注意力。这里给大家介绍一种在心理学中用来锻炼注意力的小游戏。在一张有25个小方格的表中，将1-25的数字打乱顺序，填写在里面，然后以最快的速度从1数到25，要边读边指出，同时计时。研究表明，7-8岁儿童按顺序导找每张图表上的数字的时间是30-50秒，平均40-42秒，正常成年人看一张图表的时间大约是25-30秒，有些人可以缩短到十几秒。你可以自己多制做几张这样的训练表，每天训练一遍，相信你的注意力水平一定会逐步提高。 从规则上看，从1-25的数字要打乱顺序，要想通过javascript来实现元素顺序的随机化就必须使用随机函数Math.random() 来实现，但随机函数生成的是0-1之间的小数，所以还要一个取整函数，javascript的Math对象里面有floor()和round()来实现，不过二者有所区别，区别在于Math.floor(arg)是取不大于arg的整数，而round(arg)是四舍五入，因此做法也有所不同。 然后是如何产生一个打乱了顺序的1-25的序列的问题。如果用随机函数产生1-25之间的书的话，中间可能会有重复，不过也好解决，那就是先定义一个数组，把每次产生的合格（这里的合格是指该数是不与其他已经产生的数之前已经定好的数相同的数）的数都放到数组里，每产生一个数就与之前已经定好的数一个一个比较，如果有重复，那么就重新再生成新的数；如果不重复，则将其存放到数组里面。上述所讲的方法有一大缺点，那就是每产生一个数都要与以前产生的数比较，而且我们不能预测要多少次循环才能够产生合格的数，产生合格数的次数是一个离散型随机变量n，其概率为F(n)=(1/25)*(24/25)^(n-1)，n可以从1取到正无穷大，嘿嘿！所以就有了方案二——抽签法，即先用一个数组来按顺序存放1-25这些数，接着就用随机函数产生的随机数来决定取第几个数，将取得的数放进一个新的数组中，然后将其从原数组中删除，删除数组元素可以用数组对象的splice()方法来删除，不过我还是用了最为古老的方法（具体见代码部分）。 其余更细致的代码讲解我就不多说了，这个网页的使用方法是用鼠标点击数字，如果点击的数字是对的，则该数字消失，如果不对则什么都不发生，你也可以提高点难度，不去点击数字直接看这张数表，如果把1-25按顺序全部找出来了就点击一下键盘上的除空格键和某些具有特定功能的键以外的任意键或者用鼠标点击一下record按钮，然后在弹出的警告框里的数字便是你所用的时间（其实网页里我所用的计时方法也是相当冗余无聊的，其实根本就不用新建一个Date对象，有了setTimeout或setInterval，只需要定义一个变量作为计数器就行了，我的这个代码里还有一个相当无聊的地方就是用focus和onblur不断使按钮始终处于获得焦点的状态，这样不太好，完全可以把这部分代码删掉，然后将n.onkeydown改成document.onkeydown，但是我很懒，你知道的）。 下面就是具体的代码(将代码复制到txt文件，然后将后缀txt改为html，用谷歌或火狐浏览器打开就行了)： | <html>
| | <body style="cursor:url('1.cur');">
| | <div id="k">container</div>
| | </body>
| | <script type="text/javascript">
| | try
| | {
| | k.innerHTML="";
| | k.style.fontSize=44;
| |
| | var i;
| | var j;
| | var a;
| | var b;
| | var test;
| | var tempa;
| | var tempb;
| | var s=new Array();
| | var u=new Array();
| | for(a=0;a<5;a++)
| | {
| | for(b=0;b<5;b++)
| | {
| | s[a*5+b]=a*5+b+1;
| | }
| | }
| | for(i=0;i<5;i++)
| | {
| |
| | for(j=0;j<5;j++)
| | {
| | m=document.createElement("div");
| | k.appendChild(m);
| | m.id="t"+i+j;
| | tempa=Math.round((25-i*5-j)*Math.random()+0.5)-1;
| | m.innerHTML=s[tempa];
| |
| | if(s[tempa]<10)
| | {
| | m.innerHTML="0"+s[tempa];
| |
| | }
| |
| | for(;tempa<(25-i*5-j-1);tempa++)
| | {
| | s[tempa]=s[tempa+1];
| |
| | }
| |
| | m.style.position="absolute";
| | m.style.left=j*72+285;
| | m.style.top=i*72;
| | m.onmouseover=dongzuo1;
| | m.onmouseout=dongzuo2;
| | m.onmousedown=dongzuo3;
| | m.indexd=i*5+j;
| | u[m.indexd]=m;
| | m.times=10;
| | m.pb=0;
| |
| | }
| |
| | }
| | function dongzuo1()
| | {
| | if(this.pb==0)
| | {
| | this.style.fontSize=72;
| |
| | }
| | }
| | function dongzuo2()
| | {
| | if(this.pb==0)
| | {
| | this.style.fontSize=44;
| | }
| | }
| | m=document.createElement("div");
| | k.appendChild(m);
| | m.style.position="absolute";
| | m.style.top=430;
| | setInterval("m.innerHTML=(new Date()).toString();",1);
| | var n=document.createElement("input");
| | n.type="button";
| | k.appendChild(n);
| | n.style.position="absolute";
| | n.style.left=300
| | n.style.top=530;
| | n.value="record";
| | n.style.width=300;
| | n.style.height=100;
| | n.style.fontSize=72;
| | n.accessKey="p";
| | a=1;
| |
| | test=(new Date()).getTime();
| |
| | n.focus();
| | n.onblur=function ()
| | {
| | n.focus();
| | }
| | n.onmousedown=function ()
| | {
| | if(a==0)
| | {
| | test=(new Date()).getTime();
| | a=1;
| | }
| | else
| | {
| | tempa=(new Date()).getTime();
| | a=1;
| | alert((tempa-test)/1000+"s");
| | window.location.reload();
| |
| | }
| |
| | }
| | n.onkeydown=function ()
| | {
| | if(a==0)
| | {
| | test=(new Date()).getTime();
| | a=1;
| | }
| | else
| | {
| | tempa=(new Date()).getTime();
| | a=1;
| | alert((tempa-test)/1000+"s");
| | window.location.reload();
| |
| | }
| |
| | }
| | var arg1;
| | function texiao(arg1)
| | {
| | if(arg1.times>0)
| | {
| | try
| | {
| | arg1.style.fontSize=100*arg1.times/10;
| | arg1.style.color="rgba(0,255,0,"+arg1.times/10+")";
| | --(arg1.times);
| | setTimeout("texiao(u["+arg1.indexd+"]);",50);
| | }
| | catch(err)
| | {
| | alert("请使用支持CSS3的浏览器，如：谷歌浏览器");
| | }
| | }
| | else
| | {
| | arg1.innerHTML="";
| | }
| | }
| | tempb=1;
| | function dongzuo3()
| | {
| | if(Number(this.innerHTML)==tempb)
| | {
| | this.pb=1;
| | texiao(this);
| | ++tempb;
| | }
| | if(tempb==26)
| | {
| | n.onkeydown();
| |
| | }
| | }
| | }
| | catch(err)
| | {
| | alert(err);
| | }
| | </script>
| | </html> |
（代码的第二行有一个”1.cur“，这是一个鼠标光标的图片，可以在网上随便找一个*.cur下载下来，然后将它与该网页放到同一个文件夹中，将cur文件的文件名更名为1.cur即可) |
