为了游戏主界面形成这样的效果（请忽略边边角角那一些黑边，这店bug以后换图片）

需要我写一个bubblescene场景js 用来加载固定在游戏主界面不变的背景和炮台

还要写一个bubble类，用来封装bubble类

最后在bubblescene中按照算法添加bubble们

二.加载游戏主场景所有元素

首先看一下bubble类吧。。bubble有什么性质呢  颜色（即类型），通过不同的类型找到对应不同的图片加载。位置，每一个bubble都有不同的位置。

var Bubble=cc.Sprite.extend({type:0,myCol:0,myRow:0,ctor:function(type){this.type=type;var pic=res["Bubble_"+type];this._super(pic);}});
ctor 是构造函数的意思
var pic=res["Bubble_"+type];this._super(pic);     这里给bubble一张对应图片




再看bubblescene类


  背景图片加载直接copy  startscene呃内容改个名字，去掉menu就好了


        最底下两个小球和发射台的位置是固定的，建立一个命名空间，存放他们的位置


var game=game||{};//命名空间  这个东西写到一个js中，比这个js完一些加载的js也会识别，命名空间嘛  这东西在main.js中定义，在bubblescene中写入元素


game.Shoot_Pos={x:180,y:60};
game.Ready_Pos={x:100,y:20};


以下函数分别是建立炮台，建立发射bubble，建立等待bubble，单纯创建一个bubble


fireBubble:null,
waitBubble:null,
shooter:null,


createShooter:function(){this.shooter=new cc.Sprite(res.Shooter);this.shooter.x=game.Shoot_Pos.x;this.shooter.y=game.Shoot_Pos.y;this.shooter.anchorY=0.4;this.addChild(this.shooter);
},
createShootBubble:function(){var type=0;this.fireBubble=this.addOneBubble(type,game.Shoot_Pos.x,game.Shoot_Pos.y);
},
createReadyBubble:function(){var type=1;this.waitBubble=this.addOneBubble(type,game.Ready_Pos.x,game.Ready_Pos.y);
},


addOneBubble:function(type,x,y){var bubble=new Bubble(type);bubble.attr({x:x,y:y});this.addChild(bubble);return bubble;
}


在onenter里面调用以上四个函数。


this.createReadyBubble();
this.createShooter();
this.createShootBubble();




突然觉得js比c++好用太多了，c++写游戏，要不断跳跃于头文件和cpp文件之间的，变量的定义，函数等等都很麻烦，js呢没有头文件，变量函数也简洁干练。








下面加载最上面的bubble们



    有两种方法，一种是定义了数组，随机生成bubble




    另一种是设计好某个地方是哪个类型的bubble一关一关规定下来，加载进去。




    总之，首先要宏定义这么几个变量





game.Bound={LEFT:40,RIGHT:340,UP:540,DOWN:80
};




bubble的限制范围，超出这个范围就不能再有泡泡了，就要continue了


game.BubbleD=32;


bubble的半径




game.MaxRow=15;
game.MaxCol=10;


最大行列数，很明显是为第一种加载方式准备的了








下面看第一种生成方法：


bubblesArr:[],


for(var i=0;i<game.MaxRow;i++){this.bubblesArr[i]=[];//js没有原生的二维数组


}
自定义生成Bubble map
for(var i=0;i<4;i++){var offset=i%2?game.BubbleD/2:0;for(var j=0;j<game.MaxCol;j++){if(i%2 && (j==game.MaxCol-1))continue;var type=parseInt(Math.random()*8);var x=game.Bound.LEFT+game.BubbleD*j+offset;var y=game.Bound.UP-game.BubbleD*i;var bubble=this.addOneBubble(type,x,y);bubble.myRow=i;bubble.myCol=j;this.bubblesArr[i][j]=bubble;}
}




js有一个与c++不同的是，js没有定义的二维数组，只能定义一维数组，扩展成二维数组  第一个for循环就是预先把二维数组生成好，扩展开，以防后面关卡多了越界，行列都按最大值。




下面一个二重for循环值生成了4行bubbles


var offset=i%2?game.BubbleD/2:0;   偶数行比奇数行要向右有一点错位，这是那个偏移量


 if(i%2 && (j==game.MaxCol-1))continue;  偶数行的时候，如果j达到最大列了，就不加载bubble，这里使用算法限制bubble不要越界，为了美观。


var type=parseInt(Math.random()*8);   类型var x=game.Bound.LEFT+game.BubbleD*j+offset;var y=game.Bound.UP-game.BubbleD*i;    坐标


 var bubble=this.addOneBubble(type,x,y);  创建bubblebubble.myRow=i;bubble.myCol=j;                    内容补全this.bubblesArr[i][j]=bubble;   把bubble加到数组中以记录。






加载分几步：把数组扩展好，遍历i和j，随机出一个type，定好位置，new出一个bubble来，增添好bubble各项内容，加入数组记录。


下面看第二种方法




addBubbles:function(){for(var i=0;i<game.MaxRow;i++){this.bubblesArr[i]=[];//js没有原生的二维数组


    }
    //策划生成地图
    var level1=[[1,3,4,2,5,6],[2,5,3,4,1,5],[0,0,2,3,5,1]];for(var i=0;i<level1.length;i++){var offset=i%2?game.BubbleD/2:0;for(var j=0;j<level1[i].length;j++){


            var x=game.Bound.LEFT+game.BubbleD*j+offset;var y=game.Bound.UP-game.BubbleD*i;var bubble=this.addOneBubble(level1[i][j],x,y);bubble.myRow=i;bubble.myCol=j;this.bubblesArr[i][j]=bubble;}}
},






