半期考html5小游戏制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> var now=-1; var last=-1; var count=0; var x=0; var a=100; var n; n=(row*col)/2; var row=3,col=4; var isUsed=new Array; var myArray=new Array(13); function mySort() { return Math.random()>.5; } function init(row, col) { n=(row*col)/2; for(var k=0;k<n;k++) { myArray[k]=( Math.round( Math.random()*18 )+1); myArray[k+n]=myArray[k]; } for(var k=0;k<2*n;k++) { isUsed[k]=false; } myArray.sort(mySort); var str='<table name="myT" border="0" width="400" height="400">'; for(var i=1;i<=row;i++) { str+="<tr>"; for(var j=0;j<col;j++) { str+="<td onclick='judge("+ ((i-1)*col +j )+");'>" str +="<img id='img_"+ ((i-1)*col +j )+"' src='photo/image0.gif'/>" str+="</td>"; } str+="</tr>"; } str+= "</table>" document.getElementById("mt").innerHTML=str; } function createTable() { var row=document.getElementById("t1").value; var col=document.getElementById("t2").value; init(row,col); } function judge(temp) { n=(row*col)/2; if(isUsed[temp]) return; isUsed[temp]=true; last=now; now=temp; var currImg=document.getElementById("img_"+temp); currImg.src="photo/image"+myArray[temp]+".gif"; if(last>=0) { if(myArray[now]==myArray[last]) { last=-1; now=-1; count++; if(count==n) { ++x; if(x>2) { alert("游戏结束"); var str="您的游戏得分是:"+a; document.getElementById("mt").innerHTML=str; } else{ count=0; alert("游戏胜利,进入下一关"); return init(++row,++col); } } } else { a--; currImg=document.getElementById("img_"+last); currImg.src="photo/image0.gif"; isUsed[last]=false; } } } </script> </head> <body> <body id="mt" style="background:url(photo/10.jpg)"> <h1> <div id="mt">卡牌记忆游戏</div></h1> <input type="text" value="3" id="t1"/> <input type="text" value="4" id="t2"/> <input type="button" value="开始游戏" onClick="createTable();"/> </body> </html>