純HTML5制作圍住神經貓游戲-附源碼下載

2020-03-24 16:07:28

字體：大中小

來源：轉載

供稿：網友

HTML5圍住神經貓游戲網頁版是一款基于HTML5、html' target='_blank'>jquery、Typescript等技術制作的圍住神經貓游戲。先給大家附上演示和源碼下載，點擊這里查看演示下載源碼去年風靡微信朋友圈的小游戲“圍住神經貓”，我也試著做了一下。游戲是用Egret引擎開發的，因為Egret是用Typescript語言構建的，因此這里游戲也是用Typescript來開發的。游戲規則：點擊畫面上的灰色格子，慢慢將神經貓圍起來抓住。如果貓到達游戲區邊緣則游戲失敗。準備素材在網上搜索“圍住神經貓”游戲，打開一個，并打開調試界面，從network中或者resource中把貓、灰色圓圈、橙色圓圈等圖片扒下來保存到本地。需要注意的是，Egret新的MovieCilp架構設計以及MovieClip數據格式標準都與早期有些不同，我從網上扒下來的已經不適用了，根據新的數據格式標準做修改后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} }}編寫代碼主要總結下我在開發過程中遇到的主要的兩個難題。問題一，貓該如何逃跑？在這個游戲中，每個圓圈都可能有三種狀態可通行，灰色圓圈表示有路障，不可行，橙色圓圈表示被貓占領，灰色圓圈，貓的動畫疊置于其上每當點擊了灰色圓圈，就會將其變成橙色圓圈即路障狀態，同時貓會緊跟著點擊的動作也向周邊走一步。行走方向游戲區由9*9個圓圈組成，偶數行縮進圓圈半徑大小的寬度，這樣的布局導致，貓理論上可以有6個行走方向（每次只能走一步），分別是左，左上，右上，右，右下，左下，如這些位置上的圓圈為路障狀態，則相應方向不可通行。如果這六個方向的鄰居有五個都為路障，那當然很好選擇線路，剩下的那個就是唯一的出路了，但是顯然情況不可能如此簡單。我們遇到的更多的情況是，六個方向的鄰居上，有直接為路障狀態的（那自然絕對不走這一步），有是可通行狀態的，但是彼此向邊緣的可達性不同。比如上圖中，目前，貓的左方向走三步即可到達邊緣，右上、右下向走四步可達，左上、右方向上可走一步但即遇路障，左下方向走三步遇路障。這時候我們當然應該為這六個方向的優先級排個序。優先級我是這樣設定優先級順序的：一路通行的方向會出現路障的方向，如此圖中左、右上、右下左上、右、左下一路通行的方向中，離邊緣越近優先級越高，如此圖中左右上、右下會出現路障的方向中，可走的步數越多優先級越高，如此圖中左下右、左上下面將這些約定的可達性用數值來體現以便比較，設這個值為accessibility，值越大優先級越高。一路通行的方向accessibility = 1/stepToEdge; //stepToEdge表示離邊緣還有幾步
會出現路障的方向accessibility = (-1)/stepToBlock;//stepToBlock表示離路障的距離接下來考慮分母如果為0怎么辦，在第一種情況中，分母為0，表示貓當前已經在邊緣了，那么也不用判斷優先級了，游戲已經失敗了。第二種情況中，分母為0表示出門即遇路障，這個方向不用考慮了是絕對走不通的，那么它的優先級就定為-1。這樣一輪算下來，六個方向上的accessibility值分別為：左：1/3
左上：-1
右上：1/4
右：-1
右下：1/4
左下：-1/3
這樣比較下來優先級應該是左右上右下左下左上右。為什么左上與右，右上與右下，這兩組內部的值明明一樣，我們依然是排出了順序呢？只是因為我們計算是從左方向開始順時針旋轉的。如果值一樣，那就看出現的順序了。
所以在上圖中這種情況下，貓會向左走一步。問題二，如何判斷貓被圍住了？
在網上玩這個游戲的時候，我發現當貓被圍住的時候會換成一種“被圍住”的動作，那么該如何判斷貓被圍住了，然后改變它的動作動畫？
“被圍住”與“被抓住”不一樣，它早于“被抓住”的狀態。當貓無路可走的時候，它就“被抓住”了，游戲獲勝。而“被圍住”指的是貓暫時還有路可走，但是已經被包圍住了，垂死掙扎而已，如下圖。我的思路是這樣的：從貓當前的位置找六個方向中可通行的鄰居，然后從這些鄰居出發，再找它們各自的可通行鄰居，一直這樣找下去，一邊找的過程中，一邊判斷當前已經找到的鄰居中有沒有處在游戲區邊緣的，如果有，那么尋找過程提前結束，判斷結果是：貓沒有被圍住。如果直到所有的可通行鄰居都找到了，里面都沒有處在游戲區邊緣的，那么判斷結果是：貓被圍住了。
接下來用代碼實現這個判斷過程。
首先，需要準備一個方法，判斷圓圈是否已經處在圓圈邊緣了，假設這個方法名及參數如下，內部實現比較簡單這里就不貼了。判斷傳入的circle是否在邊界上private isCircleAtEdge(circle:Circle):boolean {}再準備一個方法，獲取某圓圈周圍某方向的鄰居。private getCircleNeighbor(circle:Circle,direction:Direction):Circle{}最后，是判斷的核心方法。能否在circle位置出發找到路線到達邊緣private canExitAt(circle:Circle):boolean{ var ignoreArr=[];//不用再處理的circle集合 var toDealWithArr=[circle];//還需進行判斷的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);}在方法體的最開始，準備好兩個數組，一個用來存儲不用再處理的圓圈集合ignoreArr，另一個用來存儲還需要進行判斷的圓圈集合toDealWithArr。每找到一個可通行的鄰居，首先要判斷它是不是第一次出現（因為幾個圓圈可能會有共同的鄰居，所以一個圓圈可能因為它是多個圓圈的鄰居而被找到多次），判斷的標準就是它有沒有出現在ignoreArr或toDealWithArr里，如果沒有那么就是第一次出現，如果它是路障，那么塞到ignoreArr，如果不是路障，那么推入toDealWithArr尾部等待判斷。每次循環開始時，我們會從toDealWithArr頭部彈出一個圓圈對象，對它是否在邊緣做判斷，如果是，那么返回true跳出循環，貓沒有被圍住，它可以通過某條路線到達邊緣。如果toDealWithArr全部判斷完了都不在邊緣，那么返回false，貓被圍住了，它的直接鄰居及眾多間接鄰居中沒有一個是在邊緣的。更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：界面操作劫持與HTML5安全的圖文詳解

下一篇：解析HTML5中的標簽嵌套規則