《JavaScript程序設(shè)計(jì)教程》項(xiàng)目8：圖像拼圖游戲

JavaScript程序設(shè)計(jì)教程項(xiàng)目8：圖像拼圖游戲項(xiàng)目8：圖像拼圖游戲8.1功能與技術(shù)分析8.1.1功能分析在游戲初始時(shí)分割為n*m的各子圖像均按照一定的規(guī)則隨機(jī)分布在不同的單元格中。用戶(hù)通過(guò)上、下、左、右四個(gè)方向鍵可將臨近空白單元格的子圖像與其互換，從而實(shí)現(xiàn)子圖像的移動(dòng)。最終，通過(guò)一系列的移動(dòng)形成一幅與原圖一致的圖像。

用戶(hù)可根據(jù)需要設(shè)置游戲的難度，即設(shè)置單元格的數(shù)量。將自動(dòng)記錄游戲移動(dòng)步數(shù)和運(yùn)行時(shí)間。程序運(yùn)行界面如圖8-1所示。項(xiàng)目8：圖像拼圖游戲8.1功能與技術(shù)分析8.1.2技術(shù)分析與數(shù)字拼圖相似，圖像拼圖使用了HTML表格構(gòu)建游戲的基本框架，以單元格作為游戲的基本元素，用戶(hù)可以通過(guò)下拉列表選擇表格中單元格的數(shù)量。在游戲初始化時(shí)，根據(jù)單元格的數(shù)量將圖像分割為相同數(shù)量的子圖像隨機(jī)填充到單元格中，有且僅有一個(gè)單元格為空白。對(duì)于圖像拼圖而言，實(shí)際上并沒(méi)有將圖像進(jìn)行真正的分割，只是在不同的單元格中圖像顯示的起點(diǎn)不同而已，給人的感覺(jué)好像是圖像被分割成若干個(gè)子圖像。因此，在本章后續(xù)的描述中均以子圖像代表每一單元格的圖像。項(xiàng)目8：圖像拼圖游戲8.1功能與技術(shù)分析8.1.2技術(shù)分析在游戲中用戶(hù)可以利用方向鍵將空白單元格與其周?chē)訄D像互換從而實(shí)現(xiàn)子圖像的移動(dòng)，最終完成子圖像按原圖排列。

在項(xiàng)目中除了HTML和JavaScript基本知識(shí)外，涉及的技術(shù)主要包括鍵盤(pán)事件、圖像和數(shù)組等。項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.1

HTML中的圖像在HTML中使用圖像標(biāo)簽<img>來(lái)添加圖像，具體的代碼如下：<imgsrc="image/building.jpg"width="300"height="300"alt="newbuilding"/>其中，src是圖像的源屬性，描述圖像的來(lái)源，其值為圖像的存儲(chǔ)地址URL，可以是絕對(duì)地址，也可以是相對(duì)地址；width和height分別為圖像的寬度和高度；alt為替換文本屬性，當(dāng)瀏覽器無(wú)法載入圖像時(shí)，則以其中定義的文本替換圖像，以此給出未載入圖像的相關(guān)說(shuō)明。項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.1

HTML中的圖像除了這幾個(gè)屬性外，HTML中的圖像還有其它一些屬性及HTML中的標(biāo)準(zhǔn)屬性，在表8-1給出<img>標(biāo)簽的常見(jiàn)屬性。利用HTML圖像標(biāo)簽<img>的屬性可以控制圖像的各種顯示狀態(tài)。屬性可輸入值或單位描述srcURL圖像源屬性alttext圖像替換屬性widthpixels/%圖像寬度屬性Heightpixels/%圖像高度屬性Aligntop/bottom/middle/left/right圖像排列屬性Borderpixels圖像周?chē)倪吙驅(qū)傩訦spacepixels圖像左側(cè)、右側(cè)的空白屬性Vspacepixels圖像頂部、底部的空白屬性項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.1

HTML中的圖像【例8-1】HTML圖像標(biāo)簽及其屬性。編寫(xiě)網(wǎng)頁(yè)界面，使用表格來(lái)規(guī)范各項(xiàng)輸出內(nèi)容的大小和位置，程序運(yùn)行結(jié)果如圖8-2所示。項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.2

JavaScript中的圖像

