第十周周记
学习进度表
|
周数 |
专业学习目标 |
专业学习时间 |
新增代码量 |
博客发表量 |
人文方面的学习 |
知识技能总结 |
|
第十周 |
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>开心消消乐</title>
<link rel="stylesheet" type="text/css" href="file:///C|/Users/zjq/Desktop/17.css" />
<script type="text/javascript">
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>
<img border='0' src='E:\手绘\120431122009t.jpg' width='100%' height='100%' style='position: absolute;left:0px;top:0px;z-index: -1'>
<div>
<center>
<marquee scrollamount="3" align="center" direction="up"
behavior=scroll bgcolor="" width="10%" height="10%"> <h1>
记忆力大挑战<h1>
</marquee></center>
<div id="t4" align="center" > </div>
<h1><div align="center"> 得分：</div><h1>
</div>
<h1><div id="t2" align="center" width="52%">**</div><h1>
<div>
<img src="E:\手绘\01.png" onclick="createTable();" align="absbottom" align="center" valign="middle">
</div>
<div id="mt"></div>
<div class="class">
</div>
</head>
</body>
<div class="class">
<p></p>
</div>
</html>
