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

2019-05-18 原文

http://www.cocoachina.com/bbs/read.PHP?tid=220250

管理提醒:本帖被 superdragon 执行加亮操作(2014-08-27)

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

演示地址： http://121.40.100.196/box/
刚开始研究，抛砖引玉
简要说明：
1、初始化物理环境，增加边界

 
     ? 
    
          initPhysics:  
          function 
           () { 
         
          var 
           space =  
          this 
          .space ; 
         
           staticBody = space.staticBody; 
         
          //开启物体形状测试 
         
          //this.initDebugMode(); 
         
          // Gravity 
         
          space.gravity = cp.v(0,-980); 
          //重力 
         
          space.sleepTimeThreshold = 0.5;  
          //休眠临界时间 
         
          space.collisionSlop = 0.5; 
          // 
         
          // Walls--四个边界 
         
           walls = [  
          new 
           cp.SegmentShape( staticBody,cp.v(0,0-1),cp.v(winSize.width,0),0-1 ), 
          // bottom 
         
          // top 
         
          // left 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,0) 
          // right 
         
          ]; 
         
          for 
          (  
           i=0; i < walls.length; i++ ) { 
         
           shape = walls<i>; 
         
          shape.setElasticity(1);  
          //弹性 
         
          shape.setFriction(0);  
          //摩擦 
         
          //space.addStaticShape( shape ); 
         
          space.addShape( shape ); 
         
          if 
          (i >= 2){ 
         
          shape.setCollisionType(3); 
         
          } 
         
          shape.setLayers(1); 
         
          } 
         
          },</i>

2、物体形状测试

 
     ? 
    
          4 
          
       initDebugMode:  
          ._debugNode = cc.PhysicsDebugNode.create(.space); 
          .addChild( 
          ._debugNode); 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,

3、物体定义

          28 
        
       initBoxWithBody:  
          //物体的定义 
           mass = 1; 
         
           BoxWidth = 32; 
         
           body =  
           cp.Body(mass,cp.momentForBox(mass,BoxWidth,BoxWidth) ); 
         
          body.setPos( cc.p(winSize.width/2,winSize.height/2) ); 
         
          .space.addBody( body ); 
         
           shape =  
           cp.BoxShape( body,BoxWidth); 
         
          shape.setElasticity( 0.5 ); 
         
          shape.setFriction( 0.3 ); 
         
          shape.setCollisionType(1); 
         
          shape.setLayers(3); 
         
          .space.addShape( shape ); 
         
          //创建一个箱子 
         
           v_texture = cc.textureCache.addImage(res.Box_png); 
         
          .Box = cc.Physicssprite.create(v_texture,cc.rect(0,BoxWidth)); 
         
          .Box.setBody(body); 
         
          .Box,1); 
         
          .Box.setTag(101); 
         
          //上下移动 
         
           moveto1 = cc.Moveto.create(0.5,winSize.width / 2, 
          .Box.y + 40); 
         
           moveto2 = cc.Moveto.create(0.5,monospace!important; font-size:1em!important; min-height:inherit!important; color:black!important; background:none!important">.Box.y - 40); 
         
          .downUpAction = cc.RepeatForever.create(cc.Sequence.create(moveto1,moveto2)); 
         
          .Box.runAction( 
          .downUpAction); 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,

4、增加点击事件、碰撞检测监听

          30 
        
          31 
        
          32 
        
          33 
        
          34 
        
          35 
        
          36 
        
          37 
        
          38 
        
          39 
        
          40 
        
          41 
        
          42 
        
          43 
        
          44 
        
          45 
        
          46 
        
          47 
        
          48 
        
          49 
        
          50 
        
          51 
        
       onEnter:  
          ._super();
            
          cc.sys.dumpRoot(); 
         
          cc.sys.garbageCollect(); 
         
          //事件处理 
         
          (  
          'touches' 
           in 
           cc.sys.capabilities ){ 
         
          cc.eventManager.addListener({ 
         
          event: cc.EventListener.TOUCH_ALL_AT_ONCE, 
         
          ontouchesEnded:  
          (touches,event){ 
         
          event.getCurrentTarget().processEvent( touches[0] ); 
         
          } 
         
          ); 
         
          }  
          else 
           if 
          'mouse' 
           cc.sys.capabilities ){ 
         
          cc.eventManager.addListener({ 
         
          event: cc.EventListener.MOUSE, 
         
          onMouseDown:  
          (event){ 
         
          event.getCurrentTarget().processEvent( event ); 
         
          } 
         
          ); 
         
          } 
         
          //重置数据 
         
          .resetDatas(); 
         
          // 
         
          .scheduleUpdate(); 
         
          //添加碰撞监听事件 
         
          // 1 & 2 检测Box和上下BLOCK碰撞 
         
          .space.addCollisionHandler( 1,2, 
         
          .collisionBegin.bind( 
          ), 
         
          .collisionPre.bind( 
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
         
          .collisionPost.bind( 
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
         
          .collisionSeparate.bind( 
          ) 
         
          ); 
         
          // 1 & 3 检测Box和左右边界碰撞 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,3, 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
         
          ) 
         
          ); 
         
          // 1 & 4 检测Box和左右BLOCK碰撞 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,4, 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
         
          ) 
         
          ); 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,

