createjs之easeljs【游戏围住神经猫】

在html文件中引入

<script src="circle.js"></script> 创建圆类

<canvas width="800px" height="800px" id="gameView">您的浏览器不支持</canvas>
<script src="app.js"></script>        游戏逻辑

circle.js文件中
/**
 * Created by Administrator on 2015/3/3.
 */

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;

与看你有多色游戏的rect差别的大，唯一差别就是这里为了app.js更好调用，为每一种颜色定义了一个变量。
Circle.TYPE_UNSELECTED=1;
Circle.TYPE_SELECTED=2;
Circle.TYPE_CAT=3;
</pre>
this.graphics.drawCircle(0,0,25);    画半径为25的圆

app.js文件中
var stage = new createjs .Stage("gameView");
var gameView = new createjs.Container ();
gameView.x=30;
gameView.y=30;   gameView的x，y都移动30的原因是不使最左端最上端的圆只剩一半。

stage.addChild(gameView);

createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);
仿照看你有多色的做法，创建了addCircles类
var circleArr=[[],[],[],[],[],[],[],[],[]];  创建二维数组记录棋盘
var currentCat;
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;     indexX和indexY记录棋盘的第几行第几个，把它记录到数组中
           c.indexX=indexX;
           c.indexY=indexY;
           c.x=indexY%2?indexX*55+25:indexX*55;   而x和y记录的是棋盘上的位置，由indexY或indexX乘以55而不是乘以圆直径50是因为每两个圆之间是有缝隙的。。结合真实的神经猫奇数排和偶数排之间有错位所以x%2=1和=0作不同处理，=1时整体享有移半个圆的距离。
           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);    添加鼠标点击事件circleClicked。
       }
    }
}
addCircles();
鼠标点击之后，不但点击的灰色圆圈变成了黄色，小猫也会向旁边移动，circleClicked逻辑如下：
function circleClicked(e){
    if(e.target.getCircleType()!=Circle.TYPE_CAT) {
        e.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);     getMoveDir得到小猫向哪个方向走
        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("游戏结束");
        }

}
注意奇数排偶数排变化规律不一样。
寻找路径函数：向猫咪六个方向依次遍历前方有没有黄色，黄色在哪个位置，如果某个方向没有黄色，小猫向那个方向行走。如果六个方向都有黄色，那也没关系，小猫咪记录了每个方向黄色圆圈距离自己的距离，小猫选择黄色最远的方向走。
getMoveDir函数：
var MOVE_NONE=-1,MOVE_LEFT= 0,MOVE_UP_LEFT=1,MOVE_UP_RIGHT=2,MOVE_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;
    var x=cat.indexX,y=cat.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_LEFT;
    }
    //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;
    var 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;
    var 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,maxYalue=-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;
    }


}
/**
 * Created by Administrator on 2015/3/2.
 */
var stage = new createjs .Stage("gameView");
var gameView = new createjs.Container ();
gameView.x=30;
gameView.y=30;

stage.addChild(gameView);

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

var circleArr=[[],[],[],[],[],[],[],[],[]];
var currentCat;
var MOVE_NONE=-1,MOVE_LEFT= 0,MOVE_UP_LEFT=1,MOVE_UP_RIGHT=2,MOVE_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;
    var x=cat.indexX,y=cat.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_LEFT;
    }
    //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;
    var 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;
    var  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,maxYalue=-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(e){
    if(e.target.getCircleType()!=Circle.TYPE_CAT) {
        e.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<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();