html5怎么实现神经猫游戏

本文小编为大家详细介绍“html5怎么实现神经猫游戏”，内容详细，步骤清晰，细节处理妥当，希望这篇“html5怎么实现神经猫游戏”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联建站是由多位在大型网络公司、广告设计公司的优秀设计人员和策划人员组成的一个具有丰富经验的团队，其中包括网站策划、网页美工、网站程序员、网页设计师、平面广告设计师、网络营销人员及形象策划。承接：网站设计制作、成都网站设计、网站改版、网页设计制作、网站建设与维护、网络推广、数据库开发,以高性价比制作企业网站、行业门户平台等全方位的服务。

游戏设计思路

从猫当前的位置找六个方向中可通行的邻居，然后从这些邻居出发，再找它们各自的可通行邻居，一直这样找下去，一边找的过程中，一边判断当前已经找到的邻居中有没有处在游戏区边缘的，如果有，那么寻找过程提前结束，判断结果是：猫没有被围住。如果直到所有的可通行邻居都找到了，里面都没有处在游戏区边缘的，那么判断结果是：猫被围住了。

参考代码

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种状态表示移动位置

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;

}

//表示碰到边缘游戏结束

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

alert("游戏结束");

return;

}

var dir = getMoveDir(currentCat);

switch (dir){

//判断他要走那一个方向

case MOVE_LEFT:

currentCat.setCircleType(Circle.TYPE_UNSELECTED);

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