【JS+h5】围住神经猫

游戏链接，战个痛快：http://u.ali213.net/games/shenjingcat/index.html

要求：不要让神经猫走到边缘

完成截图：

学习视频：http://www.jikexueyuan.com/course/158.html

工具：IDEA

过程：

1、绘制规律的圆点；

2、设置神经猫位置；

3、设置逻辑

1）六个方向游走；

2）游戏结束：走到边界、围堵到中间不能跳动

核心代码（迭代版本注掉了，没删）：

/**
 * Created by 茼 on 2016/3/23.
 */
var stage = new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);

var container = new createjs.Container();
var gameView = container;
gameView.x = 30;
gameView.y = 30;
stage.addChild(gameView);

var circleArr = [[],[],[],[],[],[],[],[],[]];
var currentCat;
var MOVE_NONE = -1,MOVE_LEFT = 0,MOVE_RIGHT = 1,MOVE_UP_LEFT = 2,MOVE_UP_RIGHT = 3,MOVE_DOWN_LEFT = 4,MOVE_DOWN_RIGHT = 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] = cat.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;
    x = can.indexX,y = can.indexY;
    while(true){
        if (circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){
            can = false;
            distanceMap[MOVE_UP_RIGHT] = cat.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;
    }
    //right 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.indexY;
            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 < distanceMap.length;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_UNSELECTED);
            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_UNSELECTED);
            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_UNSELECTED);
            break;
        default:
            alert("游戏结束");
    }

    // //左、右、左上、右上、左下、右下
    // var leftCircle = circleArr[currentCat.indexX - 1][currentCat.indexY];
    // var rightCircle = circleArr[currentCat.indexX + 1][currentCat.indexY];
    // var leftTopCircle = circleArr[currentCat.indexX - 1][currentCat.indexY - 1];
    // var rightTopCircle = circleArr[currentCat.indexX ][currentCat.indexY + 1];
    // var leftBottomCircle = circleArr[currentCat.indexX - 1][currentCat.indexY + 1];
    // var rightBottomCircle = circleArr[currentCat.indexX + 1][currentCat.indexY - 1];
    // if(leftCircle.getCircleType() == 1){
    //     leftCircle.setCircleType(3);
    //     currentCat.setCircleType(1);
    //     currentCat = leftCircle;
    // }else if(rightCircle.getCircleType() == 1){
    //     rightCircle.setCircleType(3);
    //     currentCat.setCircleType(1);
    //     currentCat = rightCircle;
    // }else if(leftTopCircle.getCircleType() == 1){
    //     leftTopCircle.setCircleType(3);
    //     currentCat.setCircleType(1);
    //     currentCat = leftTopCircle;
    // }else if(rightTopCircle.getCircleType() == 1){
    //     rightTopCircle.setCircleType(3);
    //     currentCat.setCircleType(1);
    //     currentCat = rightTopCircle;
    // }else if(leftBottomCircle.getCircleType() == 1){
    //     leftBottomCircle.setCircleType(3);
    //     currentCat.setCircleType(1);
    //     currentCat = leftBottomCircle;
    // }else if(rightBottomCircle.getCircleType() == 1){
    //     rightBottomCircle.setCircleType(3);
    //     currentCat.setCircleType(1);
    //     currentCat = rightBottomCircle;
    // }else{
    //     alert("游戏结束");
    // }
}
function  addCircles() {
    for(var indexY=0;indexY<9;indexY++){
        for(var indexX=0;indexX<9;indexX++){
            var c = new Circle();
            gameView.addChild(c);
            circleArr[indexX][indexY] = c;
            c.indexX = indexX;
            c.indexY = indexY;
            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()<0.1){
                c.setCircleType(Circle.TYPE_SELECTED);
            }

            c.addEventListener("click",circleClicked);
        }
    }
}
addCircles();

//测试代码——一个红色的圆
// var stage = new createjs.Stage("gameView");
//
// var gameView = new createjs.Container();
// stage.addChild(gameView);
//
// var s = new createjs.Shape();
// s.graphics.beginFill("#FF0000");
// s.graphics.drawCircle(50,50,25);
// s.graphics.endFill();
// gameView.addChild(s);
//
// createjs.Ticker.setFPS(30);
// createjs.Ticker.addEventListener("tick",stage);