开发工具：VsCode
案例一：围住神经猫小游戏
游戏介绍：鼠标点击围住猫，不让它从旁边溜走。
index.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="easeljs.min.js"></script> 7 <script src="circle.js"></script> 8 </head> 9 <body> 10 <canvas id="gameView" width="800px" height="800px"></canvas> 11 <script src="app.js" type="text/javascript" charset="utf-8"></script> 12 </body> 13</html>
app.js
1var stage = new createjs.Stage("gameView"); 2createjs.Ticker.setFPS(30); 3createjs.Ticker.addEventListener("tick",stage); 4var gameView = new createjs.Container(); 5gameView.x = 30; 6gameView.y = 30; 7stage.addChild(gameView); 8var circleArr = [[],[],[],[],[],[],[],[],[]]; 9var currentCat; 10//定义7种状态 表示 移动位置 11var 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; 12function getMoveDir(cat){ 13 //分别判断能走的位置 14 var distanceMap = []; 15 //left 16 var can = true; 17 for (var x = cat.indexX;x>=0;x--) { 18 if(circleArr[x][cat.indexY].getCircleType() == Circle.TYPE_SELECTED){ 19 can = false; 20 distanceMap[MOVE_LEFT] = cat.indexX - x; 21 break; 22 } 23 } 24 if(can){ 25 return MOVE_LEFT; 26 } 27 //left up 28 can =true; 29 var x = cat.indexX , y = cat.indexY; 30 while(true){ 31 if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ 32 can = false; 33 distanceMap[MOVE_UP_LEFT] = can.indexY-y; 34 break; 35 } 36 if(y%2 == 0){ 37 x--; 38 } 39 y--; 40 if(y<0 ||x<0){ 41 break; 42 } 43 } 44 if(can){ 45 return MOVE_UP_LEFT; 46 } 47 48 //right up 49 can =true; 50 var x = cat.indexX , y = cat.indexY; 51 while(true){ 52 if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ 53 can = false; 54 distanceMap[MOVE_UP_RIGHT] = can.indexY-y; 55 break; 56 } 57 if(y%2 == 1){ 58 x++; 59 } 60 y--; 61 if(y <0||x>8){ 62 break; 63 } 64 } 65 if(can){ 66 return MOVE_UP_RIGHT; 67 } 68 //right 69 can =true; 70 for (var x= cat.indexX;x<9;x++) { 71 if(circleArr[x][cat.indexY].getCircleType() == Circle.TYPE_SELECTED){ 72 can =false; 73 distanceMap[MOVE_RIGHT] = x -cat.indexX; 74 break; 75 } 76 } 77 if(can){ 78 return MOVE_RIGHT; 79 } 80 //ritht down 81 can = true; 82 x= cat.indexX,y = cat.indexY; 83 while(true){ 84 if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ 85 can =false; 86 distanceMap[MOVE_DOWN_RIGHT] = y -cat.indexY; 87 break; 88 } 89 if(y%2 == 1){ 90 x++; 91 } 92 y++; 93 if(y>8 ||x>8){ 94 break; 95 } 96 } 97 if(can){ 98 return MOVE_DOWN_RIGHT; 99 } 100 //left down 101 can = true; 102 x= cat.indexX,y = cat.indexY; 103 while(true){ 104 if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ 105 can = false; 106 distanceMap[MOVE_DOWN_LEFT] = y -cat.index; 107 break; 108 } 109 if(y%2 == 0){ 110 x--; 111 } 112 y++; 113 if(y>8 || x<0){ 114 break; 115 } 116 } 117 if(can){ 118 return MOVE_DOWN_LEFT; 119 } 120 var maxDir = -1,maxValue = -1; 121 for (var dir = 0;dir<distanceMap.length;dir++) { 122 if(distanceMap[dir]>maxValue){ 123 maxValue = distanceMap[dir]; 124 maxDir = dir; 125 } 126 } 127 if(maxValue > 1){ 128 return maxDir; 129 }else{ 130 return MOVE_NONE; 131 } 132} 133function circleClicked(event){ 134 if(event.target.getCircleType() != Circle.TYPE_CAT){ 135 event.target.setCircleType(Circle.TYPE_SELECTED); 136 }else{ 137 return; 138 } 139 //表示碰到边缘 游戏结束 140 if(currentCat.indexX == 0 ||currentCat.indexX == 8 ||currentCat.indexY==0 ||currentCat.indexY==8){ 141 alert("游戏结束"); 142 return; 143 } 144 var dir = getMoveDir(currentCat); 145 switch (dir){ 146 //判断他要走那一个方向 147 case MOVE_LEFT: 148 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 149 currentCat = circleArr[currentCat.indexX - 1][currentCat.indexY]; 150 currentCat.setCircleType(Circle.TYPE_CAT) 151 break; 152 case MOVE_UP_LEFT: 153 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 154 currentCat = circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX- 1][currentCat.indexY-1]; 155 currentCat.setCircleType(Circle.TYPE_CAT) 156 break; 157 case MOVE_UP_RIGHT: 158 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 159 currentCat = circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY-1]; 160 currentCat.setCircleType(Circle.TYPE_CAT) 161 break; 162 case MOVE_RIGHT: 163 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 164 currentCat = circleArr[currentCat.indexX+1][currentCat.indexY]; 165 currentCat.setCircleType(Circle.TYPE_CAT) 166 break; 167 case MOVE_DOWN_RIGHT: 168 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 169 currentCat = circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY+1]; 170 currentCat.setCircleType(Circle.TYPE_CAT) 171 break; 172 case MOVE_DOWN_LEFT: 173 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 174 currentCat = circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX-1][currentCat.indexY+1]; 175 currentCat.setCircleType(Circle.TYPE_CAT) 176 break; 177 //没有方向走 游戏结束 178 default: 179 alert("游戏结束"); 180 } 181} 182 183 184 185function addCircles(){ 186 //生成游戏背景 187 for (var indexY = 0; indexY <9;indexY++ ) { 188 for (var indexX = 0;indexX<9;indexX++) { 189 var c = new Circle(); 190 gameView.addChild(c); 191 circleArr[indexX][indexY] = c; 192 c.indexX = indexX; 193 c.indexY = indexY; 194 //因为Y轴是 一前一后 所有判断一下 Y%2 195 c.x = indexY%2?indexX*55+25:indexX*55; 196 c.y = indexY * 55; 197 if(indexX == 4 && indexY == 4){ 198 199 //中间出现一只猫 200 c.setCircleType(3); 201 currentCat = c; 202 }else if(Math.random() <0.1){ 203 //让页面上随机出现 不能走的方框 方便围这只猫 204 c.setCircleType(Circle.TYPE_SELECTED); 205 } 206 //添加事件 207 c.addEventListener("click",circleClicked); 208 } 209 } 210} 211addCircles();
circle.js
1function Circle(){ 2 createjs.Shape.call(this); 3 this.setCircleType = function(type){ 4 this._circleType = type; 5 switch (type){ 6 //没有点击过的颜色 7 case Circle.TYPE_UNSELECTED: 8 this.setColor("#cccccc"); 9 break; 10 //点击过的颜色 11 case Circle.TYPE_SELECTED: 12 this.setColor("#ff6600"); 13 break; 14 //猫的颜色 15 case Circle.TYPE_CAT: 16 this.setColor("#0000ff"); 17 break; 18 } 19 } 20 this.setColor = function(colorString){ 21 this.graphics.beginFill(colorString); 22 this.graphics.drawCircle(0,0,25); 23 this.graphics.endFill(); 24 } 25 this.getCircleType = function(){ 26 return this._circleType; 27 } 28 this.setCircleType(1); 29} 30Circle.prototype = new createjs.Shape(); 31//三种状态 表示 一个为点击之后的 一个点击之前 一个是猫 32Circle.TYPE_UNSELECTED = 1; 33Circle.TYPE_SELECTED = 2; 34Circle.TYPE_CAT = 3;
运行结果： 
案例二：看你有多色小游戏
游戏介绍： 这款游戏就是找出所有风格中颜色不同的正方形，游戏难度递增。
index.html
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<title>看你有多色</title> 6<script src="easeljs.min.js"></script> 7 <script src="Rect.js"></script> 8 </head> 9 <body> 10 <canvas id ="gameView" width="400px" height="400px"></canvas> 11 12 <script src="app.js"></script> 13 </body> 14</html>
app.js
1// JavaScript Document 2 3var stage = new createjs.Stage("gameView"); 4createjs.Ticker.setFPS(30); 5createjs.Ticker.addEventListener("tick",stage); 6var gameView = new createjs.Container(); 7stage.addChild(gameView); 8var n=2; 9function addRect(){ 10 var cl = parseInt(Math.random()*1000000); 11 var color="#"+cl; 12 var x= parseInt(Math.random()*n); 13 var y= parseInt(Math.random()*n); 14 15 for(var indexX = 0;indexX<n;indexX ++){ 16 for (var indexY=0;indexY<n;indexY++){ 17 var r = new Rect(n,color);//var r = new Rect(n,color,RectColor); 18 gameView.addChild(r); 19 r.x = indexX; 20 r.y = indexY; 21 if(r.y == y&&r.x == x){ 22 r.setRectType(2); 23 } 24 r.x = indexX*(400/n); 25 r.y = indexY*(400/n); 26 if(r.getRectType()==2){ 27 r.addEventListener("click",function(){ 28 if(n<7){ 29 ++n; 30 } 31 gameView.removeAllChildren();//移除所有图形 32 addRect();//重新创建 33 }) 34 } 35 } 36 } 37} 38addRect();
Rect.js
1// JavaScript Document 2function Rect(n,color){ //function Rect(n,color,RectColor);n小方块横向或纵向个数，color当前默认颜色，RectColor点击颜色 3 createjs.Shape.call(this); 4 this.setRectType = function (type){ 5 this._RectType = type; 6 switch(type){ 7 case 1: 8 this.setColor(color); 9 break; 10 case 2: 11 this.setColor("#ff0000"); 12 break; 13 } 14 } 15 this.setColor = function(colorString){ 16 this.graphics.beginFill(colorString); //开始绘制 17 this.graphics.drawRect(0,0,400/n-5,400/n-5);//左居左为0，上居上为0，右居左为宽400px/n-5(计算列数，-5是为了设置列间距)，下居上为400/n-5（正好为正方形） 18 this.graphics.endFill(); //结束绘制 19 } 20 //设置类型 21 this.getRectType = function(){ 22 return this._RectType; 23 } 24 this.setRectType(1); 25} 26//初始化 27Rect.prototype = new createjs.Shape();
运行结果： 
