打蜜蜂游戏(cocos-2d-js)游戏体会

游戏简介:这款小游戏是一款简单的打砖块游戏翻版.

游戏要求:

1.拥有一个炮塔可以生成子弹,炮塔随着鼠标点击的位置发生改变,子弹跟随炮塔的发射而改变其位置,

子弹撞到上左右三面墙进行反弹,

2.子弹撞到砖块拥有一个简单的爆炸效果

3.不准使用物理引擎

心得体会:

1.如何使用cocos-2d-js制作帧动画.

 // var sp = new cc.Sprite();
        // sp.setTag(1000);
        // sp.setPosition(this.x,this.y);
        // this.parent.addChild(sp,1);

        var self=this;
        var animation=new cc.Animation();
        for(var i=0;i<3;i++)
        {
            // var frameName="h"+i+".png";
            //  var spriteFrame=cc.spriteFrameCache.getSpriteFrame(frameName);
            animation.addSpriteFrameWithFile("res/h"+i+".png");

        }
        animation.setDelayPerUnit(0.15);
        animation.setRestoreOriginalFrame(true);
        var action=cc.animate(animation);
        this.runAction(action);

备注(屏蔽掉sp部分,按照其要求应该是新建一个空白精灵,但是这个函数我本身就写在自定义精灵类里面,所有就不用)

2.关于炮弹反弹的问题:

  var size=cc.winSize;
        if(this.x>=size.width)
        {
            this.speedX*=-1;

        }else if(this.x<=0)
        {
            this.speedX*=-1;
        }
        else if(this.y>=size.height)
        {
            this.speedY*=-1;
        }
        else if(this.y<=0)
        {
            this.remove();
        }
        this._degree=90-Math.atan2(this.speedY,this.speedX)*180/Math.PI;
        this.setRotation(this._degree);

备注:这个代码很显然可以进行优化!!!

炮弹反弹的逻辑很简单,修改其中速度的x,y其中一个值的正负就行了.

3.生成炮弹的角度问题

 var size=cc.winSize;
        this._degree=degree;
        var radians = cc.degreesToRadians(this._degree);
        var point = cc.pForAngle(radians);
        this.speedY = this.speed *point.x;
        this.speedX = this.speed * point.y;
        this.setPosition(size.width/2+this.speedX,this.speedY);

备注:

首先得到一个角度

角度获取:

var angle=90-Math.atan2(locationInNode.y,locationInNode.x-size.width/2)*180/Math.PI;

即是两个坐标的相减获得.

然后角度转弧度,弧度转向量,

最后在update里面不断给目标的x,y进行相加.

最后一行是设置子弹在刚刚在其炮管的位置生成,值得注意的是我这边的炮塔的坐标在其cc.p(size.width/2,0)的位置