武龍

（廣東省機(jī)械高級(jí)技工學(xué)校，廣州 510450）

基于HTML5和JavaScript的消消樂游戲的設(shè)計(jì)和實(shí)現(xiàn)

武龍

（廣東省機(jī)械高級(jí)技工學(xué)校，廣州 510450）

隨著網(wǎng)頁(yè)中Flash的沒落和HTML5功能的日漸完善，網(wǎng)頁(yè)中的功能效果將通過(guò)HTML5和JavaScript來(lái)實(shí)現(xiàn)，包括網(wǎng)頁(yè)游戲也不例外。設(shè)計(jì)一個(gè)網(wǎng)頁(yè)版的消消樂游戲，通過(guò)HTML5實(shí)現(xiàn)游戲的界面和動(dòng)畫效果，使用JavaScript控制游戲運(yùn)作，完善游戲過(guò)程中的判斷算法，實(shí)現(xiàn)游戲的主體功能。

HTML5；JavaScript；消消樂；游戲設(shè)計(jì)；算法

0 引言

近幾年各種小型游戲興起，成為上班途中、工作學(xué)習(xí)之余利用零散的時(shí)間放松身心的消遣活動(dòng)，擁有廣大的受眾群體。隨著近年來(lái)網(wǎng)頁(yè)技術(shù)的不斷發(fā)展和完善，使用HTML5和JavaScript制作游戲已成為一種主流，網(wǎng)頁(yè)游戲擁有跨平臺(tái)、免安裝免更新的優(yōu)點(diǎn)，使用手機(jī)、平板或電腦的網(wǎng)頁(yè)瀏覽器便能實(shí)現(xiàn)操作。

本文以HTML5和JavaScript作為平臺(tái)，實(shí)現(xiàn)消消樂游戲（三消游戲）的游戲主體設(shè)計(jì)，主要介紹游戲界面的實(shí)現(xiàn)、游戲方塊相連的判定和消除、游戲過(guò)程中動(dòng)畫效果的實(shí)現(xiàn)。

1 游戲的主體設(shè)計(jì)思路

在網(wǎng)頁(yè)載體中實(shí)現(xiàn)游戲效果，一般有下面幾種方法：第一種通過(guò)Flash制作并加載到網(wǎng)頁(yè)中，但現(xiàn)在各種瀏覽器已逐漸放棄對(duì)Flash的支持；第二種使用網(wǎng)頁(yè)的標(biāo)簽，通過(guò)JavaScript（下面簡(jiǎn)稱JS）在標(biāo)簽內(nèi)繪制圖形，將游戲每一個(gè)步驟的效果按一定的幀數(shù)繪制出來(lái)；第三種直接使用網(wǎng)頁(yè)的標(biāo)簽和CSS樣式制作游戲的界面，通過(guò)JS控制標(biāo)簽的效果實(shí)現(xiàn)游戲功能。第三種方法適用于實(shí)現(xiàn)簡(jiǎn)單的游戲效果，游戲中如果存在復(fù)雜動(dòng)畫效果，使用標(biāo)簽實(shí)現(xiàn)會(huì)比較適合。由于消消樂游戲界面簡(jiǎn)單，基本的動(dòng)畫效果可以使用JS或CSS實(shí)現(xiàn)，這里采用第三種方法制作。

如下面的圖1的游戲?qū)嶋H界面效果，消消樂是一款以縱橫網(wǎng)格狀排列的不同樣式類型的方塊，通過(guò)玩家操作調(diào)換上下或左右相鄰方塊的位置，實(shí)現(xiàn)3個(gè)或3個(gè)以上相同類型方塊呈直線相連，并消除得分的游戲，以特殊方式連接消除的方塊還會(huì)產(chǎn)生帶有特殊能力的方塊。（試玩網(wǎng)址http://wulong.96.lt）

圖1 游戲效果圖

