连连看课程设计.docx

在页面被载入的时候就进行了初始化：

document.getElementById（"timebar"）.style.width=600;//时间条设置其宽度为600px.

document.getElementById（"timebar"）.style.backgroundColor="blue";//设置其一开始的颜色为蓝色。

当随着游戏的时间一秒一秒的逝去，类似进度条的时间栏会显示不同的颜色来提示玩家对应花掉的时间。

如果玩家成功过关，进度条会将其颜色恢复成白色。

2.3初始化工作

绘制表格并对表格各单元格放置的图片数据空间内的进行成对性的随机布局。

这些功能都在页面载入的setTab（）函数里实现。

其代码如下：

//绘制表格

TmpStr="";

for（j=0;j

TmpStr+="";

for（i=0;i

//绘制单元格的同时给它加上onclick事件。

调用CheckP（）函数，当用户单击该点时，对该点进行检测。

TmpStr+="

if（0==i||0==j||（RowMax-1）==i||（ColMax-1）==j）{

Matrix[i][j]=0;//边界填充空单元格，连线用。

TmpStr+=">";

}

else{

TmpInt--;

Matrix[i][j]=1+Math.floor（PicMax*Math.random（））;

if（TmpInt

for（k=1;k<=PicMax;k++）{

if（PicAry[k]）{

Matrix[i][j]=k;

break;

}

}

}

//更新该类图片的奇偶数数组，以及单张图片总数

if（PicAry[Matrix[i][j]]）{

PicAry[Matrix[i][j]]=0;

PicNum--;

}

else{

PicAry[Matrix[i][j]]=1;

PicNum++;

}

//填写颜色

vartmp_color=Math.floor（0xFFFF00*Matrix[i][j]/PicMax）.toString（16）;

TmpStr+="color=\"#";

for（k=tmp_color.length;k<6;k++）TmpStr+="0";

TmpStr+=tmp_color;

TmpStr+="\">";

//添图片（webdings图标）

TmpStr+=String.fromCharCode（Matrix[i][j]+OffSet）;//不同的图片

}

TmpStr+="";

}

TmpStr+="";

}

TmpStr+="";

游戏的初始化工作由函数setTab（）实现，表格区域中的每一个放置图片的单元格都由两个个二维数组中的元素来定义。

数组中X表示图片在游戏区域的横坐标Y表示图片在游戏区域的纵坐标。

所以在游戏的初始化工作中也要对数组进行初始化，如果在数组元素所表示的区域不可以存放图片则负值为0，如果在该区域可以存放图片则负值为-1。

2.4图案方块的连接消除判断

在检验玩家选择的两张图片能被消除的时候，它们必须符合：

一：

就是选中的两个单元格的图案必须相同。

二：

在选中的两个单元格之间没有障碍物阻碍的情况下，能用若干个平行或垂直垂直的直线线段连接起来。

三：

将两个单元格连接起来的直线线段的折点不能超过两个（连接线由x轴和y轴的平行线组成）。

图片可以消除的连接方式分为三种：

一：

直连方式。

该方式为三种消除图片的连接方式中最简单的一种。

在直接连接方式中，必须要求所选定的两个单元格在同一水平直线上或者在同一垂直线上，并且两个单元格之间没有任何其它图案单元格。

二：

一个折点的平行垂直线段连接。

在该情况下，所选定的两个方块如果通过折点的方式连接，那么对折点来说，每个折点必定有且至少有一个坐标（x或y）是和其中一个目标点相同的，即折点必定在两个目标点所在的x方向或y方向的直线上。

此外，对于一个折点连接的情况，折点应该为第一个选中方块的横向线或纵向线与第二个选中方块的纵向线和横向线相交而得出。

三：

两个折点的平行垂直线段连接。

在该情况下的两个折点所连成的直线与两物件的直接连线可以构成平行线，因此可以根据这个规律，将这条水平线在游戏区域允许的条件上下移动，然后通过判断整条带垂直折线点的曲线之间有无障碍物方式来确定是否可以连同。