JavaScript中與圖像相關(guān)的主要有Image對(duì)象、IMG對(duì)象和document對(duì)象的images屬性。

IMG對(duì)象與Image對(duì)象類(lèi)似，只是前者最初僅被IE瀏覽器所支持，而后者被Netscape所支持。當(dāng)然，現(xiàn)在這兩個(gè)瀏覽器都支持這兩類(lèi)對(duì)象。因此，本書(shū)主要以Image對(duì)象為例來(lái)介紹。

可以通過(guò)構(gòu)造函數(shù)在JavaScript中創(chuàng)建新的Image對(duì)象：new

Image

([integerwidth],[integerheight]);其中的寬度width和高度height參數(shù)可選。項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.2

JavaScript中的圖像實(shí)際上，在HTML網(wǎng)頁(yè)中，每個(gè)<img>標(biāo)簽都創(chuàng)建了一個(gè)Image對(duì)象。在JavaScript中創(chuàng)建新的Image對(duì)象后，就可以對(duì)相應(yīng)的圖像進(jìn)行操作。Image對(duì)象與其它對(duì)象類(lèi)似，通過(guò)一些事件處理程序來(lái)捕獲相應(yīng)的事件發(fā)生來(lái)操作圖像。表8-2給出了Image對(duì)象的常見(jiàn)屬性。屬性描述src圖像源屬性lowsrc低分辨率圖像源屬性name圖像名字屬性width圖像寬度屬性height圖像高度屬性complete圖像裝載狀態(tài)屬性border圖像周?chē)倪吙驅(qū)傩詇space圖像左側(cè)、右側(cè)的空白屬性vspace圖像頂部、底部的空白屬性x圖像在客戶(hù)端瀏覽器顯示的水平坐標(biāo)y圖像在客戶(hù)端瀏覽器顯示的垂直坐標(biāo)項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.2

JavaScript中的圖像【例8-2】Image對(duì)象屬性的使用。

(1)編寫(xiě)網(wǎng)頁(yè)界面，使用表格來(lái)規(guī)范各項(xiàng)輸出內(nèi)容的大小和位置

(2)對(duì)于Image對(duì)象屬性的改變通過(guò)點(diǎn)擊鼠標(biāo)事件處理程序的定義來(lái)實(shí)現(xiàn)。本例中主要對(duì)圖像的尺寸、邊距、對(duì)齊以及圖像的變換進(jìn)行了示范，程序運(yùn)行結(jié)果如圖8-3所示。項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.3圖像的樣式與控制還有一種對(duì)圖像的控制是將圖像作為背景，通過(guò)對(duì)背景的樣式屬性進(jìn)行操作實(shí)現(xiàn)的。表8-3給出與圖像有關(guān)的樣式屬性。其中“背景”可以是在幾乎任意HTML元素中，如網(wǎng)頁(yè)、表格、表格中的單元格等。樣式屬性JavaScript語(yǔ)法描述background-attachmentbackgroundAttachment背景圖像是否固定。background-imagebackgroundImage把圖像設(shè)置為背景。background-positionbackgroundPosition設(shè)置背景圖像的起始位置。background-repeatbackgroundRepeat設(shè)置背景圖像是否及如何重復(fù)。項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.3圖像的樣式與控制1.背景圖像要把圖像放入背景，需要使用background-image屬性。background-image屬性的默認(rèn)值是none，表示背景上沒(méi)有放置任何圖像。如果需要設(shè)置一個(gè)背景圖像，必須為這個(gè)屬性設(shè)置一個(gè)URL值：<tdid="numT"width="80"style="background-Image:url(img0.jpg)"></td>項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.3圖像的樣式與控制2.圖像重復(fù)作為背景的圖像是無(wú)法壓縮或放大的，但是可以將圖像在背景中平鋪。如果需要在頁(yè)面上對(duì)背景圖像進(jìn)行平鋪，可以使用background-repeat屬性。屬性值repeat導(dǎo)致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x和repeat-y分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)，no-repeat則不允許圖像在任何方向上平鋪：<tdid="numT"style="background-Image:url(img.jpg);background-repeat:no-repeat"></td>默認(rèn)地，背景圖像將從一個(gè)元素的左上角開(kāi)始。項(xiàng)目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屬性值的定義方法有很多?？梢允褂靡恍瓣P(guān)鍵字”，如top、bottom、left、right和center。通常，這些關(guān)鍵字一般都是成對(duì)出現(xiàn)，但也不總是這樣；