如圖2設(shè)計(jì)游戲的主要處理流程，在網(wǎng)頁(yè)打開時(shí)將進(jìn)行游戲的初始化處理，游戲的方塊將按6或7種不同的顏色或樣式隨機(jī)生成，并按設(shè)定好的行列數(shù)網(wǎng)格狀排列。但由于隨機(jī)生成的方塊會(huì)存在樣式3個(gè)或3個(gè)以上相連的情況，默認(rèn)情況下不應(yīng)該存在。這時(shí)需要對(duì)全圖的方塊都進(jìn)行相連的判斷，如果存在上述情況，將這些方塊直接清除，并補(bǔ)充新的方塊，再一次進(jìn)行全圖的判斷，循環(huán)這個(gè)判斷、清除、補(bǔ)充的過(guò)程，直到不再存在3個(gè)方塊相連，停止游戲初始化的處理，等待玩家的操作。

游戲初始化后，玩家便可進(jìn)行操作，通過(guò)JS為每一個(gè)方塊添加鼠標(biāo)操作事件，玩家點(diǎn)擊或拖拽實(shí)現(xiàn)相鄰方塊之間的互換，程序?qū)@兩個(gè)方塊進(jìn)行判斷，是否存在相同樣式相連的情況。存在相連則清除方塊，讓被清除方塊的上方方塊下落補(bǔ)充位置，并重新補(bǔ)充缺失的方塊。之后與初始化的處理方式一樣，重復(fù)判斷、清除、補(bǔ)充的過(guò)程直到停止，讓玩家進(jìn)行下一輪的操作。如果判斷交換的方塊沒有相連的情況，還原交換的方塊，讓玩家繼續(xù)操作。游戲過(guò)程中會(huì)統(tǒng)計(jì)玩家操作的回合數(shù)和得分，由此設(shè)定游戲的輸贏條件，如20回合內(nèi)達(dá)到一定的分?jǐn)?shù)判定為贏，并停止游戲的運(yùn)行。

圖2 游戲過(guò)程主要處理流程

2 游戲的界面與動(dòng)畫效果設(shè)計(jì)

游戲界面使用網(wǎng)頁(yè)標(biāo)簽制作，先設(shè)置出水平排列的多列標(biāo)簽，再為每一列添加垂直排列的標(biāo)簽作為游戲的方塊，并為方塊標(biāo)簽設(shè)置不同的背景顏色或圖片以區(qū)分不同類型的方塊。由于網(wǎng)頁(yè)標(biāo)簽按從上向下的方式排列，游戲過(guò)程中清除方塊后，剩余的方塊會(huì)從下方向上補(bǔ)充，不符合游戲的效果。可以為整個(gè)游戲區(qū)域設(shè)置CSS樣式“transform:scaleY（-1）;”，使游戲區(qū)域垂直反轉(zhuǎn)變形，這樣標(biāo)簽的垂直方向上的排列方式將會(huì)顛倒，可以使方塊從上向下補(bǔ)充。另外垂直方向排列方塊的個(gè)數(shù)應(yīng)該為實(shí)際游戲界面中實(shí)際顯示的2倍，將位于上方多出的1倍方塊通過(guò)設(shè)置隱藏起來(lái)，為了在方塊被清除后，可以從隱藏的區(qū)域向下滑落補(bǔ)充的方塊，實(shí)現(xiàn)游戲過(guò)程的平滑銜接。

游戲過(guò)程中相鄰方塊的交換，方塊的消除、下落的等過(guò)程，可以使用jQuery（JS的延伸框架）或CSS實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫效果。如通過(guò)jQuery控制被消除方塊標(biāo)簽的高度，使高度逐漸變化為0，這樣上方的方塊就會(huì)因?yàn)橄路椒綁K逐漸變小而下落，產(chǎn)生動(dòng)畫效果。清除過(guò)程也可以付加上方塊的旋轉(zhuǎn)、放大、變得透明等效果，但部分變形效果jQuery無(wú)法實(shí)現(xiàn)，這時(shí)可以配合CSS的動(dòng)畫效果一起完成。

3 方塊相連的判定算法