5、碰撞检测

          39 
        
       collisionBegin :  
           ( arbiter,space ) {
            
           shapes = arbiter.getShapes(); 
         
           shapeA = shapes[0]; 
         
           shapeB = shapes[1]; 
         
           collTypeA = shapeA.collision_type; 
         
           collTypeB = shapeB.collision_type; 
         
          (collTypeB == 3){ 
         
          console.log(  
          'Collision Type A:' 
           + collTypeA ); 
         
          'end Collision Type B:' 
           + collTypeB ); 
         
          .BoxDirectionX = - 
          .BoxDirectionX; 
         
          .space.addPostStepCallback( 
           () { 
         
          .updateBoxAndBlocks(); 
         
          }.bind( 
          )); 
         
          } 
          (collTypeB == 2 || collTypeB == 4) 
         
          { 
          //碰到上下墙壁 或者 左右出来的BLOCKS 就Gameover 
         
          .gameOver(); 
         
          } 
         
          return 
           true 
          ; 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
         
          collisionPre :  
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,space ) { 
         
          //console.log('collision pre'); 
         
          ; 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
         
          collisionPost :  
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,space ) { 
         
          //console.log('collision post'); 
         
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
         
          collisionSeparate :  
          ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,space ) { 
         
          //console.log('collision separate'); 
         
          }

使用cocos2d-js-3.0RC1中的物理引擎chipmunk模拟的“别碰钉子”源码分享含碰撞检测的更多相关文章

HTML实现代码雨源码及效果示例

这篇文章主要介绍了HTML实现代码雨源码及效果示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
用canvas做一个DVD待机动画的实现代码

这篇文章主要介绍了用canvas做一个DVD待机动画的实现代码的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
HTML5自定义视频播放器源码

这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Html5 滚动穿透的方法

这篇文章主要介绍了Html5 滚动穿透的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
HTML5自定义mp3播放器源码

这篇文章主要介绍了HTML5自定义mp3播放器源码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
详解HTML5中CSS外观属性

这篇文章主要介绍了HTML5中CSS外观属性的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，,需要的朋友可以参考下
CSS中实现动画效果-附案例

这篇文章主要介绍了 CSS中实现动画效果并附上案例代码及实现效果，就是CSS动画样式处理，动画声明需要使用@keyframes name,后面的name是人为定义的动画名称，下面我们来看看文章的具体实现内容吧，需要的小伙伴可以参考一下
html5默认气泡修改的代码详解

这篇文章主要介绍了html5默认气泡修改的代码详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Html5移动端适配IphoneX等机型的方法

这篇文章主要介绍了Html5移动端适配IphoneX等机型的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
小程序瀑布流解决左右两边高度差距过大的问题

这篇文章主要介绍了小程序瀑布流解决左右两边高度差距过大的问题的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

随机推荐

【cocos2d-x 3.x 学习笔记】对象内存管理

