视觉训练游戏

打算做一系列视觉训练的小游戏，这是第一个，稚嫩的很，高手见笑！

<html>

<head>

div {display:inline;}

#divMove {position:absolute; background-color:#fff; width:150px; height:100px; margin:6px auto; display:none;z-index:3; filter: alpha(opacity=75);}

</style>

var arr = new Array();

var Rcount=0,Dcount=0,Icount=0,Ecount=0,Vcount=0,MaxN=0;

var Level = 10;

function Getstart()

{

Rcount=0;

Dcount=0;

Icount=0;

Ecount=0;

Vcount=0;

GetTextNode();

createTable();

ShowCount();

}

//动态创建Table

function createTable()

{

divcontent.innerHTML="";

var mytable = document.createElement("table");

var mytablebody = document.createElement("tbody");

for(var i=0;i<Level;i++)

{

var current_row = document.createElement("tr");

current_row.setAttribute("align","center");

for(var j=0;j<Level;j++)

{

var current_cell = document.createElement("td");

current_cell.id = "td"+i;

current_text = document.createTextNode(arr[Level*i+j]);

if(arr[Level*i+j] == "R")

{

current_cell.style.backgroundColor="#966";

}

else if(arr[Level*i+j] == "D")

{

current_cell.style.backgroundColor="#969";

}

else if(arr[Level*i+j] == "I")

{

current_cell.style.backgroundColor="#069";

}

else if(arr[Level*i+j] == "V")

{

current_cell.style.backgroundColor="#699";

}

current_cell.appendChild(current_text);

current_row.appendChild(current_cell);

}

mytablebody.appendChild(current_row);

}

mytable.appendChild(mytablebody);

divcontent.appendChild(mytable);

var Vlong = Level*30;

mytable.setAttribute("width",Vlong);

mytable.setAttribute("height",Vlong);

mytable.setAttribute("border","0");

mytable.setAttribute("align","center");

mytable.setAttribute("borderColorDark","#666");

mytable.setAttribute("borderColorLight","#999");

mytable.setAttribute("cellSpacing","0");

mytable.style.cursor="pointer";

mytable.style.backgroundColor="#999";

mytable.style.fontSize="24";

}

//将要填充表格内容存入数组

function GetTextNode()

{

for(var i=0;i<Level*Level; i++)

{

var N = GetRandom()

while(N == 0)

{

N = GetRandom();

}

switch(N)

{

case 1:

arr[i] = "R";

Rcount+=1;

break;

case 2:

arr[i] = "D";

Dcount+=1;

break;

case 3:

arr[i] = "I";

Icount+=1;

break;

case 4:

arr[i] = "V";

Vcount+=1;

break;

default:

arr[i] = "E";

Ecount+=1;

break

}

//生成随机数

function GetRandom()

{

var n = Math.random();

var r = n.toString().substr(5,1);

var randomNum = Math.round(r/2);

return randomNum;

}

//显示

function ShowCount()

{

divR.innerHTML=Rcount;

divD.innerHTML=Dcount;

divI.innerHTML=Icount;

divV.innerHTML=Vcount;

divE.innerHTML=Ecount;

divMax.innerHTML=MaxCount();

}

//最大数

function MaxCount()

{

var str = "个数最多的是 ";

var otemp;

MaxN = Rcount;

otemp = "R:";

if(MaxN < Dcount){

MaxN = Dcount;otemp = "D:";

}

if(MaxN < Icount){

MaxN = Icount;otemp = "I:";

}

if(MaxN < Vcount){

MaxN = Icount;otemp = "V:";

}

if(MaxN < Ecount){

MaxN = Ecount;otemp = "E:";

}

return str + otemp + MaxN;

}

//鼠标跟随

function MouseFollow()

{

if(divMove.style.display=="inline")

{

var x = window.event.x;

var y = window.event.y;

//coordinate.innerHTML= x+","+y;

divMove.style.top = y+10;

divMove.style.left = x+10;

}

</script>

</head>

<h2 align=center>视觉训练游戏</h2>

<p>你能一眼看出那个字母或那个颜色的个数最多吗？吸引视觉注意的因素有：数量、布局、颜色。<input type=button value="再试" onclick="Getstart()">

</p>

<ul>

<li>

R: <div id=divR></div></li>

<li>

D: <div id="divD"></div></li>

<li>

I: <div id="divI"></div></li>

<li>

V: <div id="divV"></div></li>

<li>

E: <div id="divE"></div></li>

</ul>

</div>

</body>

</html>

posted on 2006-07-12 13:19 Lee-hp 阅读(517) 评论(0) 收藏举报

努力加载评论中...

刷新页面返回顶部

Lee-hp

视觉训练游戏

导航

公告