它的具体消除图片实例如图2.1所示。

图2.1消除图片实例

它的设计流程图如图2.2所示。

图2.2判断消除图片流程图

首先，对简单直接连的情况进行判断，看它是否符合条件，假如不能，再加深一个级别的复杂度，对一个折点的情况进行判断，依次类推。

在函数LineX（）、LineY（）、LinkP（）中分别对所有可能连线的情况采用枚举法进行判定。

其三个函数的实现分别如下：

//X方向连线。

（有起点，无终点）

functionLineX（x,y,xt）{

for（i=x;i!

=xt;（x

i++:

i--））{

if（Matrix[i][y]）{

returnfalse;

}

}

returntrue;

}

//Y方向连线。

（有起点，无终点）

functionLineY（x,y,yt）{

for（i=y;i!

=yt;（y

i++:

i--））{

if（Matrix[x][i]）{

returnfalse;

}

}

returntrue;

}

//2个点被3条线连接

functionLinkP（P1,P2）{

//P1在P2下方，交换P1、P2

if（P1.y>P2.y）{

P3=P1;

P1=P2;

P2=P3;

}

//P1下方1点（y+1）先纵向再横向是否可连接。

（因为起点P1不为空，所以检测其下方一点）

if（LineY（P1.x,（P1.y+1）,P2.y）&&LineX（P1.x,P2.y,P2.x））returntrue;

//P1先向左侧连接，再检测该点再纵向再横向是否可连接P2。

for（j=（P1.x-1）;j>=0;j--）{

if（Matrix[j][P1.y]）break;

if（LineY（j,（P1.y+1）,P2.y）&&LineX（j,P2.y,P2.x））returntrue;

}

//P1先向右侧连接，再检测该点再纵向再横向是否可连接P2。

for（j=（P1.x+1）;j

if（Matrix[j][P1.y]）break;

if（LineY（j,（P1.y+1）,P2.y）&&LineX（j,P2.y,P2.x））returntrue;

}

//P1在P2右侧，交换P1、P2

if（P1.x>P2.x）{

P3=P1;

P1=P2;

P2=P3;

}

if（LineX（（P1.x+1）,P1.y,P2.x）&&LineY（P2.x,P1.y,P2.y））returntrue;

for（j=（P1.y-1）;j>=0;j--）{

if（Matrix[P1.x][j]）break;

if（LineX（（P1.x+1）,j,P2.x）&&LineY（P2.x,j,P2.y））returntrue;

}

for（j=（P1.y+1）;j

if（Matrix[P1.x][j]）break;

if（LineX（（P1.x+1）,j,P2.x）&&LineY（P2.x,j,P2.y））returntrue;

}

returnfalse;

}

当玩家单机表格中的单元格时，产生鼠标事件，调用函数checkP（）检测该点，函数代码如下：

//单击检测该点

functionCheckP（o,x,y）{

if（Matrix[x][y]）{//非空

if（null==TmpObj）{//之前无选中图片

TmpObj=o;//选中该图片

TmpObj.borderColor="0000FF";//改变边框颜色

P[0].x=x;//保存该点

P[0].y=y;

}

elseif（o!

=TmpObj）{//非同一点

TmpObj.borderColor="FFFFFF";//恢复边框颜色

P[1].x=x;//保存该点

P[1].y=y;

if（Matrix[P[0].x][P[0].y]==Matrix[P[1].x][P[1].y]）{//同一类图片

if（LinkP（P[0],P[1]））{//可以连接

Matrix[P[0].x][P[0].y]=0;//清零

Matrix[P[1].x][P[1].y]=0;

TmpObj.innerHTML="";//原图片显示为空

o.innerHTML="";

TmpTime++;//奖励时间

TmpInt--;//剩余图片减1

if（!

TmpInt）{//剩余图片为0

clearInterval（st）;//清除倒计时document.getElementById（"container"）.innerHTML="";

document.getElementById（"timeleft"）.innerHTML="";document.getElementById（"timebar"）.style.backgroundColor="white";

alert（"恭喜您过关！

"）;

}

}

}

TmpObj=null;//无选中图片

}

}

else{

if（TmpObj）{TmpObj.borderColor="FFFFFF";}//恢复边框颜色

TmpObj=null;//无选中图片

}

}

