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

来源：互联网发布：c语言求平均值函数编辑：程序博客网时间：2024/04/29 23:07

在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();

0 0