Cocos2d JS 之消灭星星(九) 处理星星类之——移动和消灭星星

  1 /*
  2  * 本层拥有处理星星的实例化以及对星星的操作
  3  * 1/排列星星
  4  * 2/移动和删除星星
  5  */
  6 var GameStarLayout = ccui.Layout.extend(
  7 {
  8     size:null,
  9     starArr:[],//存放点击与被点击状态的星星资源
 10     starObjArr:[],//存放游戏中星星的二位数组
 11     firstTouchStar:null,//第一次选择的星星,用于判断两次选择的星星颜色是否一致
 12     isSelected:false,//是否选择星星,如果已选择则再次点击将星星消灭
 13     starList:[],//相连同色星星列表
 14     ctor:function()
 15     {
 16         this._super();
 17         this.zinit();
 18         this.layoutStar();
 19     },
 20     //将星星按10*10的矩阵排列出来
 21     layoutStar:function()
 22     {
 23         for(var i = 0; i < 10; i++)
 24         {
 25             for(var j = 0; j < 10; j++)
 26             {
 27                 //随机从5种不同颜色的星星中选择一个
 28                 var randomNumber = Math.floor(Math.random()*this.starArr.length);
 29                 var starResource = this.starArr[randomNumber];
 30                 var star = new GameCreateStar(starResource.normal, starResource.id,starResource.selected, i, j);
 31                 this.addChild(star, 0);
 32                 //星星出现的动画
 33                 var moveTo = cc.moveTo(i/10, cc.p(star.width*i, star.height*j));
 34                 star.runAction(moveTo);
 35                 //将星星装到数组中
 36                 this.starObjArr[i][j] = star;
 37                 //给每一个星星注册侦听器
 38                 star.addTouchEventListener(this.onTouchStarFunc, this);
 39             }
 40         }
 41     },
 42     //星星触摸侦听函数
 43     onTouchStarFunc:function(target, state)
 44     {
 45         if(state == ccui.Widget.TOUCH_ENDED)    //松开
 46         {
 47             if(!this.firstTouchStar)    //如果第一次选择的星星为空,则将当前星星赋给它
 48             {
 49                 this.firstTouchStar = target;
 50                 this.findSameColorStar(target);
 51             }
 52             else
 53             {
 54                 if(this.starList.length <1){return;} //确保相连同色星星列表不为空,代码才会向下执行
 55                 if(this.starList[0].count != target.count) //第二次点击的不是上一次选择的星星
 56                 {
 57                     //将列表中的星星type还原
 58                     this.setStarListItemToNomal(this.starList);
 59                     this.findSameColorStar(target);
 60                 }
 61                 else    //第二次点击相连同色星星列表中的星星
 62                 {
 63                     if(this.starList.length >1)
 64                     {
 65                         this.firstTouchStar = null;
 66                         this.resetStarRow();
 67                     }
 68                 }
 69             }
 70         }
 71     },
 72     //当消灭星星后,如果上方还有星星存在,则要重新设置他们的row值,用于向下移动星星
 73     resetStarRow:function()
 74     {
 75         for(var i = 0; i < this.starList.length; i++)
 76         {
 77             this.starList[i].type = -1;
 78             this.starList[i].removeFromParent();
 79             for(var j = this.starList[i].row+1; j< 10; j++)
 80             {
 81                 if(!this.starObjArr[this.starList[i].col][j]){continue;}
 82                 this.starObjArr[this.starList[i].col][j].row--;
 83                 this.starObjArr[this.starList[i].col][j-1] = this.starObjArr[this.starList[i].col][j];
 84                 this.starObjArr[this.starList[i].col][j] = null;
 85             }
 86         }
 87     },109     //逐帧监听器,在游戏过程中一直执行
110     update:function()
111     {
112         //检测是否有需要移动的星星(上边的向下移动,右边的向左边移动
113         this.checkMove();
114     },
115     //检测是否有需要移动的星星,如果被消除的星星上方还有星星,则上方的需要掉下来,如果这一列为空了且右边还有星星,则右边的需要往做移动
116     checkMove:function()
117     {
118         //检测上方
119         this.checkTop();
120     },
121     //检测被移除星星上方是否还有星星,如果有则下移
122     checkTop:function()
123     {
124         var needMove = false;
125         for(var i = 0; i < 10; i++)
126         {
127             for(var j = 0; j < 10; j++)
128             {
129                 if(this.starObjArr[i][j] !=null && this.starObjArr[i][j].type != -1)
130                 {
131                     //向下移动
132                     if(this.starObjArr[i][j].y > this.starObjArr[i][j].row*48)
133                     {
134                         this.starObjArr[i][j].y -= 8;
135                         needMove = true;
136                     }
137                     //向左移动
138                     if(this.starObjArr[i][j].x > this.starObjArr[i][j].col*48)
139                     {
140                         this.starObjArr[i][j].x -= 8;
141                         needMove = true;
142                     }
143                 }
144             }
145         }
146         //当有星星向下移动时,不能移动列
147         if(!needMove)
148         {
149             //检测是否有空列,如果有则把其右边的列向左移动
150             this.checkEmptyColums();
151         }
152     },
153     //检测空列
154     checkEmptyColums:function()
155     {
156         var existEmptyCol = false;
157         for(var i = 0; i < 10; i++)
158         {
159             if(!existEmptyCol)
160             {
161                 //只有在消灭星星后才能检测空列
162                 if(this.firstTouchStar == null)
163                 {
164                     //当列的最下面元素为空时,说明该列为空
165                     if(this.starObjArr[i][0] == null || this.starObjArr[i][0].type == -1)
166                     {
167                         existEmptyCol = true;
168                     }
169                 }
170             }
171             //当有空列时,处理列的移动和col属性的设置
172             else if(existEmptyCol)
173             {
174                 for(var j = 0; j < 10; j++)
175                 {
176                     if(this.starObjArr[i][j] != null )
177                     {
178                         this.starObjArr[i][j].col--;
179                         this.starObjArr[i-1][j] = this.starObjArr[i][j];
180                         this.starObjArr[i][j] = null;
181                     }
182                 }
183             }
184         }
185     },
186     //寻找相连在一起同色的星星
187     findSameColorStar:function(target)
188     {
189         //相连同色星星列表
190         this.starList.splice(0);    //将列表清空
191         this.starList = this.getSameColorStar(target.col, target.row, target.type);
192         //将满足条件的相连同色星星设为选中状态,玩家能对消除星星数量一幕了然
193         this.showCurrentSameStarSelectedState(this.starList);
194     },
195     //如果两次选择的不是同种颜色的星星,则将之前选择的星星设为初始状态
196     setStarListItemToNomal:function(starList)
197     {
198         for(var i = 0; i < starList.length; i++)
199         {
200             //还原列表中星星的初始type值
201             starList[i].type = starList[i].normalType;
202             starList[i].isSelected = false;
203             starList[i].updateTexture();
204             starList[i].count = 0;
205         }
206     },
207     //将满足条件的相连同色星星设为选中状态
208     showCurrentSameStarSelectedState:function(starList)
209     {
210         for(var i = 0; i < starList.length; i++)
211         {
212             starList[i].isSelected = true;
213             starList[i].updateTexture();
214             starList[i].count++;
215         }
216     },
217     //获得相连同色星星列表
218     getSameColorStar:function(col, row, type)
219     {
220         var starList = [];
221         //星星必须在矩阵范围内(9X9)
222         if(this.jugementStarPostion(col, row) == -1)
223         {
224             return starList;
225         }
226         if(this.starObjArr[col][row].type == type)
227         {
228             starList.push(this.starObjArr[col][row]);
229             this.starObjArr[col][row].type = -1;
230             //递归调用,寻找当前星星四周的同色星星
231             starList = starList.concat(this.getSameColorStar(col+1, row, type));//右边
232             starList = starList.concat(this.getSameColorStar(col - 1, row, type));//左边
233             starList = starList.concat(this.getSameColorStar(col, row + 1, type));//上方
234             starList = starList.concat(this.getSameColorStar(col, row - 1, type));//下方
235         }
236         return starList;
237     },
238     //判断col,row值是否在矩阵范围内,
239     jugementStarPostion:function(col, row)
240     {
241         if(col < 0 ||col >9)    //超出水平范围
242         {
243             return -1;
244         }
245         if(row < 0 || row > 9) //超出垂直范围
246         {
247             return -1;
248         }
249         if(this.starObjArr[col][row] == null || this.starObjArr[col][row] == undefined)    //该对象不存在
250         {
251             return -1;
252         }
253         return this.starObjArr[col][row].type;
254     },
255     //初始化
256     zinit:function()
257     {
258         this.size = cc.size(480, 500);
259         //设置层的大小
260         this.setSize(this.size);
261         //将星星资源存放到数字中
262         this.starArr = [
263                         {id:1, normal:res.star1, selected:res.star1s},
264                         {id:2, normal:res.star2, selected:res.star2s},
265                         {id:3, normal:res.star3, selected:res.star3s},
266                         {id:4, normal:res.star4, selected:res.star4s},
267                         {id:5, normal:res.star5, selected:res.star5s}
268                         ];
269         for(var i = 0; i < 10; i++)
270         {
271             this.starObjArr.push([]);
272         }
273         //开启侦听器,逐侦监听
274         this.scheduleUpdate();
275     }
276 });
277 //实例化
278 GameStarLayout.createLayout = function()
279 {
280     var starLayout = new GameStarLayout();
281     return starLayout;
282 };/********************effect image******************************/