另外，還可以使用“長(zhǎng)度值”，如100px或5cm；除此之外，還可以使用“百分?jǐn)?shù)值”。項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.3圖像的樣式與控制3.圖像定位當(dāng)然，對(duì)于背景圖像的background-position屬性值不同的定義方法其效果也略有差異。

(1)關(guān)鍵字關(guān)鍵字定義background-position屬性值的方法最容易理解，其作用方法如其名稱(chēng)所示。例如，topright使圖像放置在元素內(nèi)邊距區(qū)的右上角。項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.3圖像的樣式與控制3.圖像定位

(1)關(guān)鍵字根據(jù)規(guī)范，位置關(guān)鍵字可以按任何順序出現(xiàn)，只要保證不超過(guò)兩個(gè)關(guān)鍵字：一個(gè)對(duì)應(yīng)水平方向，另一個(gè)對(duì)應(yīng)垂直方向。如果只出現(xiàn)一個(gè)關(guān)鍵字，則認(rèn)為另一個(gè)關(guān)鍵字是center。所以，如果希望單元格的中部上方出現(xiàn)一個(gè)圖像，只需如下代碼：<tdid="numT"style="background-Image:url(img.jpg);

background-repeat:no-repeat;

background-position:top;"></td>下面是等價(jià)的位置關(guān)鍵字：?jiǎn)我魂P(guān)鍵字等價(jià)的關(guān)鍵字centercentercentertoptopcenter或centertopbottombottomcenter或centerbottomrightrightcenter或centerrightleftleftcenter或centerleft項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.3圖像的樣式與控制3.圖像定位

(2)百分?jǐn)?shù)值百分?jǐn)?shù)定義background-position屬性值的方法略為復(fù)雜。假設(shè)希望將圖像在其元素中居中，可以通過(guò)如下語(yǔ)句實(shí)現(xiàn)：<tdid="numT"style="background-Image:url(img.jpg);

background-repeat:no-repeat;

background-position:

50%50%;"></td>通過(guò)上面的設(shè)置，圖像的中心與單元格元素的中心對(duì)齊。也就是說(shuō)，圖像中描述為50%50%的點(diǎn)（中心點(diǎn)）與元素中描述為50%50%的點(diǎn)（中心點(diǎn)）對(duì)齊。項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.3圖像的樣式與控制3.圖像定位

(2)百分?jǐn)?shù)值如果圖像位于0%0%，其左上角將放在元素內(nèi)邊距區(qū)的左上角。如果圖像位置是100%100%，會(huì)使圖像的右下角放至元素的右下角。

因此，把圖像放在水平方向2/3、垂直方向1/3處，可以這樣：<tdid

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

background-repeat:no-repeat;

background-position:

66%33%;"></td>項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.3圖像的樣式與控制3.圖像定位

(2)百分?jǐn)?shù)值如果只提供一個(gè)百分?jǐn)?shù)值，所提供的這個(gè)值將用作水平值，垂直值將假設(shè)為50%。

background-position屬性的默認(rèn)值是0%0%，在功能上相當(dāng)于topleft。因此，當(dāng)此屬性值缺省時(shí)，背景圖像總是從元素內(nèi)邊距區(qū)的左上角開(kāi)始平鋪。項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.3圖像的樣式與控制3.圖像定位

(3)長(zhǎng)度值長(zhǎng)度值定義background-position屬性值的方法設(shè)置的是圖像的左上角相對(duì)于元素內(nèi)邊距區(qū)左上角的偏移，偏移參照點(diǎn)是元素的左上角。

比如，如果設(shè)置值為50px100px，圖像的左上角將在元素內(nèi)邊距區(qū)左上角向右50像素、向下100像素的位置上：<tdid="numT"style="background-Image:url(img.jpg);

background-repeat:no-repeat;

background-position:

50px100px;"></td>項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.3圖像的樣式與控制3.圖像定位【例8-3】使用樣式屬性對(duì)圖像的分割。

(1)編寫(xiě)網(wǎng)頁(yè)界面，使用<div>來(lái)輸出圖像表格，使用列表框來(lái)選擇分割的大小項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.3圖像的樣式與控制3.圖像定位【例8-3】使用樣式屬性對(duì)圖像的分割。

