html5怎么實現(xiàn)神經(jīng)貓游戲

本文小編為大家詳細介紹“html5怎么實現(xiàn)神經(jīng)貓游戲”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“html5怎么實現(xiàn)神經(jīng)貓游戲”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

創(chuàng)新互聯(lián)建站是由多位在大型網(wǎng)絡公司、廣告設計公司的優(yōu)秀設計人員和策劃人員組成的一個具有豐富經(jīng)驗的團隊，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設計師、平面廣告設計師、網(wǎng)絡營銷人員及形象策劃。承接：網(wǎng)站設計制作、成都網(wǎng)站設計、網(wǎng)站改版、網(wǎng)頁設計制作、網(wǎng)站建設與維護、網(wǎng)絡推廣、數(shù)據(jù)庫開發(fā),以高性價比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務。

游戲設計思路

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

參考代碼

cat.html

app.js

var stage = new createjs.Stage("gameView");

createjs.Ticker.setFPS(30);

createjs.Ticker.addEventListener("tick",stage);

var gameView = new createjs.Container();

gameView.x = 30;

gameView.y = 30;

stage.addChild(gameView);

var circleArr = [[],[],[],[],[],[],[],[],[]];

var currentCat;

//定義7種狀態(tài) 表示移動位置

var MOVE_NONE = -1,MOVE_LEFT = 0,MOVE_UP_LEFT = 1,MOVE_UP_RIGHT = 2,MOVE_RIGHT = 3,MOVE_DOWN_RIGHT = 4,MOVE_DOWN_LEFT = 5;

function getMoveDir(cat){

//分別判斷能走的位置

var distanceMap = [];

//left

var can = true;

for (var x = cat.indexX;x>=0;x--) {

if(circleArr[x][cat.indexY].getCircleType() == Circle.TYPE_SELECTED){

can = false;

distanceMap[MOVE_LEFT] = cat.indexX - x;

break;

}

if(can){

return MOVE_LEFT;

}

//left up

can =true;

var x = cat.indexX , y = cat.indexY;

while(true){

if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){

can = false;

distanceMap[MOVE_UP_LEFT] = can.indexY-y;

break;

}

if(y%2 == 0){

x--;

}

y--;

if(y<0 ||x<0){

break;

}

if(can){

return MOVE_UP_LEFT;

}

//right up

can =true;

var x = cat.indexX , y = cat.indexY;

while(true){

if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){

can = false;

distanceMap[MOVE_UP_RIGHT] = can.indexY-y;

break;

}

if(y%2 == 1){

x++;

}

y--;

if(y <0||x>8){

break;

}

if(can){

return MOVE_UP_RIGHT;

}

//right

can =true;

for (var x= cat.indexX;x<9;x++) {

if(circleArr[x][cat.indexY].getCircleType() == Circle.TYPE_SELECTED){

can =false;

distanceMap[MOVE_RIGHT] = x -cat.indexX;

break;

}

if(can){

return MOVE_RIGHT;

}

//ritht down

can = true;

x= cat.indexX,y = cat.indexY;

while(true){

if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){

can =false;

distanceMap[MOVE_DOWN_RIGHT] = y -cat.indexY;

break;

}

if(y%2 == 1){

x++;

}

y++;

if(y>8 ||x>8){

break;

}

if(can){

return MOVE_DOWN_RIGHT;

}

//left down

can = true;

x= cat.indexX,y = cat.indexY;

while(true){

if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){

can = false;

distanceMap[MOVE_DOWN_LEFT] = y -cat.index;

break;

}

if(y%2 == 0){

x--;

}

y++;

if(y>8 || x<0){

break;

}

if(can){

return MOVE_DOWN_LEFT;

}

var maxDir = -1,maxValue = -1;

for (var dir = 0;dir

if(distanceMap[dir]>maxValue){

maxValue = distanceMap[dir];

maxDir = dir;

}

if(maxValue > 1){

return maxDir;

}else{

return MOVE_NONE;

}

function circleClicked(event){

if(event.target.getCircleType() != Circle.TYPE_CAT){

event.target.setCircleType(Circle.TYPE_SELECTED);

}else{

return;

}

//表示碰到邊緣游戲結(jié)束

if(currentCat.indexX == 0 ||currentCat.indexX == 8 ||currentCat.indexY==0 ||currentCat.indexY==8){

alert("游戲結(jié)束");

return;

}

var dir = getMoveDir(currentCat);

switch (dir){

//判斷他要走那一個方向

case MOVE_LEFT:

currentCat.setCircleType(Circle.TYPE_UNSELECTED);

currentCat = circleArr[currentCat.indexX - 1][currentCat.indexY];