HTML5游戏开发-Box2dWeb使用(二)-碰撞以及各种连接

2012-06-20

HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接上次介绍了用box2dweb创建各种刚体，这次来介绍如何用鼠

HTML5游戏开发-Box2dWeb应用(二)-碰撞以及各种连接

上次介绍了用box2dweb创建各种刚体，这次来介绍如何用鼠标拖拽刚体，刚体之间的碰撞，以及刚体之间的各种连接。

HTML5游戏开发-Box2dWeb应用(一)-创建各种各样的刚体

http://blog.csdn.net/lufy_legend/article/details/7654607

一，鼠标拖拽刚体

使用lufylegend.js库件后，拖拽刚体变得很简单，只需调用LSprite的setBodyMouseJoint(true);方法即可，修改上一节中的add方法如下

<br /></p><br /><p><strong>三，刚体之间的各种链接</strong></p><p>最后，我们来看看刚体之间的各种连接，这部分目前没有封装在lufylegend.js里，以后会陆续封装进去，不过现在我们先来看看如何手动实现这些连接</p><p><strong>1,距离链接(b2DistanceJointDef)</strong></p><p>b2DistanceJointDef可以用来约束两个body之间的距离,用法如下</p><textarea readonly name="code" width="600" height="300" alt="HTML5游戏开发-Box2dWeb使用(二)-碰撞以及各种连接" /><br /></p><p><br /></p><p><strong>2,旋转链接(b2RevoluteJointDef)</strong></p><p>b2RevoluteJointDef可以给两个body设置一个轴心，让两个body绕这个轴心旋转,用法如下</p><textarea readonly name="code" alt="HTML5游戏开发-Box2dWeb使用(二)-碰撞以及各种连接" /><br /></p><p><br /></p><p><strong>3,滑轮链接(b2PulleyJointDef)</strong></p><p>b2PulleyJointDef类似滑轮效果,用法如下</p><textarea readonly name="code" width="600" height="300" alt="HTML5游戏开发-Box2dWeb使用(二)-碰撞以及各种连接" /><br /></p><p>其余的连接还有，b2GearJoint，b2PrismaticJoint，b2LineJoint，b2WeldJoint等多种链接，这些等以后封装到lufylegend.js后再详细介绍，这里不细说了，想了解的朋友可以查阅一下相关资料</p><p><br /></p><p>最后给出这两次内容的所有源代码</p><p>http://fsanguo.comoj.com/download.php?i=box2d_sample01.rar<br /></p><p><strong>注意，上面只是源码，如果想要在本地运行这些源码的话，需要自己下载lufylegend.js库件以及box2dweb，然后进行配置</strong></p><p><br /></p><p><strong>有了上面的介绍，应该可以做一个物理游戏了，相信大家都知道一款非常有名的游戏《愤怒的小鸟》，下次咱们来研究一下如何用html5来实现它</strong></p><dl class="comment_item comment_topic"><dt class="comment_head">8楼beiwang6小时前<dd class="comment_body">cpu 40%以上徘徊- -！！！伤不起<dl class="comment_item comment_topic"><dt class="comment_head">Re: lufy_Legend5小时前<dd class="comment_body">回复beiwangnbox2dweb是模仿真实物理世界，里面的摩擦弹力等计算本身就耗cpu，电脑配置跟不上的话也没办法啊，我电脑上cpu只占4%左右，用手机试了下直接变成慢动作了......</dl></dl><dl class="comment_item comment_topic"><dt class="comment_head">7楼ybfqlong12小时前<dd class="comment_body">看不懂<dl class="comment_item comment_topic"><dt class="comment_head">Re: lufy_Legend8小时前<dd class="comment_body">回复ybfqlongn如果有不懂的地方的话，可能需要看一下我以前相关的文章，比如LSprite,在下不可能每次都重复一遍，哈</dl></dl><dl class="comment_item comment_topic"><dt class="comment_head">6楼zhangjun_jm12小时前<dd class="comment_body">楼主太人才了，我忍不住不夸奖</dl><dl class="comment_item comment_topic"><dt class="comment_head">5楼mingfeng78922小时前<dd class="comment_body">必须顶贴</dl><dl class="comment_item comment_topic"><dt class="comment_head">4楼alexl昨天 22:06<dd class="comment_body">Very good!</dl><dl class="comment_item comment_topic"><dt class="comment_head">3楼YzzerCom昨天 19:31<dd class="comment_body">看了博主的文章，决定在csdn申请帐号膜拜一下，太牛B了！！！跟进学习中。<dl class="comment_item comment_topic"><dt class="comment_head">Re: lufy_Legend昨天 22:05<dd class="comment_body">回复YzzerComn兄弟过奖了，能帮到人，就算是没白折腾</dl></dl><dl class="comment_item comment_topic"><dt class="comment_head">2楼ht1093687505昨天 17:27<dd class="comment_body">你真牛啊</dl><dl class="comment_item comment_topic"><dt class="comment_head">1楼zhangjun_jm昨天 15:52<dd class="comment_body">狂顶，必须顶啊！！！</dl> </p><div class="aged2"><script type="text/javascript">a("article_content_down");</script></div>
 </div>