时间： 2024-10-06 02:57:16

Cocos2d JS 之消灭星星(九) 处理星星类之——移动和消灭星星的相关文章

cocos2d js ClippingNode 制作标题闪亮特效

1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似的效果. 顺便给我公司的游戏打下广告.https://itunes.apple.com/cn/app/kuang-zhan-san-guo/id691116157? mt=8 2.效果原理很easy.就是一张白色两边羽化的图片在标题上从左往右移动.可是普通的移动会穿帮.我们须要以标题作为模板来截取白色的图片

Cocos2D学习笔记（1）- 常用的类

1.坐标系 >屏幕坐标系(UIKit):原点在左上角! >OpenGl坐标系:原点在屏幕的左下角! 2.游戏设计:Director--Scene--Layer--Sprite. >CCDirector:导演类,相当于是游戏策划,负责整个游戏的布局和运行规则的制定. >CCScene:场景类,每个场景可以是一个界面或一个关卡. >CCLayer:图层类,为了方便游戏界面的渲染管理. >CCSprite:精灵类, 小结:一个导演类(CCDirector)可以指挥多个场景类(

《JS权威指南学习总结--第九章类和模板》

内容要点: 一. 1.第六章详细介绍了JS对象,每个JS对象都是一个属性集合,相互之间没有任何联系.在JS中也可以定义对象的类,让每个对象都共享某些属性,这种"共享"的特性是非常有用的. 2.类的成员或实例都包含一些属性,用以存放或定义它们的状态,其中有些属性定义了它们的行为(通常称为方法).这些行为通常是由类定义的,而且为所有实例共享.例如,假设有一个名为Complex的类用来表示复数,同时还定义了一些复数运算. 一个Complex实例应当包含复数的实部和虚部(状态),同样Compl

JAVA之旅（九）——Object类，equals，toString，getClass，内部类访问规则，静态内部类,内部类原则，匿名内部类

JAVA之旅(九)--Object类,equals,toString,getClass,内部类访问规则,静态内部类,内部类原则,匿名内部类天天被一些琐事骚扰,学习还得继续一.Object类 Object是什么呢?我们可以翻阅JAVA API文档看他的介绍上面介绍说,object是类层次结构的根类,也就是超类 Object:是所有对象的直接后者间继承关系,传说中的老祖宗,你父亲还有父亲,你父亲的父亲还有父亲是爷爷,这是继承关系,但是你的祖宗却只有一位,该类中定义的肯定是所有对象都具备的功能

Cocos2d JS 之消灭星星(六) 创建星星类

1 /* 2 * 创建星星类(所有的星星都在这里创建,星星拥有的所有性都在这里实现) 3 */ 4 var GameCreateStar = ccui.ImageView.extend( 5 { 6 type:0,//星星的类型(不同数字代表不同颜色的星星); 7 isSelected:false,//是否选中 8 col:null,//水平方向排列位置(0-9) 9 row:null,//竖直方向排列位置(0-9) 10 normal:null,//通常状态图片纹理 11 selected:n

Cocos2d JS 之消灭星星(七) 处理星星类之——排列星星

1 /* 2 * 本层拥有处理星星的实例化以及对星星的操作 3 */ 4 var GameStarLayout = ccui.Layout.extend( 5 { 6 size:null, 7 starArr:[],//存放点击与被点击状态的星星资源 8 starObjArr:[],//存放游戏中星星的二位数组 9 ctor:function() 10 { 11 this._super(); 12 this.zinit(); 13 this.layoutStar(); 14 }, 15 //将星

Cocos2d JS 之消灭星星(五) 游戏主场景

1 /* 2 * 游戏主场景 3 */ 4 var GameMainScene = ccui.Layout.extend( 5 { 6 ctor:function() 7 { 8 this._super(); 9 this.zinit(); 10 this.setTopInfor(); 11 this.addStarLayout(); 12 }, 13 //游戏主场景顶部显示信息 14 setTopInfor:function() 15 { 16 var gameTopInfo = new Ga

Cocos2d JS 之消灭星星(十) 关卡配置

关卡配置,包括每个关卡的通关分数和当前关卡的星星数量 1 /* 2 * 关卡配置 3 * 每一关的通过分数和星星数量配置档 4 */ 5 var levelData = 6 [ 7 {level:1, standards:1000, starNumber:4}, 8 {level:2, standards:3000, starNumber:4}, 9 {level:3, standards:5000, starNumber:4}, 10 {level:4, standards:7000, sta

Cocos2d JS 之消灭星星(三) 进入游戏过渡场景

1 /* 2 * 游戏过渡场景,主要作用是在每次进入游戏或者进入下一关卡时进行过渡,显示当前的关卡以及通过该关卡要达到的分数; 3 */ 4 var TransitionScene = ccui.Layout.extend( 5 { 6 size:null, 7 ctor:function() 8 { 9 this._super(); 10 this.zinit(); 11 this.setLabel(); 12 this.gotoGameMainScene(); 13 }, 14 //设置显示