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

cocos-js web开发泡泡龙游戏【二 生成游戏所有元素】_第1张图片

为了游戏主界面形成这样的效果(请忽略边边角角那一些黑边,这店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);  创建bubble
        bubble.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开发泡泡龙游戏【二 生成游戏所有元素】)