第十周周記

學習進度表

周數	專業學習目标	專業學習時間	新增代碼量	部落格發表量	人文方面的學習	知識技能總結
第十周	html小遊戲	每天晚上七點到八點。	如下	已發	css	www.3wschool.com網頁自學的網站

成功弄出一個完整的小遊戲

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>開心消消樂</title>

var myArray=new Array(100);

var currImgNo=-1;

var lastImgNo=-1;

var count=0;

var n=(row*col)/2;

var isUsed=new Array();

var row=3;

var col=4;

var fen=0;

var zongfen=0

function mySort()

{

return Math.random()>.5;

}

function init(row, col)

{

n=(row*col)/2;

for(var k=0;k<(n*2);k++)

isUsed[k]=false;

for(var k=0;k<n;k++)

myArray[k]=( Math.round( Math.random()*17 )+1);//取随機數再取整

myArray[k+n]=myArray[k];

}

myArray.sort(mySort);

var str='<table name="myT" border="2" width="400" height="400" align="center" valign="middle">';

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.jpg'/>" ;

str+="</td>";

}

str+="</tr>";

str+= "</table>"

document.getElementById("mt").innerHTML=str;//在頁面輸出

}

function createTable()

init(row,col);

row=row+2;

col=col+2;

function judge(temp)

if(isUsed[temp]) return;

isUsed[temp]=true;

lastImgNo=currImgNo;

currImgNo=temp;

var currImg=document.getElementById("img_"+temp);

currImg.src="photo/image"+myArray[temp]+".jpg";

if(currImgNo>=0&&lastImgNo>=0)

if(myArray[currImgNo]==myArray[lastImgNo])

//alert("比對成功");

count++;

zongfen++;

fen=zongfen*2;

if(fen==4)

{

document.getElementById("t4").innerHTML=("<img src='E:\手繪\01.jpg'/>");

}

currImgNo=lastImgNo=-1;

while (count>=n)

alert("恭喜進入下一關！目前分數為："+fen+"分");

count=0;

createTable();

else

var lastImg=document.getElementById("img_"+lastImgNo);

lastImg.src="photo/image0.jpg";

isUsed[lastImgNo]=false;

document.getElementById("t2").innerHTML=fen;

</script>

<body>

<div>

<marquee scrollamount="3" align="center" direction="up"

behavior=scroll bgcolor="" width="10%" height="10%"> <h1>

記憶力大挑戰<h1>

</marquee></center>

</div>

</head>

</body>

<p></p>

</html>