相同樣式方塊相連的判定是整個(gè)游戲中最主要的部分，程序中并不會(huì)對(duì)每個(gè)方塊創(chuàng)建單獨(dú)的對(duì)象，而是直接將方塊的各種屬性參數(shù)直接以屬性的方式添加到方塊的標(biāo)簽上面，jQuery可以方便的寫入和讀取這些數(shù)據(jù)。

如果單純的判定方塊是否3個(gè)以上相連，只要讀取每個(gè)方塊標(biāo)簽的樣式參數(shù)，循環(huán)的判斷方塊在垂直方向上相連的情況，再循環(huán)判斷水平方向相連的情況，將符合條件的方塊添加標(biāo)記，之后再清除便可實(shí)現(xiàn)功能。但游戲中還有一種特殊的情況，在符合一定相連狀態(tài)的方塊，在消除的同時(shí)將會(huì)產(chǎn)生一個(gè)擁有特殊效果的方塊，具體看下面表格1的說(shuō)明。

表1 游戲中的特殊方塊

在判斷方塊相連的同時(shí)，還要判斷方塊是否滿足特殊方塊生成的條件，將通過(guò)兩個(gè)方法judge_line（t）（列判斷）和judge_row（t）（行判斷）交互完成處理，其中t為要進(jìn)行判斷的某個(gè)方塊對(duì)象，程序?qū)?huì)對(duì)與t方塊連接的所有同樣式方塊進(jìn)行判斷，找出能被消除的方塊和符合條件生成特殊效果的方塊。如圖3所示，程序處理完成后所有關(guān)聯(lián)方塊都會(huì)被付加上2種屬性，line用于記錄方塊在當(dāng)前列相連的數(shù)量，row記錄行方向的數(shù)量，通過(guò)這兩種屬性可判斷出方塊是否要被添加特殊方塊，如果方塊符合消除條件還會(huì)附加上mark屬性，用于之后的清除操作。

圖3中的1、2、3……是算法的處理順序和步驟，具體如下：

步驟1：先對(duì)t方塊使用judge_line（）進(jìn)行垂直方向判斷，方塊垂直方向的相連數(shù)為1，方塊被寫入line=1；

步驟2：使用judge_row（）判斷當(dāng)前方塊的水平方向，水平方向的相連數(shù)為3，3個(gè)方塊都寫入row=3，由于3個(gè)方塊中還有兩個(gè)方塊未進(jìn)行垂直判斷，將繼續(xù)步驟3、4的判斷；

步驟3：垂直方向的相連數(shù)為1，方塊被寫入line=1；

步驟4：垂直方向的相連數(shù)為4，方塊被寫入line= 4，此時(shí)又有3個(gè)方塊未進(jìn)行水平方向的判斷，將衍生出步驟5、7、8的判斷，其中步驟5和8又會(huì)衍生出步驟6和9的垂直判斷；

……

圖3 判定算法的處理步驟

當(dāng)無(wú)法繼續(xù)衍生下去時(shí)程序完成處理，此時(shí)每一個(gè)相連的方塊都會(huì)被添加上line、row屬性，如步驟2和4中交集的方塊，此時(shí)屬性為“l(fā)ine=4 row=3”，滿足T型相連的條件，將會(huì)被附加上特殊方塊s3的樣式。

圖4是方法judge_line（t）和judge_row（t）的處理流程，兩個(gè)方法將會(huì)相互的調(diào)用，judge_line（t）判斷某方塊垂直方向的相連數(shù)，并判斷該列方塊是否有未進(jìn)行水平方向判斷的，有則通過(guò)judge_row（t）衍生出水平方向的判斷，而水平方向的其它方塊又會(huì)衍生出垂直方向的判斷。如果某個(gè)方塊兩個(gè)方向都進(jìn)行了判斷，程序?qū)⑴袛嗨欠駶M足特殊方塊s3的生成條件。如果當(dāng)前列/行所有方塊都循環(huán)處理完后，最后再根據(jù)當(dāng)前列/行的長(zhǎng)度，判斷是否滿足特殊方塊s1/s2或s0的生成條件。設(shè)置了s的特殊方塊的mark屬性會(huì)被清除，以免之后消除方塊的步驟中直接被消除掉。

