拼图游戏的设计与实现

界面设计

功能要求:使用HTML5画布技术制作一款拼图小游戏，要求将图像划分为3×3共9块方块并打乱排序，用户可以移动方块拼成完整图片。效果如图所示。

本节主要介绍拼图游戏的页面布局设计，包括整体布局设计和游戏布局设计两个方面。

整体布局设计

首先直接使用一个区域元素

在页面背景上创建游戏界面，在其内部添加标题、水平线并预留游戏空间。相关HTMLS代码片段如下:

该段代码为

元素定义了 id=“container”, 以便可以使用CSS的ID 选择器进行样式设置。
本例使用CSS外部样式表规定页面样式。在本地cSS文件夹中创建 pintu.css文件,并在首尾标签中声明对CSS文件的引用。相关 HTML5代码片段如下:

其中box-shadow 属性可以实现边框投影效果，4个参数分别代表水平方向的偏移(向右偏移10像素)、垂直方向的偏移(向下偏移10像素)、阴影宽度(15像素)和阴影颜色(黑色），均可自定义成其他值。该属性是CSS3新特性中的一种，在这里仅为美化页面做简单使用。
由于网页的背景颜色默认为白色，与

元素设置的背景颜色相同。为了区分，将网页的背景颜色设置为银色。此时效果图如图所示:

由图可见，关于

标签的样式要求已初步实现。目前尚未在

首尾标签之间填充游戏相关内容，因此在网页上浏览没有完整效果，需等待后续补充。接下来将介绍如何进行游戏内容的布局设计。

游戏布局设计

下面主要介绍如何在页面上创建完整的游戏内容，包括游戏计时、游戏画布和“重新开始”按钮3个部分。
首先在

元素的预留区域添加一个id="timeBox”的

元素，用于显示游戏计时。在其中先初始化总时间为00:00:00,并将时间文本嵌套在一个id="time"的 元素中,以便后续可以使用JavaScript 代码动态变更时间内容。相关HTML5代码片段如下:

当前该按钮仅用于布局设计，单击后暂无响应事件。后续会在JavaScript中为其增加回调函数。用户还可以为标签设置鼠标悬浮时的样式效果，在CSS样式表中用button:hover表示。本例将该效果设置为按钮背景颜色的改变，换成颜色加深的珊瑚红色。
相关css代码片段如下：

此时整个样式设计就全部完成了，其页面效果如图所示。

由图可见，关于拼图游戏的布局和样式要求已初步实现。目前尚未实现游戏逻辑，将由下一节实现。

添加JavaScript代码

本例需要将素材图片分割成3行3列的9个小方块，并打乱顺序放置在画布上。为了在游戏过程中便于查找当前区域该显示图片中的哪一个方块，首先为原图片上的9个小方块区域进行编号，如图所示。

在JavaScript 中声明自定义函数 getCurrentTime()用于进行游戏计时。当开始游戏时，计时功能自动开启并每秒执行一次该函数，将秒数增加1。
JavaSeript中getCurrentTime()方法的完整代码如下：

首先初始化当前计时的时、分、秒均为0，然后使用 parselmt（）方法将其转换为数值以便进行计算和财值。计时的思路是每次执行该陌教方法首先将秒数自增1，然后判断当前秒数是否已达到了60，如果是则归0，并将分钟自增1。以此类推，直到小时被增加。最后将文字内容处理后显示在游戏界面的计时区域。
此时还不能进行自动计时，需要在Javaseript 中使用setlintervall（）方法每隔1秒钟调用getCurrentTime()方法一次，以实现更新效果。
游戏的规则是使用鼠标单击的方式来移动拼图方块。当鼠标单击了需要移动的方块时，如果该方块相邻的地方存在空白区域，则该方块移动到空白区域的位置。如果鼠标直接单击了画布中的空白区域或单击的区域已经超出了画布范围则无效。
首先为画布对象声明鼠标单击事件onmousedown的回调函数，一旦单击了鼠标，则立刻获取鼠标在画布上的坐标。相关JavaScript代码片段如下:

由于直接使用e.pageX和e.pageY获取到的鼠标单击坐标是相对于整个页面左上角的位置坐标，所以还得用getBoundingClientRect()方法获取画布的边界，然后换算成画布上的相对坐标位置(x,y)。此时只需要将坐标除以拼图小方块的边长w即可换算出鼠标单击的是第几行第几列的拼图方块。
由于只对画布做了鼠标单击事件的监听，因此只需要考虑当前单击的是否为画布上的空白区域，无须关注鼠标是否单击了画布以外的范围。对鼠标单击事件onmousedown()的回调函数做进一步代码补充，相关JavaScript代码片段如下：

在这里使用计语句判断了单击的位置是否为空白区域，如果不是则尝试移动当前方块，并重新绘制画布内容。这里先自定义了一个函数detectBox（）用于检测是否可以移动当前方块，如果可以则进行数据的对调，后面将补充该函数内容。detectBox（）执行完毕后调用之前的drawCanvas()方法重新绘制画布内容。
在JavaScript中声明detectBox()方法用于检测是否可以移动当前图片。使用参数i和；分别传递当前鼠标单击所在画布的行与列。对当前单击的位置分别判断上、下、左、右4个方位的相邻位置是否存在空白区域，如果存在则移动到空白区域。
每次重新绘制画布后调用 checkWin()方法检查游戏是否已成功，如果成功则使用clearlnterval()方法清除计时器。然后在画布上绘制完整图片，并使用 filIText()方法绘制出“游戏成功”的字样。
运行效果如图所示

至此拼图游戏就完成了

小结

`本次的拼图游戏项目是对JavaScript的画布方面的粗浅应用，有些功能做的比较粗糙，还需要更加改进。