<div id="pagebox" >
<a href="/jiaocheng/webqd/" target="_blank">查看更多</a>
<A href="/jiaocheng/20121122/1331812.html" title="怎么利用树形控件(Tree Control)和SWFLoader控件创建一个简单图片相册">下一篇</A></div>
<div id="MainLeftll">
<div id="MainLeftllToolbar">本文网址：<a href="https://www.reader8.net/jiaocheng/20120620/1331816.html">https://www.reader8.net/jiaocheng/20120620/1331816.html</a></div>
<div class="related"><span class="relatedIco1">读书人精选</span>
<ul class="relatedList">
</ul>
</div>
<div class="aged3"><script type="text/javascript">a("article_content_down2");</script></div>
<div class="aged3a"><script type="text/javascript">a("article_content_down3");</script></div>
</div>
</div>
<!-- 文章正文左边结束 -->
<!-- 文章正文右边开始 -->
<div class="leftbox_r">
<div class="aged4"><script type="text/javascript">a("article_right_up");</script></div> 
<div class="Rtitle">
<span class="Rtitle_text">热点排行</span></div>
<div class="RContl">
<ul>
<li><a href="/jiaocheng/20121109/1348792.html" target="_blank">文件格式及有关的response.contentType</a></li>
<li><a href="/jiaocheng/20140114/1361432.html" target="_blank">Spring4.0系列9-websocket容易应用</a></li>
<li><a href="/jiaocheng/20120909/1359506.html" target="_blank">一种:before跟:after的箭头效果实践</a></li>
<li><a href="/jiaocheng/20121029/1289364.html" target="_blank">Gridpanel 兑现 行提示例子</a></li>
<li><a href="/jiaocheng/20140117/1299940.html" target="_blank">java实现Openlayers跨域署理程序</a></li>
<li><a href="/jiaocheng/20121119/1327601.html" target="_blank">字符串截断步骤</a></li>
<li><a href="/jiaocheng/20120627/1306936.html" target="_blank">maven install 把jar包放到WEB-INFO下头</a></li>
<li><a href="/jiaocheng/20120703/1310794.html" target="_blank">网站分析的苦恼连载（KPI篇）</a></li>
<li><a href="/jiaocheng/20121116/1319917.html" target="_blank">chapter 三:application architecture</a></li>
<li><a href="/jiaocheng/20121101/1348380.html" target="_blank">数组任务分解防止页面诈死</a></li>
</ul>
</div>
<div class="aged7"><script type="text/javascript">a("article_right_up2");</script></div>
<!-- 文章正文右边结束 -->
</div>
<!--主体结束-->
<script type="text/javascript">a("article_down_up");</script>
<script type="text/javascript">a("foot");</script>
<script type="text/javascript">a("article_down_up2");</script>
<!--主体结束-->
<div style="display:none"> 
<!--百度统计代码--> 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</div> 
<script type="text/javascript">a("allbt");</script>
</body>
</html>

Web前端

HTML5游戏开发-Box2dWeb使用(二)-碰撞以及各种连接