使用cocos2d-js-3.0RC1中的物理引擎chipmunk模拟的“别碰钉子”源码分享(含碰撞检测)

分别用box2d和chipmunk实现了一下,不过box2d没整理,也懒得整理了。
chipmunk整理了一下,分享给大家吧。

演示地址:http://121.40.100.196/box/

刚开始研究,抛砖引玉

简要说明:
1、初始化物理环境,增加边界

initPhysics: function () {
var space = this.space ;
var staticBody = space.staticBody;
    //开启物体形状测试
    //this.initDebugMode();

    // Gravity
    space.gravity = cp.v(0, -980);      //重力
    space.sleepTimeThreshold = 0.5;     //休眠临界时间
    space.collisionSlop = 0.5;          //

    // Walls--四个边界
    var walls =  new cp.SegmentShape( staticBody, cp.v(0,0-1), cp.v(winSize.width,0), 0-1 ),                // bottom
        new cp.SegmentShape( staticBody, cp.v(0,winSize.height), cp.v(winSize.width,winSize.height), 0),    // top
        new cp.SegmentShape( staticBody, cp.v(0,0), cp.v(0,winSize.height), 0),                // left
        new cp.SegmentShape( staticBody, cp.v(winSize.width,0), cp.v(winSize.width,winSize.height), 0)    // right
    ];
    for( var i=0; i < walls.length; i++ ) {
        var shape = walls*;
        shape.setElasticity(1);         //弹性
        shape.setFriction(0);           //摩擦
        //space.addStaticShape( shape );
        space.addShape( shape );
        if(i >= 2){
            shape.setCollisionType(3);
        }
        shape.setLayers(1);
    }
},

2、物体形状测试
    <pre class="brush:js; toolbar: true; auto-links: false;">initDebugMode: function () {
        this._debugNode = cc.PhysicsDebugNode.create(this.space);
        this.addChild(this._debugNode);
    },

3、物体定义

initBoxWithBody: function () {
//物体的定义
var mass = 1;
var boxWidth = 32;
    var body = new cp.Body(mass, cp.momentForBox(mass, boxWidth, boxWidth) );
    body.setPos( cc.p(winSize.width/2, winSize.height/2) );
    this.space.addBody( body );
    var shape = new cp.BoxShape( body, boxWidth, boxWidth);
    shape.setElasticity( 0.5 );
    shape.setFriction( 0.3 );
    shape.setCollisionType(1);
    shape.setLayers(3);
    this.space.addShape( shape );

    //创建一个箱子
    var v_texture = cc.textureCache.addImage(res.box_png);
    this.box = cc.PhysicsSprite.create(v_texture,cc.rect(0,0,boxWidth,boxWidth));
    this.box.setBody(body);
    this.addChild(this.box,1);
    this.box.setTag(101);

    //上下移动
    var moveTo1 = cc.MoveTo.create(0.5, winSize.width / 2, this.box.y + 40);
    var moveTo2 = cc.MoveTo.create(0.5, winSize.width / 2, this.box.y - 40);
    this.downUpAction = cc.RepeatForever.create(cc.Sequence.create(moveTo1,moveTo2));
    this.box.runAction(this.downUpAction);
},

4、增加点击事件、碰撞检测监听
   <pre class="brush:js; toolbar: true; auto-links: false;"> onEnter: function () {
        this._super();

        cc.sys.dumpRoot();
        cc.sys.garbageCollect();

        //事件处理
        if( 'touches' in cc.sys.capabilities ){
            cc.eventManager.addListener({
                event: cc.EventListener.TOUCH_ALL_AT_ONCE,
                onTouchesEnded: function(touches, event){
                    event.getCurrentTarget().processEvent( touches );
                }
            }, this);
        } else if( 'mouse' in cc.sys.capabilities ){
            cc.eventManager.addListener({
                event: cc.EventListener.MOUSE,
                onMouseDown: function(event){
                    event.getCurrentTarget().processEvent( event );
                }
            }, this);
        }

        //重置数据
        this.resetDatas();
        //
        this.scheduleUpdate();

        //添加碰撞监听事件
        // 1 & 2 检测box和上下BLOCK碰撞
        this.space.addCollisionHandler( 1, 2,
            this.collisionBegin.bind(this),
            this.collisionPre.bind(this),
            this.collisionPost.bind(this),
            this.collisionSeparate.bind(this)
        );
        // 1 & 3 检测box和左右边界碰撞
        this.space.addCollisionHandler( 1, 3,
            this.collisionBegin.bind(this),
            this.collisionPre.bind(this),
            this.collisionPost.bind(this),
            this.collisionSeparate.bind(this)
        );
        // 1 & 4 检测box和左右BLOCK碰撞
        this.space.addCollisionHandler( 1, 4,
            this.collisionBegin.bind(this),
            this.collisionPre.bind(this),
            this.collisionPost.bind(this),
            this.collisionSeparate.bind(this)
        );
    },

5、碰撞检测

collisionBegin : function ( arbiter, space ) {

        var shapes = arbiter.getShapes();

        var shapeA = shapes;
        var shapeB = shapes;

        var collTypeA = shapeA.collision_type;
        var collTypeB = shapeB.collision_type;

        if(collTypeB == 3){
            console.log( 'Collision Type A:' + collTypeA );
            console.log( 'end Collision Type B:' + collTypeB );

            this.boxDirectionX = -this.boxDirectionX;

            this.space.addPostStepCallback(function () {
                this.updateBoxAndBlocks();
            }.bind(this));
        }else if(collTypeB == 2 || collTypeB == 4)
        {//碰到上下墙壁 或者 左右出来的BLOCKS 就Gameover
            this.gameOver();
        }

        return true;
    },

    collisionPre : function ( arbiter, space ) {
        //console.log('collision pre');
        return true;
    },

    collisionPost : function ( arbiter, space ) {
        //console.log('collision post');
    },

    collisionSeparate : function ( arbiter, space ) {
        //console.log('collision separate');
    }
```

 *

不错,顶一个

楼主威武,这个教程不错:2:

根据楼主的代码进行了学习 然后对比参考写了一下 算是 比着葫芦画瓢 不过浏览器看着一切正常 丢手机浏览器就黑屏了 郁闷了 刚学cocos2d 觉的好蛋疼~

在浏览器上运行的时候可以看看有没有报错哦,
另外也可以使用 Cocos Code IDE 进行 jsb调试看看是否运行正常

我没有遇到黑屏的情况呀
PC浏览器打开是很流畅
不过在android上用网页打开会比较卡,这个建议使用jsb
而且我试过用jsb后,在android和ios下都很流畅

顶楼主,学习一下

顶顶顶,好东西

为什么在win32和android下都是黑屏

用jsb的时候报错了,jsb_create_apis.js:941:TypeError: cc.PhysicsSprite.createWithTexture is not a function,这个怎么解决呢???

cc.PhysicsSprite create方法改成new

你确认下cocos2d-js的版本

cc.PhysicsSprite.createWithTexture is not a function
这个方法是不是过期了 你看下你那个版本的cocos2d-js关于cc.PhysicsSprite的使用应该怎样使用

楼主,我很喜欢用H5做游戏,您能教教我怎么用cocos2d-js这个引擎吗?谢谢了

为什么我打开那个地址看是黑的呢

学习学习!!!!!

阿里云带宽到期,还没续费,所以打开特别慢,近期我会处理掉

很不错,学习一下!

:2: :2: :2: :2: :2: :2: :2:

顶一下先:2::2::2:

:2: :2: :2: :2: :2: :2: