一.“围住神经猫” 新建JS：app.js, 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;//保存这只猫 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; //6个方向的参数 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; } }
1if(can){ 2 return MOVE_LEFT; 3} 4//left up 5can =true; 6var x = cat.indexX , y = cat.indexY; 7while(true){ 8 if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ 9 can = false; 10 distanceMap[MOVE_UP_LEFT] = can.indexY-y; 11 break; 12 } 13 if(y%2 == 0){ 14 x--; 15 } 16 y--; 17 if(y<0 ||x<0){ 18 break; 19 } 20} 21if(can){ 22 return MOVE_UP_LEFT; 23} 24//right up 25can =true; 26var x = cat.indexX , y = cat.indexY; 27while(true){ 28 if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ 29 can = false; 30 distanceMap[MOVE_UP_RIGHT] = can.indexY-y; 31 break; 32 } 33 if(y%2 == 1){ 34 x++; 35 } 36 y--; 37 38 if(y <0||x>8){ 39 break; 40 } 41} 42if(can){ 43 return MOVE_UP_RIGHT; 44} 45//right 46can =true; 47for (var x= cat.indexX;x<9;x++) { 48 if(circleArr[x][cat.indexY].getCircleType() == Circle.TYPE_SELECTED){ 49 can =false; 50 distanceMap[MOVE_RIGHT] = x -cat.indexX; 51 break; 52 } 53} 54if(can){ 55 return MOVE_RIGHT; 56} 57//ritht down 58can = true; 59x= cat.indexX,y = cat.indexY; 60while(true){ 61 if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ 62 can =false; 63 distanceMap[MOVE_DOWN_RIGHT] = y -cat.indexY; 64 break; 65 } 66 if(y%2 == 1){ 67 x++; 68 } 69 y++; 70 71 if(y>8 ||x>8){ 72 break; 73 } 74} 75if(can){ 76 return MOVE_DOWN_RIGHT; 77} 78//left down 79can = true; 80x= cat.indexX,y = cat.indexY; 81while(true){ 82 if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ 83 can = false; 84 distanceMap[MOVE_DOWN_LEFT] = y -cat.index; 85 break; 86 } 87 if(y%2 == 0){ 88 x--; 89 } 90 y++; 91 92 if(y>8 || x<0){ 93 break; 94 } 95} 96if(can){ 97 return MOVE_DOWN_LEFT; 98} 99var maxDir = -1,maxValue = -1; 100for (var dir = 0;dir<distanceMap.length;dir++) { 101 if(distanceMap[dir]>maxValue){ 102 maxValue = distanceMap[dir]; 103 maxDir = dir; 104 } 105} 106if(maxValue > 1){ 107 return maxDir; 108}else{ 109 return MOVE_NONE; 110}
} function circleClicked(event){ if(event.target.getCircleType() != Circle.TYPE_CAT){ event.target.setCircleType(Circle.TYPE_SELECTED); }else{ return; }
1//游戏结束判断:猫是否被围住 2if(currentCat.indexX == 0 ||currentCat.indexX == 8 ||currentCat.indexY==0 ||currentCat.indexY==8){ 3 alert("游戏结束"); 4 return; 5} 6var dir = getMoveDir(currentCat); 7switch (dir){ 8 //看是否还存在可走的路 9 case MOVE_LEFT: 10 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 11 currentCat = circleArr[currentCat.indexX - 1][currentCat.indexY]; 12 currentCat.setCircleType(Circle.TYPE_CAT) 13 break; 14 case MOVE_UP_LEFT: 15 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 16 currentCat = circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX- 1][currentCat.indexY-1]; 17 currentCat.setCircleType(Circle.TYPE_CAT) 18 break; 19 case MOVE_UP_RIGHT: 20 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 21 currentCat = circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY-1]; 22 currentCat.setCircleType(Circle.TYPE_CAT) 23 break; 24 case MOVE_RIGHT: 25 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 26 currentCat = circleArr[currentCat.indexX+1][currentCat.indexY]; 27 currentCat.setCircleType(Circle.TYPE_CAT) 28 break; 29 case MOVE_DOWN_RIGHT: 30 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 31 currentCat = circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY+1]; 32 currentCat.setCircleType(Circle.TYPE_CAT) 33 break; 34 case MOVE_DOWN_LEFT: 35 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 36 currentCat = circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX-1][currentCat.indexY+1]; 37 currentCat.setCircleType(Circle.TYPE_CAT) 38 break; 39 40 default: 41 alert("游戏结束"); 42}
} 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;
1 c.x = indexY%2?indexX*55+25:indexX*55; 2 c.y = indexY * 55; 3 if(indexX == 4 && indexY == 4){ 4 5 6 c.setCircleType(3); 7 currentCat = c; 8 }else if(Math.random() <0.1){ 9 10 c.setCircleType(Circle.TYPE_SELECTED); 11 } 12 //添加事件 13 c.addEventListener("click",circleClicked); 14 } 15}
} addCircles(); 2.新建JS：circle.js，编写画布的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; 3.新建HTML文件，然后导入JS和画布
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="easeljs.min.js"></script> <script src="Circle.js"></script> </head> <body> <canvas id="gameView" width="800px" height="800px"></canvas> <script src="app.js" type="text/javascript" charset="utf-8"></script> </body> </html> 运行截图 !\[\](https://oscimg.oschina.net/oscnet/up-1b2b9b10b26d97e24d02fd9fa95c32b8e40.png)二、寻找不同颜色 1.创建index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no"> <script src="easeljs.min.js"></script> <script src="Rect.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <title>Title</title> </head> <body> <div class="main"> <canvas id="gameView"></canvas> </div> <script src="app.js"></script> </body> </html> 2.创建app.jsvar stage = new createjs.Stage("gameView"); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick",stage); var gameView = new createjs.Container(); stage.addChild(gameView); var n=2; function addRect(){ var cl = parseInt(Math.random()*1000000); var color="#"+cl; var x= parseInt(Math.random()*n); var y= parseInt(Math.random()*n);
1for(var indexX = 0;indexX<n;indexX ++){ 2 for (var indexY=0;indexY<n;indexY++){ 3 var r = new Rect(n,color);//var r = new Rect(n,color,RectColor); 4 gameView.addChild(r); 5 r.x = indexX; 6 r.y = indexY; 7 if(r.y == y&&r.x == x){ 8 r.setRectType(2); 9 } 10 r.x = indexX*(400/n); 11 r.y = indexY*(400/n); 12 if(r.getRectType()==2){ 13 r.addEventListener("click",function(){ 14 if(n<7){ 15 ++n; 16 } 17 gameView.removeAllChildren();//移除所有图形 18 addRect();//重新创建 19 }) 20 } 21 } 22}
} addRect(); 3.创建rect.js
function Rect(n,color){
createjs.Shape.call(this); this.setRectType = function (type){ this._RectType = type; switch(type){ case 1: this.setColor(color); break; case 2: this.setColor("#ff0000"); break; } } this.setColor = function(colorString){ this.graphics.beginFill(colorString);
this.graphics.drawRect(0,0,400/n-5,400/n-5); this.graphics.endFill();
} //设置类型 this.getRectType = function(){ return this._RectType; } this.setRectType(1); } //初始化 Rect.prototype = new createjs.Shape(); 运行截图 
