图片拼图记忆力测试游戏，网页+JS版


答案：记忆力测试游戏，网页+JS版，规则：图被分割成15块。 
　　每次随机给出一块，在问号区域中找到它的位置并单击该位置。每选对一个区域得一分，得15分才算获胜，每次游戏只有15次机会。 
<html> 
<head> 
<title>记忆测试</title> 
<style> 
.20pt{font-size:20pt;color:#de3076} 
</style> 
<script language="JavaScript"> 
<!-- 
N = (navigator.appName.indexOf("Netscape")!=-1); 
M = (navigator.appName.indexOf("Microsoft")!=-1); 
Vis = new Array(); 
Vis[0] = (M) ? "hidden" : "hide"; 
Vis[1] = (M) ? "visible" : "show"; 
function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd) { 
bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""; 
DivTyp = (M) ? "<DIV" : "<LAYER" 
if (M) { Styl=" ID="+divId+" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkCol+";visibility:"+Vis[visb]+";z-index:"+zInd+"'>"; } 
if (N) { Styl=" ID="+divId+" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkCol+" visibility="+Vis[visb]+" z-index="+zInd+">"; } 
document.writeln(DivTyp+Styl); 
} 
function EndDiv() { 
(M)? document.writeln("</DIV>") : document.writeln("</LAYER>"); 
} 
corr = new Array(); 
gnum = 0; 
score = 0; 
ind = 0; 
for (rows = 0; rows < 3; rows++) { 
for (cols = 0; cols < 5; cols++) { 
ind++; 
corr[ind] = 0; 
eval("GetDiv('d"+ind+"',"+rows*100+","+cols*100+",100,100,'',1,0)"); 
document.write("<img src=/upload/201102/Pic",ind,".jpg width=100 height=100 border=0>"); 
EndDiv(); 
eval("GetDiv('dvTop"+ind+"',"+rows*100+","+cols*100+",100,100,'',0,1)"); 
document.write("<img name = Pix",ind," src=/upload/201102/unknown.gif width=100 height=100 border=1>"); 
EndDiv(); 
} 
} 
GetDiv('Control1',300,0,400,100,'silver',1,0); 
document.write("<center><br>先仔细的看看这幅图,然后开始测试.</center>"); 
EndDiv(); 
GetDiv('Control2',300,0,400,100,'silver',0,1); 
document.write("<center><br>这幅图对应在上面的哪个位置?=><br><br></center>"); 
EndDiv(); 
GetDiv('TestPix',300,400,100,100,'',1,1); 
document.write("<img src=/upload/201102/unknown.gif name=Tester width=100 height=100"); 
EndDiv(); 
function StartTest() { 
if (M) { eval("document.all.Control2.style.visibility = 'visible'"); } 
if (N) { eval("document.layers.Control2.visibility = 'show'"); } 
for (x = 1; x < 16; x++) { 
if (corr[x] == 0) { 
if (M) { eval("document.all.dvTop"+x+".style.visibility = 'visible'"); } 
if (N) { eval("document.layers.dvTop"+x+".visibility = 'show'"); } 
} 
} 
PickRandom(); 
document.Tester.src = "/upload/201102/Pic"+picked+".jpg"; 
} 
function PickRandom() { 
chk = 0 
while (chk == 0) { 
picked = 1+Math.floor(15*Math.random()) 
if (corr[picked] == 0) { chk = 1; break; } 
} 
} 
function TestMe(x) { 
gnum++; 
if (x == picked) { score++; corr[x] = 1; } 
if (M) { eval("document.all.dvTop"+x+".style.visibility = 'hidden'"); } 
if (N) { eval("document.layers.dvTop"+x+".visibility = 'hide'"); } 
if (gnum > 14) { 
alert("It's over! Score = "+score); 
for (x = 1; x < 16; x++) { corr[x] = 0; } 
if (score == 15) alert("And you win!"); 
gnum = 0; 
score = 0; 
window.close(); 
} 
setTimeout('StartTest()', 1000); 
} 
--> 
</script> 
</head> 
<body> 
<div style="position:absolute;top:-100;left:110;z-index:1000;width:300;height:500"> 
</div> 
</body> 
</html> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：js对象数组按属性快速排序
下一个：javascript代码加载优化方法
更多图片编程知识: