HTML5圍住神經(jīng)貓游戲網(wǎng)頁版是一款基于HTML5、jquery、Typescript等技術(shù)制作的圍住神經(jīng)貓游戲。

先給大家附上演示和源碼下載，點(diǎn)擊這里  查看演示     下載源碼

去年風(fēng)靡微信朋友圈的小游戲“圍住神經(jīng)貓”，我也試著做了一下。游戲是用Egret引擎開發(fā)的，因?yàn)镋gret是用Typescript語言構(gòu)建的，因此這里游戲也是用Typescript來開發(fā)的。

游戲規(guī)則：

點(diǎn)擊畫面上的灰色格子，慢慢將神經(jīng)貓圍起來抓住。如果貓到達(dá)游戲區(qū)邊緣則游戲失敗。

準(zhǔn)備素材

在網(wǎng)上搜索“圍住神經(jīng)貓”游戲，打開一個(gè)，并打開調(diào)試界面，從network中或者resource中把貓、灰色圓圈、橙色圓圈等圖片扒下來保存到本地。

需要注意的是，Egret新的MovieCilp架構(gòu)設(shè)計(jì)以及MovieClip數(shù)據(jù)格式標(biāo)準(zhǔn)都與早期有些不同，我從網(wǎng)上扒下來的已經(jīng)不適用了，根據(jù)新的數(shù)據(jù)格式標(biāo)準(zhǔn)做修改后mc的json文件如下:

{"mc":{
 "stay":{
 "frameRate":20,
 "labels":[],
 "frames":[
   {"res":"stay0000","x":0,"y":0},
   {"res":"stay0001","x":0,"y":0},
   {"res":"stay0002","x":0,"y":0},
   {"res":"stay0003","x":0,"y":0},
   {"res":"stay0004","x":0,"y":0},
   {"res":"stay0005","x":0,"y":0},
   {"res":"stay0006","x":0,"y":0},
   {"res":"stay0007","x":0,"y":0},
   {"res":"stay0008","x":0,"y":0},
   {"res":"stay0009","x":0,"y":0},
   {"res":"stay0010","x":0,"y":0},
   {"res":"stay0011","x":0,"y":0},
   {"res":"stay0012","x":0,"y":0},
   {"res":"stay0013","x":0,"y":0},
   {"res":"stay0014","x":0,"y":0},
   {"res":"stay0015","x":0,"y":0}
 ]
 }},
 "res":{
  "stay0000": {"x":0,"y":0,"w":61,"h":93},
  "stay0001": {"x":61,"y":0,"w":61,"h":93},
  "stay0002": {"x":122,"y":0,"w":61,"h":93},
  "stay0003": {"x":183,"y":0,"w":61,"h":93},
  "stay0004": {"x":0,"y":93,"w":61,"h":93},
  "stay0005": {"x":61,"y":93,"w":61,"h":93},
  "stay0006": {"x":122,"y":93,"w":61,"h":93},
  "stay0007": {"x":183,"y":93,"w":61,"h":93},
  "stay0008": {"x":0,"y":186,"w":61,"h":93},
  "stay0009": {"x":61,"y":186,"w":61,"h":93},
  "stay0010": {"x":122,"y":186,"w":61,"h":93},
  "stay0011": {"x":183,"y":186,"w":61,"h":93},
  "stay0012": {"x":0,"y":279,"w":61,"h":93},
  "stay0013": {"x":61,"y":279,"w":61,"h":93},
  "stay0014": {"x":122,"y":279,"w":61,"h":93},
  "stay0015": {"x":183,"y":279,"w":61,"h":93}
 }}

編寫代碼

主要總結(jié)下我在開發(fā)過程中遇到的主要的兩個(gè)難題。

問題一，貓?jiān)撊绾翁优埽?/span>

在這個(gè)游戲中，每個(gè)圓圈都可能有三種狀態(tài)

可通行，灰色圓圈表示

有路障，不可行，橙色圓圈表示

被貓占領(lǐng)，灰色圓圈，貓的動(dòng)畫疊置于其上

每當(dāng)點(diǎn)擊了灰色圓圈，就會(huì)將其變成橙色圓圈即路障狀態(tài)，同時(shí)貓會(huì)緊跟著點(diǎn)擊的動(dòng)作也向周邊走一步。

行走方向

游戲區(qū)由9*9個(gè)圓圈組成，偶數(shù)行縮進(jìn)圓圈半徑大小的寬度，這樣的布局導(dǎo)致，貓理論上可以有6個(gè)行走方向（每次只能走一步），分別是左，左上，右上，右，右下，左下，如這些位置上的圓圈為路障狀態(tài)，則相應(yīng)方向不可通行。

如果這六個(gè)方向的鄰居有五個(gè)都為路障，那當(dāng)然很好選擇線路，剩下的那個(gè)就是唯一的出路了，但是顯然情況不可能如此簡單。我們遇到的更多的情況是，六個(gè)方向的鄰居上，有直接為路障狀態(tài)的（那自然絕對(duì)不走這一步），有是可通行狀態(tài)的，但是彼此向邊緣的可達(dá)性不同。

比如上圖中，目前，貓的左方向走三步即可到達(dá)邊緣，右上、右下向走四步可達(dá)，左上、右方向上可走一步但即遇路障，左下方向走三步遇路障。這時(shí)候我們當(dāng)然應(yīng)該為這六個(gè)方向的優(yōu)先級(jí)排個(gè)序。

優(yōu)先級(jí)

我是這樣設(shè)定優(yōu)先級(jí)順序的：

一路通行的方向>會(huì)出現(xiàn)路障的方向，如此圖中左、右上、右下>左上、右、左下

一路通行的方向中，離邊緣越近優(yōu)先級(jí)越高，如此圖中左>右上、右下

會(huì)出現(xiàn)路障的方向中，可走的步數(shù)越多優(yōu)先級(jí)越高，如此圖中左下>右、左上

下面將這些約定的可達(dá)性用數(shù)值來體現(xiàn)以便比較，設(shè)這個(gè)值為accessibility，值越大優(yōu)先級(jí)越高。

一路通行的方向

accessibility = 1/stepToEdge; //stepToEdge表示離邊緣還有幾步

會(huì)出現(xiàn)路障的方向

accessibility = (-1)/stepToBlock;//stepToBlock表示離路障的距離

接下來考慮分母如果為0怎么辦，在第一種情況中，分母為0，表示貓當(dāng)前已經(jīng)在邊緣了，那么也不用判斷優(yōu)先級(jí)了，游戲已經(jīng)失敗了。第二種情況中，分母為0表示出門即遇路障，這個(gè)方向不用考慮了是絕對(duì)走不通的，那么它的優(yōu)先級(jí)就定為-1。

這樣一輪算下來，六個(gè)方向上的accessibility值分別為：

左：1/3

左上：-1

右上：1/4

右：-1

右下：1/4

左下：-1/3

這樣比較下來優(yōu)先級(jí)應(yīng)該是左>右上>右下>左下>左上>右。

為什么左上與右，右上與右下，這兩組內(nèi)部的值明明一樣，我們依然是排出了順序呢？只是因?yàn)槲覀冇?jì)算是從左方向開始順時(shí)針旋轉(zhuǎn)的。如果值一樣，那就看出現(xiàn)的順序了。

所以在上圖中這種情況下，貓會(huì)向左走一步。

問題二，如何判斷貓被圍住了？

在網(wǎng)上玩這個(gè)游戲的時(shí)候，我發(fā)現(xiàn)當(dāng)貓被圍住的時(shí)候會(huì)換成一種“被圍住”的動(dòng)作，那么該如何判斷貓被圍住了，然后改變它的動(dòng)作動(dòng)畫？

“被圍住”與“被抓住”不一樣，它早于“被抓住”的狀態(tài)。當(dāng)貓無路可走的時(shí)候，它就“被抓住”了，游戲獲勝。而“被圍住”指的是貓暫時(shí)還有路可走，但是已經(jīng)被包圍住了，垂死掙扎而已，如下圖。

我的思路是這樣的：

從貓當(dāng)前的位置找六個(gè)方向中可通行的鄰居，然后從這些鄰居出發(fā)，再找它們各自的可通行鄰居，一直這樣找下去，一邊找的過程中，一邊判斷當(dāng)前已經(jīng)找到的鄰居中有沒有處在游戲區(qū)邊緣的，如果有，那么尋找過程提前結(jié)束，判斷結(jié)果是：貓沒有被圍住。如果直到所有的可通行鄰居都找到了，里面都沒有處在游戲區(qū)邊緣的，那么判斷結(jié)果是：貓被圍住了。
接下來用代碼實(shí)現(xiàn)這個(gè)判斷過程。

首先，需要準(zhǔn)備一個(gè)方法，判斷圓圈是否已經(jīng)處在圓圈邊緣了，假設(shè)這個(gè)方法名及參數(shù)如下，內(nèi)部實(shí)現(xiàn)比較簡單這里就不貼了。

/*
判斷傳入的circle是否在邊界上
 */
private isCircleAtEdge(circle:Circle):boolean {
 ...
}

再準(zhǔn)備一個(gè)方法，獲取某圓圈周圍某方向的鄰居。

private getCircleNeighbor(circle:Circle,direction:Direction):Circle{
  ...
}

最后，是判斷的核心方法。

/*
能否在circle位置出發(fā)找到路線到達(dá)邊緣
*/
private canExitAt(circle:Circle):boolean{
 var ignoreArr=[];//不用再處理的circle集合
 var toDealWithArr=[circle];//還需進(jìn)行判斷的circle集合
 while(true){
  if(toDealWithArr.length<1){
   return false;
  }else{
   var _first=toDealWithArr.shift();
   ignoreArr.push(_first);
   if(_first.getStatus()!==CircleStatus.Blocked&&this.isCircleAtEdge(_first)){
    return true;
   }else{
    for(var i=Direction.LEFT;i<=Direction.BOTTOM_LEFT;i++){
     var nbr=this.getCircleNeighbor(_first,i);
     if(!(ignoreArr.indexOf(nbr)>-1||toDealWithArr.indexOf(nbr)>-1))
     if(nbr.getStatus()!==CircleStatus.Available){
      ignoreArr.push(nbr);
     }else{
      toDealWithArr.push(nbr);
     }
    }
   }
  }
 }
}

在方法體的最開始，準(zhǔn)備好兩個(gè)數(shù)組，一個(gè)用來存儲(chǔ)不用再處理的圓圈集合ignoreArr，另一個(gè)用來存儲(chǔ)還需要進(jìn)行判斷的圓圈集合toDealWithArr。每找到一個(gè)可通行的鄰居，首先要判斷它是不是第一次出現(xiàn)（因?yàn)閹讉€(gè)圓圈可能會(huì)有共同的鄰居，所以一個(gè)圓圈可能因?yàn)樗嵌鄠€(gè)圓圈的鄰居而被找到多次），判斷的標(biāo)準(zhǔn)就是它有沒有出現(xiàn)在ignoreArr或toDealWithArr里，如果沒有那么就是第一次出現(xiàn)，如果它是路障，那么塞到ignoreArr，如果不是路障，那么推入toDealWithArr尾部等待判斷。

每次循環(huán)開始時(shí)，我們會(huì)從toDealWithArr頭部彈出一個(gè)圓圈對(duì)象，對(duì)它是否在邊緣做判斷，如果是，那么返回true跳出循環(huán)，貓沒有被圍住，它可以通過某條路線到達(dá)邊緣。如果toDealWithArr全部判斷完了都不在邊緣，那么返回false，貓被圍住了，它的直接鄰居及眾多間接鄰居中沒有一個(gè)是在邊緣的。

最新評(píng)論