第八周周记
学习进度表
|
周数 |
专业学习目标 |
专业学习时间 |
新增代码量 |
博客发表量 |
人文方面的学习 |
知识技能总结 |
|
第八周 |
html小游戏 |
每天晚上七点到八点。 |
如下 |
已发 |
css |
www.3wschool.com网页自学的网站
|
经过一周的研究终于自己写出来了，没有bug的记忆力翻牌游戏。
课上做了小测试，于是决定了将来向前端设计方向发展。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>记忆力大挑战</title>
<link rel="stylesheet" type="text/css" href="17.css" />
<script type="text/游戏脚本，程序执行内容.js">
var myArray=new Array(100);
var currImgNo=-1;
var lastImgNo=-1;
var count=0;
var n;
var isUsed=new Array();
var row=3;
var col=4;
function mySort()
{
return Math.random()>.5;
}
function init(row, col)
{
//0--12
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="1" width="300" height="300">';
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);
row=row+2;
col=col+2;
}
function judge(temp)
{
//temp 表格单元格编号 1---12
if(isUsed[temp]) return;
isUsed[temp]=true;
lastImgNo=currImgNo;
currImgNo=temp;
// alert("当前编号:"+currImgNo);
// alert("上一张编号："+lastImgNo);
var currImg=document.getElementById("img_"+temp);
currImg.src="photo/image"+myArray[temp]+".gif";
if(currImgNo>=0&&lastImgNo>=0)
{
if(myArray[currImgNo]==myArray[lastImgNo])
{
//alert("匹配成功");
count++;
currImgNo=lastImgNo=-1;
while (count>=n)
{
alert("游戏结束，是否进入下一关");
count=0;
createTable();
}
}
else
{
var lastImg=document.getElementById("img_"+lastImgNo);
lastImg.src="photo/image0.gif";
isUsed[lastImgNo]=false;
}
}
}
</script>
</head>
<body>
<div id="mt">开心消消乐</div>
<div class="class">
<p>你的文字内容</p>
</div>
<input type="button" value="开心消消乐" onClick="createTable();"/>
<input type="image" src="E:\手绘\01.jpg" name="图像名称" onClick="createTable();"/>
<!--图片的开始按钮-->
</body>
<!--<img border='0' src="../../20151227140601_UZNyK.jpeg">-->
<div class="class">
<p>你的文字内容</p>
</div>
</html>
