《JavaScript程序设计教程》项目8：图像拼图游戏

JavaScript程序设计教程项目8：图像拼图游戏项目8：图像拼图游戏8.1功能与技术分析8.1.1功能分析在游戏初始时分割为n*m的各子图像均按照一定的规则随机分布在不同的单元格中。用户通过上、下、左、右四个方向键可将临近空白单元格的子图像与其互换，从而实现子图像的移动。最终，通过一系列的移动形成一幅与原图一致的图像。

用户可根据需要设置游戏的难度，即设置单元格的数量。将自动记录游戏移动步数和运行时间。程序运行界面如图8-1所示。项目8：图像拼图游戏8.1功能与技术分析8.1.2技术分析与数字拼图相似，图像拼图使用了HTML表格构建游戏的基本框架，以单元格作为游戏的基本元素，用户可以通过下拉列表选择表格中单元格的数量。在游戏初始化时，根据单元格的数量将图像分割为相同数量的子图像随机填充到单元格中，有且仅有一个单元格为空白。对于图像拼图而言，实际上并没有将图像进行真正的分割，只是在不同的单元格中图像显示的起点不同而已，给人的感觉好像是图像被分割成若干个子图像。因此，在本章后续的描述中均以子图像代表每一单元格的图像。项目8：图像拼图游戏8.1功能与技术分析8.1.2技术分析在游戏中用户可以利用方向键将空白单元格与其周围子图像互换从而实现子图像的移动，最终完成子图像按原图排列。

在项目中除了HTML和JavaScript基本知识外，涉及的技术主要包括键盘事件、图像和数组等。项目8：图像拼图游戏8.2图像的使用8.2.1

HTML中的图像在HTML中使用图像标签<img>来添加图像，具体的代码如下：<imgsrc="image/building.jpg"width="300"height="300"alt="newbuilding"/>其中，src是图像的源属性，描述图像的来源，其值为图像的存储地址URL，可以是绝对地址，也可以是相对地址；width和height分别为图像的宽度和高度；alt为替换文本属性，当浏览器无法载入图像时，则以其中定义的文本替换图像，以此给出未载入图像的相关说明。项目8：图像拼图游戏8.2图像的使用8.2.1

HTML中的图像除了这几个属性外，HTML中的图像还有其它一些属性及HTML中的标准属性，在表8-1给出<img>标签的常见属性。利用HTML图像标签<img>的属性可以控制图像的各种显示状态。属性可输入值或单位描述srcURL图像源属性alttext图像替换属性widthpixels/%图像宽度属性Heightpixels/%图像高度属性Aligntop/bottom/middle/left/right图像排列属性Borderpixels图像周围的边框属性Hspacepixels图像左侧、右侧的空白属性Vspacepixels图像顶部、底部的空白属性项目8：图像拼图游戏8.2图像的使用8.2.1

HTML中的图像【例8-1】HTML图像标签及其属性。编写网页界面，使用表格来规范各项输出内容的大小和位置，程序运行结果如图8-2所示。项目8：图像拼图游戏8.2图像的使用8.2.2

JavaScript中的图像

JavaScript中与图像相关的主要有Image对象、IMG对象和document对象的images属性。

IMG对象与Image对象类似，只是前者最初仅被IE浏览器所支持，而后者被Netscape所支持。当然，现在这两个浏览器都支持这两类对象。因此，本书主要以Image对象为例来介绍。

可以通过构造函数在JavaScript中创建新的Image对象：new

Image

([integerwidth],[integerheight]);其中的宽度width和高度height参数可选。项目8：图像拼图游戏8.2图像的使用8.2.2

JavaScript中的图像实际上，在HTML网页中，每个<img>标签都创建了一个Image对象。在JavaScript中创建新的Image对象后，就可以对相应的图像进行操作。Image对象与其它对象类似，通过一些事件处理程序来捕获相应的事件发生来操作图像。表8-2给出了Image对象的常见属性。属性描述src图像源属性lowsrc低分辨率图像源属性name图像名字属性width图像宽度属性height图像高度属性complete图像装载状态属性border图像周围的边框属性hspace图像左侧、右侧的空白属性vspace图像顶部、底部的空白属性x图像在客户端浏览器显示的水平坐标y图像在客户端浏览器显示的垂直坐标项目8：图像拼图游戏8.2图像的使用8.2.2

JavaScript中的图像【例8-2】Image对象属性的使用。

(1)编写网页界面，使用表格来规范各项输出内容的大小和位置