Cocos2d-x的内存管理cocos2d-x中使用的是上面的引用计数来管理内存，但是又增加了一些自己的特色。cocos2d-x中通过Ref类来实现引用计数，所有需要实现内存自动回收的类都应该继承自Ref类。下面是Ref类的定义：在cocos2d-x中创建对象通常有两种方式：这两中方式的差异可以参见我另一篇博文“对象创建方式讨论”。在cocos2d-x中提倡使用第二种方式，为了避免误用第一种方式，一般将构造函数设为protected或private。参考资料：[1]cocos2d-x高级开发教程2.3节[
利用cocos2dx 3.2开发消灭星星六如何在cocos2dx中显示中文

由于编码的不同，在cocos2dx中的Label控件中如果放入中文字，往往会出现乱码。为了方便使用，我把这个从文档中获取中文字的方法放在一个头文件里面Chinese.h这里的tex_vec是cocos2dx提供的一个保存文档内容的一个容器。这里给出ChineseWords,xml的格式再看看ChineseWord的实现Chinese.cpp就这样，以后在需要用到中文字的地方，就先include这个头文件然后调用ChineseWord函数，获取一串中文字符串。
利用cocos2dx 3.2开发消灭星星七关于星星的算法

在前面，我们已经在GameLayer中利用随机数初始化了一个StarMatrix，如果还不知道怎么创建星星矩阵请回去看看而且我们也讲了整个游戏的触摸事件的派发了。
cocos2dx3.x 新手打包APK注意事项！

这个在编译的时候就可以发现了比较好弄这只是我遇到的，其他的以后遇到再补充吧。。。以前被这两个问题坑了好久
利用cocos2dx 3.2开发消灭星星八游戏的结束判断与数据控制

如果你看完之前的，那么你基本已经拥有一个消灭星星游戏的雏形。开始把剩下的两两互不相连的星星消去。那么如何判断是GameOver还是进入下一关呢。。其实游戏数据贯穿整个游戏，包括星星消除的时候要加到获得分数上，消去剩下两两不相连的星星的时候的加分政策等，因此如果前面没有做这一块的，最好回去搞一搞。
利用cocos2dx 3.2开发消灭星星九为游戏添加一些特效

needClear是一个flag，当游戏判断不能再继续后，这个flag变为true，开始消除剩下的星星clearSumTime是一个累加器ONE_CLEAR_TIME就是每颗星星消除的时间2.连击加分信息一般消除一次星星都会有连击信息和加多少分的信息。其实这些combo标签就是一张图片，也是通过控制其属性或者runAction来实现。源码ComboEffect.hComboEffect.cpp4.消除星星粒子效果消除星星时，为了实现星星爆裂散落的效果，使用了cocos2d提供的粒子特效引擎对于粒子特效不了
02 Cocos2D-x引擎win7环境搭建及创建项目

官网有搭建的文章，直接转载记录。环境搭建：本文介绍如何搭建Cocos2d-x3.2版本的开发环境。项目创建：一、通过命令创建项目前面搭建好环境后，怎样创建自己的Cocos2d-x项目呢？先来看看Cocos2d-x3.2的目录吧这就是Cocos2d-x3.2的目录。输入cocosnew项目名–p包名–lcpp–d路径回车就创建成功了例如：成功后，找到这个项目打开proj.win32目录下的Hello.slnF5成功了。
利用cocos2dx 3.2开发消灭星星十为游戏添加音效项目源码分享

一个游戏，声音也是非常的重要，其实cocos2dx里面的简单音效引擎的使用是非常简单的。我这里只不过是用一个类对所有的音效进行管理罢了。Audio.hAudio.cpp好了，本系列教程到此结束，第一次写教程如有不对请见谅或指教，谢谢大家。最后附上整个项目的源代码点击打开链接
03 Helloworld

程序都有一个入口点，在C++就是main函数了，打开main.cpp，代码如下：123456789101112131415161718#include"main.h"#include"AppDelegate.h"#include"cocos2d.h"USING_NS_CC;intAPIENTRY_tWinMain{UNREFERENCED_ParaMETER;UNREFERENCED_ParaMETER;//createtheapplicationinstanceAppDelegateapp;return
MenuItemImage*图标菜单创建注意事项

学习cocos2dx,看的是cocos2d-x3.x手游开发实例详解，这本书错误一大把，本着探索求知勇于发现错误改正错误的精神，我跟着书上的例子一起调试，当学习到场景切换这个小节的时候，出了个错误，卡了我好几个小时。