一、围住神经猫游戏
游戏玩法：玩法很简单，蓝色圆圈代表神经猫，通过点击周围圆圈把猫困住，就算游戏成功
游戏效果
逻辑梳理：
1、绘制规律的圆点；
2、设置神经猫位置；
3、设置逻辑
1）六个方向游走；
2）游戏结束：走到边界、围堵到中间不能跳动
开发过程
1.下载CreateJs包文件包
2.围绕神经猫游戏页面元素的绘制
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 11function addCircles(){ 12 //生成游戏背景 13 for (var indexY = 0; indexY <9;indexY++ ) { 14 for (var indexX = 0;indexX<9;indexX++) { 15 var c = new Circle(); 16 gameView.addChild(c); 17 circleArr[indexX][indexY] = c; 18 c.indexX = indexX; 19 c.indexY = indexY; 20 21 c.x = indexY%2?indexX*55+25:indexX*55; 22 c.y = indexY * 55; 23 if(indexX == 4 && indexY == 4){ 24 25 26 c.setCircleType(3); 27 currentCat = c; 28 }else if(Math.random() <0.1){ 29 30 c.setCircleType(Circle.TYPE_SELECTED); 31 } 32 //添加监听事件 33 c.addEventListener("click",circleClicked); 34 } 35 } 36} 37addCircles(); 38
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> 14
3.围住神经猫游戏添加监听事件
点击圆改变颜色，点击神经猫的颜色不变
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; 35
app.js
1//添加监听事件 2 c.addEventListener("click",circleClicked); 3
4.简单的逻辑实现围绕神经猫游戏效果
1）六个方向游走；
2）游戏结束：走到边界、围堵到中间不能跳动
app.js中添加
1var 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; 2//6个方向的参数 3function getMoveDir(cat){ 4 //分别判断能走的位置 5 var distanceMap = []; 6 //left 7 var can = true; 8 for (var x = cat.indexX;x>=0;x--) { 9 if(circleArr[x][cat.indexY].getCircleType() == Circle.TYPE_SELECTED){ 10 can = false; 11 distanceMap[MOVE_LEFT] = cat.indexX - x; 12 break; 13 } 14 } 15 if(can){ 16 return MOVE_LEFT; 17 } 18 //left up 19 can =true; 20 var x = cat.indexX , y = cat.indexY; 21 while(true){ 22 if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ 23 can = false; 24 distanceMap[MOVE_UP_LEFT] = can.indexY-y; 25 break; 26 } 27 if(y%2 == 0){ 28 x--; 29 } 30 y--; 31 if(y<0 ||x<0){ 32 break; 33 } 34 } 35 if(can){ 36 return MOVE_UP_LEFT; 37 } 38 39 //right up 40 can =true; 41 var x = cat.indexX , y = cat.indexY; 42 while(true){ 43 if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ 44 can = false; 45 distanceMap[MOVE_UP_RIGHT] = can.indexY-y; 46 break; 47 } 48 if(y%2 == 1){ 49 x++; 50 } 51 y--; 52 if(y <0||x>8){ 53 break; 54 } 55 } 56 if(can){ 57 return MOVE_UP_RIGHT; 58 } 59 //right 60 can =true; 61 for (var x= cat.indexX;x<9;x++) { 62 if(circleArr[x][cat.indexY].getCircleType() == Circle.TYPE_SELECTED){ 63 can =false; 64 distanceMap[MOVE_RIGHT] = x -cat.indexX; 65 break; 66 } 67 } 68 if(can){ 69 return MOVE_RIGHT; 70 } 71 //ritht down 72 can = true; 73 x= cat.indexX,y = cat.indexY; 74 while(true){ 75 if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ 76 can =false; 77 distanceMap[MOVE_DOWN_RIGHT] = y -cat.indexY; 78 break; 79 } 80 if(y%2 == 1){ 81 x++; 82 } 83 y++; 84 if(y>8 ||x>8){ 85 break; 86 } 87 } 88 if(can){ 89 return MOVE_DOWN_RIGHT; 90 } 91 //left down 92 can = true; 93 x= cat.indexX,y = cat.indexY; 94 while(true){ 95 if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){ 96 can = false; 97 distanceMap[MOVE_DOWN_LEFT] = y -cat.index; 98 break; 99 } 100 if(y%2 == 0){ 101 x--; 102 } 103 y++; 104 if(y>8 || x<0){ 105 break; 106 } 107 } 108 if(can){ 109 return MOVE_DOWN_LEFT; 110 } 111 var maxDir = -1,maxValue = -1; 112 for (var dir = 0;dir<distanceMap.length;dir++) { 113 if(distanceMap[dir]>maxValue){ 114 maxValue = distanceMap[dir]; 115 maxDir = dir; 116 } 117 } 118 if(maxValue > 1){ 119 return maxDir; 120 }else{ 121 return MOVE_NONE; 122 } 123} 124function circleClicked(event){ 125 if(event.target.getCircleType() != Circle.TYPE_CAT){ 126 event.target.setCircleType(Circle.TYPE_SELECTED); 127 }else{ 128 return; 129 } 130 //判断是否被围住 游戏结束 131 if(currentCat.indexX == 0 ||currentCat.indexX == 8 ||currentCat.indexY==0 ||currentCat.indexY==8){ 132 alert("游戏结束"); 133 return; 134 } 135 var dir = getMoveDir(currentCat); 136 switch (dir){ 137 //看是否还存在道路可走 138 case MOVE_LEFT: 139 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 140 currentCat = circleArr[currentCat.indexX - 1][currentCat.indexY]; 141 currentCat.setCircleType(Circle.TYPE_CAT) 142 break; 143 case MOVE_UP_LEFT: 144 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 145 currentCat = circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX- 1][currentCat.indexY-1]; 146 currentCat.setCircleType(Circle.TYPE_CAT) 147 break; 148 case MOVE_UP_RIGHT: 149 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 150 currentCat = circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY-1]; 151 currentCat.setCircleType(Circle.TYPE_CAT) 152 break; 153 case MOVE_RIGHT: 154 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 155 currentCat = circleArr[currentCat.indexX+1][currentCat.indexY]; 156 currentCat.setCircleType(Circle.TYPE_CAT) 157 break; 158 case MOVE_DOWN_RIGHT: 159 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 160 currentCat = circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY+1]; 161 currentCat.setCircleType(Circle.TYPE_CAT) 162 break; 163 case MOVE_DOWN_LEFT: 164 currentCat.setCircleType(Circle.TYPE_UNSELECTED); 165 currentCat = circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX-1][currentCat.indexY+1]; 166 currentCat.setCircleType(Circle.TYPE_CAT) 167 break; 168 169 default: 170 alert("游戏结束"); 171 } 172} 173 174 175 176 177
二、看你有多色游戏
游戏玩法： 找出颜色不同的方块
游戏效果
开发步骤
1.绘制页面
app.js
1var stage= new createjs.Stage("gameView"); 2createjs.Ticker.setFPS(30); 3createjs.Ticker.addEventListener("tick",stage); 4var gameView = new createjs.Container(); 5stage.addChild(gameView); 6
index.html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="easeljs.min.js"></script> 7</head> 8<body> 9<canvas id="gameView" width="400px" height="400px"></canvas> 10<script src="app.js"></script> 11</body> 12 13</html>
2.创建函数与方法，实现游戏逻辑
设置小方块属性：
Rect.js
1function Rect(n,color,RectColor){ 2 createjs.Shape.call(this); 3 this.setRectType = function(type){ 4 this._RectType = type; 5 switch (type){ 6 case 1: 7 this.setColor(color); 8 break; 9 case 2: 10 this.setColor(RectColor); 11 break; 12 } 13 } 14//设置颜色的方法 15 this.setColor = function(colorString){ 16 this.graphics.beginFill(colorString); 17 this.graphics.drawRect(0,0,400/n-5,400/n-5);//绘制方块 18 this.graphics.endFill(); 19 } 20 this.getRectType = function(){ 21 return this._RectType; 22 } 23 this.setRectType(1); 24 25} 26Rect.prototype = new createjs.Shape();
app.js
1var stage= new createjs.Stage("gameView"); 2createjs.Ticker.setFPS(30); 3createjs.Ticker.addEventListener("tick",stage); 4var gameView = new createjs.Container(); 5stage.addChild(gameView); 6 7//n 列数 最少等于2 8var n = 2; 9function addRect(){ 10 //随机生成一个颜色 11 var cl = parseInt(Math.random() * 1000000); 12 var color = "#"+cl; 13 //根据n 生成不同的颜色 n越大生成的颜色越接近 14 var lhh = cl+(10-n)*500; 15 var RectColor = "#"+lhh; 16 var x = parseInt(Math.random() * n); 17 var y = parseInt(Math.random() * n); 18 //渲染页面 19 for (var indexX = 0; indexX < n ;indexX++) { 20 for (var indexY = 0;indexY <n;indexY++) { 21 var r = new Rect(n,color,RectColor); 22 gameView.addChild(r); 23 r.x = indexX; 24 r.y = indexY; 25 if(r.x ==x &&r.y == y){ 26 r.setRectType(2); 27 } 28 r.x = indexX * (400/n); 29 r.y = indexY * (400/n); 30 if(r.getRectType() == 2){ 31 r.addEventListener("click",function(){ 32 if(n<7){ 33 ++n; 34 } 35 gameView.removeAllChildren(); 36 addRect() 37 }) 38 } 39 } 40 } 41} 42addRect()