(2)对于Image对象属性的改变通过点击鼠标事件处理程序的定义来实现。本例中主要对图像的尺寸、边距、对齐以及图像的变换进行了示范，程序运行结果如图8-3所示。项目8：图像拼图游戏8.2图像的使用8.2.3图像的样式与控制还有一种对图像的控制是将图像作为背景，通过对背景的样式属性进行操作实现的。表8-3给出与图像有关的样式属性。其中“背景”可以是在几乎任意HTML元素中，如网页、表格、表格中的单元格等。样式属性JavaScript语法描述background-attachmentbackgroundAttachment背景图像是否固定。background-imagebackgroundImage把图像设置为背景。background-positionbackgroundPosition设置背景图像的起始位置。background-repeatbackgroundRepeat设置背景图像是否及如何重复。项目8：图像拼图游戏8.2图像的使用8.2.3图像的样式与控制1.背景图像要把图像放入背景，需要使用background-image属性。background-image属性的默认值是none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个URL值：<tdid="numT"width="80"style="background-Image:url(img0.jpg)"></td>项目8：图像拼图游戏8.2图像的使用8.2.3图像的样式与控制2.图像重复作为背景的图像是无法压缩或放大的，但是可以将图像在背景中平铺。如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。属性值repeat导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺：<tdid="numT"style="background-Image:url(img.jpg);background-repeat:no-repeat"></td>默认地，背景图像将从一个元素的左上角开始。项目8：图像拼图游戏8.2图像的使用8.2.3图像的样式与控制3.图像定位可以利用background-position属性改变图像在背景中的位置：<tdid="numT"style="background-Image:url(img.jpg);

background-repeat:no-repeat;

background-position:center;"></td>图像的background-position属性值的定义方法有很多。可以使用一些“关键字”，如top、bottom、left、right和center。通常，这些关键字一般都是成对出现，但也不总是这样；

另外，还可以使用“长度值”，如100px或5cm；除此之外，还可以使用“百分数值”。项目8：图像拼图游戏8.2图像的使用8.2.3图像的样式与控制3.图像定位当然，对于背景图像的background-position属性值不同的定义方法其效果也略有差异。

(1)关键字关键字定义background-position属性值的方法最容易理解，其作用方法如其名称所示。例如，topright使图像放置在元素内边距区的右上角。项目8：图像拼图游戏8.2图像的使用8.2.3图像的样式与控制3.图像定位

(1)关键字根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是center。所以，如果希望单元格的中部上方出现一个图像，只需如下代码：<tdid="numT"style="background-Image:url(img.jpg);

background-repeat:no-repeat;

background-position:top;"></td>下面是等价的位置关键字：单一关键字等价的关键字centercentercentertoptopcenter或centertopbottombottomcenter或centerbottomrightrightcenter或centerrightleftleftcenter或centerleft项目8：图像拼图游戏8.2图像的使用8.2.3图像的样式与控制3.图像定位

(2)百分数值百分数定义background-position属性值的方法略为复杂。假设希望将图像在其元素中居中，可以通过如下语句实现：<tdid="numT"style="background-Image:url(img.jpg);

background-repeat:no-repeat;

background-position:

50%50%;"></td>通过上面的设置，图像的中心与单元格元素的中心对齐。也就是说，图像中描述为50%50%的点（中心点）与元素中描述为50%50%的点（中心点）对齐。项目8：图像拼图游戏8.2图像的使用8.2.3图像的样式与控制3.图像定位

(2)百分数值如果图像位于0%0%，其左上角将放在元素内边距区的左上角。如果图像位置是100%100%，会使图像的右下角放至元素的右下角。

因此，把图像放在水平方向2/3、垂直方向1/3处，可以这样：<tdid

="numT"style="background-Image:url(img.jpg);

background-repeat:no-repeat;

background-position:

66%33%;"></td>项目8：图像拼图游戏8.2图像的使用8.2.3图像的样式与控制3.图像定位

(2)百分数值如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为50%。

background-position属性的默认值是0%0%，在功能上相当于topleft。因此，当此属性值缺省时，背景图像总是从元素内边距区的左上角开始平铺。项目8：图像拼图游戏8.2图像的使用8.2.3图像的样式与控制3.图像定位

(3)长度值长度值定义background-position属性值的方法设置的是图像的左上角相对于元素内边距区左上角的偏移，偏移参照点是元素的左上角。

比如，如果设置值为50px100px，图像的左上角将在元素内边距区左上角向右50像素、向下100像素的位置上：<tdid="numT"style="background-Image:url(img.jpg);

background-repeat:no-repeat;

background-position:

50px100px;"></td>项目8：图像拼图游戏8.2图像的使用8.2.3图像的样式与控制3.图像定位【例8-3】使用样式属性对图像的分割。