在函数shoutime（）中，用于更新时间，依据所剩下的时间控制时间进度条的颜色等功能。

其代码如下所示：

functionShowTime（）{

TmpTime--;//时间减1

//更新时间

document.getElementById（"timeleft"）.innerHTML=+TmpTime;

document.getElementById（"timebar"）.style.width=Math.floor（600*TmpTime/TimeMax）;

if（（TimeMax/TmpTime）>4）{

document.getElementById（"timebar"）.style.backgroundColor="red";

}

elseif（（TimeMax/TmpTime）>2）{

document.getElementById（"timebar"）.style.backgroundColor="yellow";

}

if（!

TmpTime）{//剩余时间为0

clearInterval（st）;//清除倒计时

document.getElementById（"container"）.innerHTML="";//清屏

document.getElementById（"timeleft"）.innerHTML="";

document.getElementById（"timebar"）.style.backgroundColor="white";

alert（"时间到!

!

!

"）;

}

}

2.5游戏的胜利

游戏的胜利主要跟游戏区域的图片和时间条相关。

在规定的时间内判断游戏区域所剩的图片张数，一旦剩下图片的个数为0了，则弹出游戏胜利的窗口。

规定的时间一秒一秒减少直至为0了，若剩余图片数不为0则该局游戏是失败了的。

不过连连看不涉及到money,不会像其他游戏一样还需金币复活。

但也因为这样，有时候会觉得这个游戏没挑战性。

2.6游戏的重置

当玩家觉得时间不够，或者想加大游戏的难度级别时，输入相应的行列数，图片数，以及时间后单击“重置”按钮就等同于载入用户配置好的游戏。

第3章系统测试

3.1程序运行测试

当用户运行程序时将会出现该界面。

它的运行后的结果如图3.1所示。

图3.1游戏运行的主界面

用户可自行输入表格的行数，列数，图片数，时间数，例如用户自行输入行数为25，列数为10，图片数为12，时间为540秒后，点击重置按钮开始游戏，其运行界面如图3.2所示：

图3.2重新绘制的游戏界面

3.2游戏失败提示界面

当玩家在游戏本身设置的规定时间内没有把游戏区域的所有图片消除，则游戏失败。

它的界面如图3.2所示。

图3.2游戏失败提示界面

3.3游戏成功提示界面

如果玩家在游戏规定的时间内消除了游戏区域的所有图片则游戏胜利,游戏成功时的提示界面如图3.3所示。

3.3游戏成功提示界面

第4章总结

此刻的课程设计让我感触颇多，过程曲折可谓一语难尽。

在此期间我也失落过，也曾一度热情高涨。

从开始时满富盛激情到最后汗水背后的复杂心情，点点滴滴无不令我回味无长。

不仅仅是知识上的学习和掌握，同时也让我明白了很多做人的道理。

通过这次连连看游戏的设计使我懂得了理论与实际相结合是很重要的。

只有把所学的理论知识和实践相结合起来，从理论中得出得出结论，才能真正的提高自己的水平，从而提高自己的实际动手能力和独立思考的能力。

在没有做课程设计以前觉得课程设计知识对这几年来所学知识的单纯总结，但是通过这次做课程设计发现自己的看法有点太片面。

课程设计不仅是对前面所学知识的一种检验，而且也是对自己能力的一种提高。

对我而言，知识上的收获重要，精神上的丰收更加可喜。

挫折是一份财富，经历是一份拥有。

学习是一个长期积累的过程，在以后的工作、生活中都应该不断的学习，努力提高自己知识和综合素质。

很感谢我们的指导老师XX老师对我们的悉心指导，还有同学的热情帮助。

在设计过程中，我通过查阅大量有关资料，与同学交流经验和自学，并向老师请教等方式，使自己学到了不少知识，也