(1)編寫(xiě)網(wǎng)頁(yè)界面，使用<div>來(lái)輸出圖像表格，使用列表框來(lái)選擇分割的大小

(2)對(duì)于圖像的分割和選擇都是通過(guò)樣式屬性來(lái)實(shí)現(xiàn)，程序運(yùn)行結(jié)果如圖8-4所示。項(xiàng)目8：圖像拼圖游戲8.2圖像的使用8.2.3圖像的樣式與控制4.圖像關(guān)聯(lián)如果文檔比較長(zhǎng)，那么當(dāng)文檔向下滾動(dòng)時(shí)，背景圖像也會(huì)隨之滾動(dòng)。當(dāng)文檔滾動(dòng)到超過(guò)圖像的位置時(shí)，圖像就會(huì)消失?？梢酝ㄟ^(guò)background-attachment屬性防止這種滾動(dòng)。通過(guò)這個(gè)屬性，可以聲明圖像相對(duì)于可視區(qū)是固定的（fixed），因此不會(huì)受到滾動(dòng)的影響：<tdid="numT"style="background-Image:url(img.jpg);

background-repeat:no-repeat;

background-position:left;

background-attachment:fixed;"></td>項(xiàng)目8：圖像拼圖游戲8.3圖像拼圖的設(shè)計(jì)與實(shí)現(xiàn)8.3.1圖像拼圖游戲的界面設(shè)計(jì)與實(shí)現(xiàn)

運(yùn)行狀態(tài)顯示區(qū)

游戲操作區(qū)

提示圖像游戲設(shè)置及幫助信息區(qū)項(xiàng)目8：圖像拼圖游戲8.3圖像拼圖的設(shè)計(jì)與實(shí)現(xiàn)8.3.1圖像拼圖游戲的界面設(shè)計(jì)與實(shí)現(xiàn)1.主界面的設(shè)計(jì)與實(shí)現(xiàn)主界面中游戲標(biāo)題、幫助信息通常不會(huì)發(fā)生改變。因此，采用靜態(tài)的頁(yè)面設(shè)計(jì)，而游戲運(yùn)行狀態(tài)區(qū)、操作區(qū)及游戲難度設(shè)置顯示的信息需隨游戲的進(jìn)程而不斷變化，所以采用動(dòng)態(tài)頁(yè)面和選擇標(biāo)簽的設(shè)計(jì)形式。游戲區(qū)采用表格標(biāo)簽<table>定義，并使用水平分隔線(xiàn)標(biāo)簽<hr>對(duì)標(biāo)題與游戲區(qū)進(jìn)行分割。在游戲區(qū)的表格中嵌套了子表格來(lái)實(shí)現(xiàn)游戲運(yùn)行狀態(tài)、嵌入的<div>區(qū)塊來(lái)接受動(dòng)態(tài)的游戲操作子表格。項(xiàng)目8：圖像拼圖游戲8.3圖像拼圖的設(shè)計(jì)與實(shí)現(xiàn)8.3.1圖像拼圖游戲的界面設(shè)計(jì)與實(shí)現(xiàn)2.游戲運(yùn)行分區(qū)的設(shè)計(jì)與實(shí)現(xiàn)圖像拼圖游戲的操作區(qū)也采用表格的形式顯示。表格的單元格以子圖像為背景，初始化時(shí)先按照原圖排列，然后調(diào)用子圖像隨機(jī)分布函數(shù)將每一個(gè)子圖像分布在單元格中。