該算法可同時(shí)滿足對(duì)用戶操作方塊的判斷和進(jìn)行全圖判斷，用戶操作時(shí)單獨(dú)對(duì)交換位置的兩個(gè)方塊進(jìn)行判斷即可，全圖判斷時(shí)循環(huán)判斷每一個(gè)方塊，并跳過(guò)添加過(guò)line屬性的方塊，另外游戲初始化的全圖判斷不會(huì)產(chǎn)生特殊方塊。當(dāng)所有判斷結(jié)束后要清除掉所有的line、row屬性，以免影響到下一次的判斷。

圖4 方塊相連的判定算法流程

4 方塊的連鎖消除

方塊相連判定結(jié)束后，對(duì)添加了mark的標(biāo)簽執(zhí)行消除操作，使用JQuery和CSS控制方塊一邊逐漸旋轉(zhuǎn)一邊變得透明，之后控制方塊的高度逐漸變?yōu)?使上方的方塊產(chǎn)生下落的動(dòng)畫效果，最后徹底將方塊的標(biāo)簽移除。

在方塊消除的過(guò)程中可能會(huì)存在特殊方塊，此時(shí)特殊方塊的特殊消除效果會(huì)被觸發(fā)，而該效果可能又會(huì)觸發(fā)下一個(gè)特殊方塊，產(chǎn)生連鎖消除的效果。該過(guò)程參考圖5的處理流程，通過(guò)相連判定的標(biāo)簽會(huì)付加上mark=1的默認(rèn)數(shù)值，在第一輪清除動(dòng)畫執(zhí)行后，會(huì)判斷mark=1的方塊中是否存在特殊方塊。如果存在將計(jì)算出這些特殊方塊的消除范圍，將范圍內(nèi)的標(biāo)簽添加上mark=2的屬性，之后對(duì)mark=2的方塊執(zhí)行第2輪消除。再次判斷消除的對(duì)象中是否存在特殊方塊，添加mark=3的屬性……，如此重復(fù)下去產(chǎn)生連鎖消除的效果，直到消除對(duì)象中不再存在特殊方塊，最后徹底移除所有mark方塊的標(biāo)簽，完成整個(gè)消除過(guò)程。

圖5 方塊連鎖消除流程

5 結(jié)語(yǔ)

本文介紹了網(wǎng)頁(yè)消消樂游戲制作的主體流程和關(guān)鍵部分的處理算法，整個(gè)游戲系統(tǒng)中還有方塊的鼠標(biāo)拖拽功能、特殊方塊的碰撞功能、游戲計(jì)分關(guān)卡系統(tǒng)等相對(duì)次要的部分，也可結(jié)合HTML5和JavaScript的功能一一完成。

[1]hemin[OL].http://hemin.cn/jq/，2011.

Design and Im p lementation of HTML5 and JavaScript Based Tile-Matching Video Gam e

WU Long

（Guangdong Machinery Technician College，Guangzhou 510450）

With the decline of Flash in theWeb page and the gradual improvementof the function of HTML5,the function of the pagewill be real-ized by HTML5 and JavaScript,including the Web game is no exception.The design of a Web version of the consumer music game, through the HTML5 interface to achieve the game and animation effects,the use of JavaScript to control the operation of the game,im-prove the game in the process of the algorithm to achieve themain function of the game.

HTML5;JavaScript;Tile-Matching Video Game;Game Design;Algorithm

1007-1423（2017）12-0076-05

10.3969/j.issn.1007-1423.2017.12.020

武龍（1985-），男，廣東廣州人，本科，助理講師，從事領(lǐng)域?yàn)?/p>

2017-02-09

2017-04-11

計(jì)算機(jī)及網(wǎng)頁(yè)設(shè)計(jì)相關(guān)教學(xué)的一線課程