武龍

（廣東省機械高級技工學校，廣州 510450）

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

武龍

（廣東省機械高級技工學校，廣州 510450）

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

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

0 引言

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

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

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

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

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

圖1 游戲效果圖

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

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

圖2 游戲過程主要處理流程

2 游戲的界面與動畫效果設(shè)計

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

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

3 方塊相連的判定算法

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

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

表1 游戲中的特殊方塊

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

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

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

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

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

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

……

圖3 判定算法的處理步驟

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

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

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

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

4 方塊的連鎖消除

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

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

圖5 方塊連鎖消除流程

5 結(jié)語

本文介紹了網(wǎng)頁消消樂游戲制作的主體流程和關(guān)鍵部分的處理算法，整個游戲系統(tǒng)中還有方塊的鼠標拖拽功能、特殊方塊的碰撞功能、游戲計分關(guān)卡系統(tǒng)等相對次要的部分，也可結(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)域為

2017-02-09

2017-04-11

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