(1)编写网页界面，使用<div>来输出图像表格，使用列表框来选择分割的大小项目8：图像拼图游戏8.2图像的使用8.2.3图像的样式与控制3.图像定位【例8-3】使用样式属性对图像的分割。

(1)编写网页界面，使用<div>来输出图像表格，使用列表框来选择分割的大小

(2)对于图像的分割和选择都是通过样式属性来实现，程序运行结果如图8-4所示。项目8：图像拼图游戏8.2图像的使用8.2.3图像的样式与控制4.图像关联如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。可以通过background-attachment属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：<tdid="numT"style="background-Image:url(img.jpg);

background-repeat:no-repeat;

background-position:left;

background-attachment:fixed;"></td>项目8：图像拼图游戏8.3图像拼图的设计与实现8.3.1图像拼图游戏的界面设计与实现

运行状态显示区

游戏操作区

提示图像游戏设置及帮助信息区项目8：图像拼图游戏8.3图像拼图的设计与实现8.3.1图像拼图游戏的界面设计与实现1.主界面的设计与实现主界面中游戏标题、帮助信息通常不会发生改变。因此，采用静态的页面设计，而游戏运行状态区、操作区及游戏难度设置显示的信息需随游戏的进程而不断变化，所以采用动态页面和选择标签的设计形式。游戏区采用表格标签<table>定义，并使用水平分隔线标签<hr>对标题与游戏区进行分割。在游戏区的表格中嵌套了子表格来实现游戏运行状态、嵌入的<div>区块来接受动态的游戏操作子表格。项目8：图像拼图游戏8.3图像拼图的设计与实现8.3.1图像拼图游戏的界面设计与实现2.游戏运行分区的设计与实现图像拼图游戏的操作区也采用表格的形式显示。表格的单元格以子图像为背景，初始化时先按照原图排列，然后调用子图像随机分布函数将每一个子图像分布在单元格中。

为方便读者理解和用户操作，在每个子图像上标注出其序号，这一变化过程在某些浏览器上可能看不到，只能看到最终的结果。单元格的数量（即游戏难度）以选择标签的形式确定，用户可以通过鼠标选择实现难度设置。项目8：图像拼图游戏8.3图像拼图的设计与实现8.3.1图像拼图游戏的界面设计与实现2.游戏运行分区的设计与实现由于游戏操作区的显示界面会随用户的操作而发生变化，因此，实现时采用函数形式。在定义出相应的表格、表行以及单元格的格式后，依据用户设置的行与列的数量采用二重嵌套循环的形式绘制出表格。对于需要拼图的图像利用单元格对象的background-position属性设置每一个单元格的背景图像的起点的不同，从而实现图像分割的效果。项目8：图像拼图游戏8.3图像拼图的设计与实现8.3.2图像拼图游戏应用逻辑的设计与实现与数字拼图一样，图像拼图游戏在应用逻辑上也是包括主界面、子图像分布和游戏运行状态的初始化。

当用户进行游戏难度的设置或子图像重置后，将再次执行初始化操作。初始化完成后，只有当用户键入上、下、左、右四个方向键时才开始游戏。用户通过方向键将空白单元格与其周围的子图像进行交换，同时还进行子图像编号序列的交换。最终目标是将所有的随机分布的子图像移动至与原图一致的位置，即子图像编号按顺序排列。在游戏的过程中，可以参考游戏界面右边的原图缩小图。项目8：图像拼图游戏8.3图像拼图的设计与实现8.3.2图像拼图游戏应用逻辑的设计与实现1.子图像随机分布的设计与实现按照游戏规则，原图像根据用户的设置单元格数分割成若干个子图像后随机分布在设定的单元格中，并且有一个单元格为空白，可与其周围的子图像互换。

对于图像拼图，虽然游戏本身并不要求对每一个子图像进行编号，但本例中对每一个子图像进行了相应的编号，并将其编号标注在子图像上。与数字拼图一样，在进行子图像随机分布时，也要求子图像编号排列的逆序数为偶数，这样才能保证最终恢复图像的排列与原图一致。项目8：图像拼图游戏8.3图像拼图的设计与实现8.3.2图像拼图游戏应用逻辑的设计与实现1.子图像随机分布的设计与实现单元格中的子图像编号随机分布由数组的sort()方法实现，每一单元格中的图像是根据生成的随机分布的子图像编号和表格初始化时定义的每一单元格的图像起点位置共同确定图像可显示部分，从视觉效果上实现图像的分割和随机分布具体的实现见随机布局函数initNums()：项目8：图像拼图游戏8.3图像拼图的设计与实现8.3.2图像拼图游戏应用逻辑的设计与实现2.游