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

　　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 8){
　　break;
　　}
　　}
　　if(can){
　　return MOVE_UP_RIGHT;
　　}
　　//right
　　can =true;
　　for (var x= cat.indexX;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

　　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];
　　currentCat.setCircleType(Circle.TYPE_CAT)
　　break;
　　case MOVE_UP_LEFT:
　　currentCat.setCircleType(Circle.TYPE_UNSELECTED);
　　currentCat = circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX- 1][currentCat.indexY-1];
　　currentCat.setCircleType(Circle.TYPE_CAT)
　　break;
　　case MOVE_UP_RIGHT:
　　currentCat.setCircleType(Circle.TYPE_UNSELECTED);
　　currentCat = circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY-1];
　　currentCat.setCircleType(Circle.TYPE_CAT)
　　break;
　　case MOVE_RIGHT:
　　currentCat.setCircleType(Circle.TYPE_UNSELECTED);
　　currentCat = circleArr[currentCat.indexX+1][currentCat.indexY];
　　currentCat.setCircleType(Circle.TYPE_CAT)
　　break;
　　case MOVE_DOWN_RIGHT:
　　currentCat.setCircleType(Circle.TYPE_UNSELECTED);
　　currentCat = circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY+1];
　　currentCat.setCircleType(Circle.TYPE_CAT)
　　break;
　　case MOVE_DOWN_LEFT:
　　currentCat.setCircleType(Circle.TYPE_UNSELECTED);
　　currentCat = circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX-1][currentCat.indexY+1];
　　currentCat.setCircleType(Circle.TYPE_CAT)
　　break;
　　//没有方向走 游戏结束
　　default:
　　alert(“游戏结束”);
　　}
　　}
　　function addCircles(){
　　//生成游戏背景
　　for (var indexY = 0; indexY

　　for (var indexX = 0;indexX

　　var c = new Circle();
　　gameView.addChild(c);
　　circleArr[indexX][indexY] = c;
　　c.indexX = indexX;
　　c.indexY = indexY;
　　//因为Y轴是 一前一后 所有判断一下 Y%2
　　c.x = indexY%2?indexX*55+25:indexX*55;
　　c.y = indexY * 55;
　　if(indexX == 4 && indexY == 4){
　　//中间出现一只猫
　　c.setCircleType(3);
　　currentCat = c;
　　}else if(Math.random()

　　//让页面上随机出现 不能走的方框 方便围这只猫
　　c.setCircleType(Circle.TYPE_SELECTED);
　　}
　　//添加事件
　　c.addEventListener(“click”,circleClicked);
　　}
　　}
　　}
　　addCircles();
　　Circle.js
　　function Circle(){
　　createjs.Shape.call(this);
　　this.setCircleType = function(type){
　　this._circleType = type;
　　switch (type){
　　//没有点击过的颜色
　　case Circle.TYPE_UNSELECTED:
　　this.setColor(“#cccccc”);
　　break;
　　//点击过的颜色
　　case Circle.TYPE_SELECTED:
　　this.setColor(“#ff6600”);
　　break;
　　//猫的颜色
　　case Circle.TYPE_CAT:
　　this.setColor(“#0000ff”);
　　break;
　　}
　　}
　　this.setColor = function(colorString){
　　this.graphics.beginFill(colorString);
　　this.graphics.drawCircle(0,0,25);
　　this.graphics.endFill();
　　}
　　this.getCircleType = function(){
　　return this._circleType;
　　}
　　this.setCircleType(1);
　　}
　　Circle.prototype = new createjs.Shape();
　　//三种状态 表示 一个为点击之后的 一个点击之前 一个是猫
　　Circle.TYPE_UNSELECTED = 1;
　　Circle.TYPE_SELECTED = 2;
　　Circle.TYPE_CAT = 3;读到这里，这篇“html5怎么实现神经猫游戏”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注百云主机行业资讯频道。

相关推荐: 如何使用css3实现图片轮播和按钮

这篇文章将为大家详细讲解有关如何使用css3实现图片轮播和按钮，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　CSS代码： 　　#second_div{ 　　margin-top: 160px; 　　} 　　。img_b…