区别很小了，不再random一个type而是直接从level中调出来用。






晚安zhangyugege。


												


											

cocos-js web开发泡泡龙游戏【二 生成游戏所有元素】相关推荐
	

    
						
  1. 游戏开发入门（二）游戏中的设计模式
		
    视频链接:游戏开发入门(二)游戏中的设计模式(3节课 时常:约2小时40分钟) 该视频主要围绕游戏中常见的设计模式展开讲解并实践,需要大家多多实践与理解 笔记与总结(请先学习视频内容): 1.有必要深 ...
    
		
    2. 
						
  2. 《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记
		
    最近想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序,所以需要在本地搭建Node.js Web的开发测试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴 ...
    
		
    3. 
								
  3. Web开发四书五经之二：CSS与XML
		
    [图灵图书推荐]三大Web标准基础教程: HTML基础教程            已经震撼推出!                       CSS基础教程                       ...
    
		
    4. 
						
  4. 游戏开发入门（二）游戏开发概述
		
    这篇文章主要以问题的形式给大家解答下面几个问题: 1.游戏是如何开发出来的,开发流程大概是什么样子的? 2.游戏相关的职位都有哪些? 3.开发游戏需要哪些技术或能力? 4.程序员一般负责的内容有哪些? ...
    
		
    5. 
						
  5. cocos-js web开发泡泡龙游戏【一    加载游戏场景】
		
    哀家发现一个游戏如果不记录(复习)一下的话,不算真正记在脑子里了,也可以理解为我是一个手写记忆型. 我目前的水平,对cocos2d-x有了一些了解,对cocos2d-js没有接触过,看了一下泡泡龙的视 ...
    
		
    6. 
						
  6. go语言web开发系列之二十二:用signintech/gopdf库生成带有图片和表格的pdf
		
    一,安装需要用到的库: 1,gopdf库的地址: https://github.com/signintech/gopdf 2,gopdf库安装的命令: liuhongdi@ku:~$ go get - ...
    
		
    7. 
						
  7. go语言web开发系列之二十:用gorm+excelize库生成excel表格并下载
		
    一,安装所需的库 1,excelize库的地址: https://github.com/360EntSecGroup-Skylar/excelize ,excelize库的文档: https://xu ...
    
		
    8. 
						
  8. 网页游戏开发入门教程二（游戏模式+系统）
		
    2019独角兽企业重金招聘Python工程师标准>>> 一.游戏模式 目前webgame游戏模式大体上可以分为以下四类: 1.玩家拥有一个城市,不断的升级城市内建筑,建筑可以自动获得 ...
    
		
    9. 
						
  9. Node.js Web开发_第二章(2)
		
    电子书推荐 Digital Forensics with Kali Linux, 2nd Edition Debugging CSS Practical Entity Framework Core 6 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. java MD5 加密
		
    2. 
						
  2. Swift3.0语言教程字符串与文件的数据转换
		
    3. 
						
  3. ubuntu 14.04-LTS 系统下安装搜狗输入法
		
    4. 
						
  4. 验证码 禁止输入中文
		
    5. 
						
  5. nyoj655光棍的yy
		
    6. 
						
  6. 微服务实践：全栈小团队“洪荒之力”改造阿里服务CRM技术体系
		
    7. 
						
  7. javascript实用技巧--数组.
		
    8. 
						
  8. win10远端服务器未响应,win10怎么连远程服务器未响应
		
    9. 
						
  9. hdu 4539(状压dp)
		
    10. 
						
  10. （224）FPGA数字信号处理入门指导
		
    11. 
						
  11. linux7 vi 末行 快捷键,vi 常用操作快捷键
		
    12. 
						
  12. js未知数加已知数的结果数，三者的每个数字不重复
		
    13. 
						
  13. Elasticsearch官档翻译——1 4 修改数据
		
    14. 
						
  14. ue编辑器漏洞_UEditor编辑器任意文件上传漏洞分析
		
    15. 
						
  15. elasticjob 源码分析
		
    16. 
						
  16. 计算机资源管理菜单包括哪些,资源管理器文件菜单有哪些命令,资源管理器命令...
		
    17. 
						
  17. 引导页如何在pc端实现
		
    18. 
						
  18. 锐角三角形的一些结论及证明
		
    19. 
						
  19. 【清明节】开发平台公司流辰信息缅怀先祖，传承精神，撸起袖子创佳绩！
		
    20. 
						
  20. jquery视频播放器_jQuery插入QuickTime视频播放器
		
    21. 
		

	


热门文章
	

    
									
  1. 操作系统linux应用试卷,《Linux操作系统应用》试卷5
			
    2. 
						
  2. codeforces 1041D Glider
			
    3. 
						
  3. 【电商必看】利用“评论返现”提升店铺转化率
			
    4. 
						
  4. 三十多岁的女工程师，有点悲哀
			
    5. 
						
  5. 刻意练习：避免 “低水平勤奋” 陷阱
			
    6. 
						
  6. TB/T3139-2021机车车辆有害物质限量新标准解读
			
    7. 
						
  7. 深度学习——卷积层+填充和步幅（笔记）
			
    8. 
						
  8. 【JavaWeb】eclipse中常见报错解决汇总
			
    9. 
						
  9. c语言初始化列表,Initialization（初始化）
			
    10. 
						
  10. 自媒体该怎么赚钱？新手运营自媒体方法
			
    11.