為方便讀者理解和用戶(hù)操作，在每個(gè)子圖像上標(biāo)注出其序號(hào)，這一變化過(guò)程在某些瀏覽器上可能看不到，只能看到最終的結(jié)果。單元格的數(shù)量（即游戲難度）以選擇標(biāo)簽的形式確定，用戶(hù)可以通過(guò)鼠標(biāo)選擇實(shí)現(xiàn)難度設(shè)置。項(xiàng)目8：圖像拼圖游戲8.3圖像拼圖的設(shè)計(jì)與實(shí)現(xiàn)8.3.1圖像拼圖游戲的界面設(shè)計(jì)與實(shí)現(xiàn)2.游戲運(yùn)行分區(qū)的設(shè)計(jì)與實(shí)現(xiàn)由于游戲操作區(qū)的顯示界面會(huì)隨用戶(hù)的操作而發(fā)生變化，因此，實(shí)現(xiàn)時(shí)采用函數(shù)形式。在定義出相應(yīng)的表格、表行以及單元格的格式后，依據(jù)用戶(hù)設(shè)置的行與列的數(shù)量采用二重嵌套循環(huán)的形式繪制出表格。對(duì)于需要拼圖的圖像利用單元格對(duì)象的background-position屬性設(shè)置每一個(gè)單元格的背景圖像的起點(diǎn)的不同，從而實(shí)現(xiàn)圖像分割的效果。項(xiàng)目8：圖像拼圖游戲8.3圖像拼圖的設(shè)計(jì)與實(shí)現(xiàn)8.3.2圖像拼圖游戲應(yīng)用邏輯的設(shè)計(jì)與實(shí)現(xiàn)與數(shù)字拼圖一樣，圖像拼圖游戲在應(yīng)用邏輯上也是包括主界面、子圖像分布和游戲運(yùn)行狀態(tài)的初始化。

當(dāng)用戶(hù)進(jìn)行游戲難度的設(shè)置或子圖像重置后，將再次執(zhí)行初始化操作。初始化完成后，只有當(dāng)用戶(hù)鍵入上、下、左、右四個(gè)方向鍵時(shí)才開(kāi)始游戲。用戶(hù)通過(guò)方向鍵將空白單元格與其周?chē)淖訄D像進(jìn)行交換，同時(shí)還進(jìn)行子圖像編號(hào)序列的交換。最終目標(biāo)是將所有的隨機(jī)分布的子圖像移動(dòng)至與原圖一致的位置，即子圖像編號(hào)按順序排列。在游戲的過(guò)程中，可以參考游戲界面右邊的原圖縮小圖。項(xiàng)目8：圖像拼圖游戲8.3圖像拼圖的設(shè)計(jì)與實(shí)現(xiàn)8.3.2圖像拼圖游戲應(yīng)用邏輯的設(shè)計(jì)與實(shí)現(xiàn)1.子圖像隨機(jī)分布的設(shè)計(jì)與實(shí)現(xiàn)按照游戲規(guī)則，原圖像根據(jù)用戶(hù)的設(shè)置單元格數(shù)分割成若干個(gè)子圖像后隨機(jī)分布在設(shè)定的單元格中，并且有一個(gè)單元格為空白，可與其周?chē)淖訄D像互換。

對(duì)于圖像拼圖，雖然游戲本身并不要求對(duì)每一個(gè)子圖像進(jìn)行編號(hào)，但本例中對(duì)每一個(gè)子圖像進(jìn)行了相應(yīng)的編號(hào)，并將其編號(hào)標(biāo)注在子圖像上。與數(shù)字拼圖一樣，在進(jìn)行子圖像隨機(jī)分布時(shí)，也要求子圖像編號(hào)排列的逆序數(shù)為偶數(shù)，這樣才能保證最終恢復(fù)圖像的排列與原圖一致。項(xiàng)目8：圖像拼圖游戲8.3圖像拼圖的設(shè)計(jì)與實(shí)現(xiàn)8.3.2圖像拼圖游戲應(yīng)用邏輯的設(shè)計(jì)與實(shí)現(xiàn)1.子圖像隨機(jī)分布的設(shè)計(jì)與實(shí)現(xiàn)單元格中的子圖像編號(hào)隨機(jī)分布由數(shù)組的sort()方法實(shí)現(xiàn)，每一單元格中的圖像是根據(jù)生成的隨機(jī)分布的子圖像編號(hào)和表格初始化時(shí)定義的每一單元格的圖像起點(diǎn)位置共同確定圖像可顯示部分，從視覺(jué)效果上實(shí)現(xiàn)圖像的分割和隨機(jī)分布具體的實(shí)現(xiàn)見(jiàn)隨機(jī)布局函數(shù)initNums()：項(xiàng)目8：圖像拼圖游戲8.3圖像拼圖的設(shè)計(jì)與實(shí)現(xiàn)8.3.2圖像拼圖游戲應(yīng)用邏輯的設(shè)計(jì)與實(shí)現(xiàn)2.游