本周心得
2016-04-07 13:59
162 查看
今天上课终于把类似连连看这个游戏完成了下面的是代码还有一些小问题需要改善,就是一个及格的小游戏了,自己努力付出,得出的结果让我很开心。
下面还有程序运行的结果图,可以看看,老师说还可以定时一些规则可以自己定。
只要付出就一定有收获,代码不是写出来了你就会了,要多复习复习,才能记得更牢。再接再厉!
<!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 myArray=new Array();
var row=2;
var col=2;
var currImgNo=-1;
var lastImgNo=-1;
var isUsed=new Array();
function mySort()
{
return Math.random()>.5;
}
function init(row,col)
{
var n= (row*col)/2;
for(var k=0;k< (2*n);k++)
{
isUsed[k]=false;
}
for(var k=0;k<n;k++)
{
myArray[k]=Math.ceil( Math.random() *10);
myArray[k+n]=myArray[k];
}
myArray.sort(mySort);
var str='<table 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) +");'>" + myArray[ ((i-1)*col+j) ] +"</td>";
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("xu").innerHTML=str;
}
function onRe()
{
init(row,col);
row++//document.getElementById("t1").value;
col++//document.getElementById("t2").value;
// init(row,col);
document.getElementById("next").value="下一关";
}
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]+".gif";
if(currImgNo>=0 && lastImgNo>=0)
{
if(myArray[currImgNo]==myArray[lastImgNo])
{
//alert("成功");
currImgNo=lastImgNo=-1;
}
else
{
var lastImg=document.getElementById("img_"+lastImgNo);
lastImg.src="photo/image0.gif";
isUsed[lastImgNo]=false;
}
}
}
</script>
</head>
<body>
<html>
<body>
<div id="xu"> 表格</div>
<input type="text" size="10" id="t1" />
<input type="text" size="10" id="t2" />
<input id="next" type="button" width="10" value="开始" onclick="onRe();" />
</body>
</html>
下面还有程序运行的结果图,可以看看,老师说还可以定时一些规则可以自己定。
只要付出就一定有收获,代码不是写出来了你就会了,要多复习复习,才能记得更牢。再接再厉!
<!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 myArray=new Array();
var row=2;
var col=2;
var currImgNo=-1;
var lastImgNo=-1;
var isUsed=new Array();
function mySort()
{
return Math.random()>.5;
}
function init(row,col)
{
var n= (row*col)/2;
for(var k=0;k< (2*n);k++)
{
isUsed[k]=false;
}
for(var k=0;k<n;k++)
{
myArray[k]=Math.ceil( Math.random() *10);
myArray[k+n]=myArray[k];
}
myArray.sort(mySort);
var str='<table 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) +");'>" + myArray[ ((i-1)*col+j) ] +"</td>";
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("xu").innerHTML=str;
}
function onRe()
{
init(row,col);
row++//document.getElementById("t1").value;
col++//document.getElementById("t2").value;
// init(row,col);
document.getElementById("next").value="下一关";
}
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]+".gif";
if(currImgNo>=0 && lastImgNo>=0)
{
if(myArray[currImgNo]==myArray[lastImgNo])
{
//alert("成功");
currImgNo=lastImgNo=-1;
}
else
{
var lastImg=document.getElementById("img_"+lastImgNo);
lastImg.src="photo/image0.gif";
isUsed[lastImgNo]=false;
}
}
}
</script>
</head>
<body>
<html>
<body>
<div id="xu"> 表格</div>
<input type="text" size="10" id="t1" />
<input type="text" size="10" id="t2" />
<input id="next" type="button" width="10" value="开始" onclick="onRe();" />
</body>
</html>
相关文章推荐
- mysql,命令导入\导出表结构或数据
- neo4j安装与示例
- STL序列式容器 - deque
- mybatis动态语句
- 43、ORACLE数据库的导出和导入!
- 5.5 smtpd_service函数(smtpd.c):smtp服务回调函数
- js代码混淆工具
- Extjs treePanel 的treestore重复加载问题解决
- 优秀邮件主题行能为邮件点击率创造巨大营销,你知道吗?
- java.lang.IllegalStateException: Recursive entry to executePendingTransactio的解决方法
- arcgis android 通过getExtent得到当前地图范围四个点的坐标
- 浏览器内核比较
- Android调用系统邮件,短信
- 公告--博客搬家
- Servlet重定向和转发、如何将中文插入数据库
- Android:性能典范:拯救计划
- Android 解析包出错问题
- 探索 Pexpect,第 1 部分:剖析 Pexpect
- Java之绘制二次曲线
- 添加删除元素