HTML5之2D物理引擎 Box2D for javascript Games 系列 翻外篇

太久没有更新了，新年回来工作，突然有收到网友的邮件提问，居然还有人在关注，惭愧，找了下电脑上还有一点儿存着，顺便先发这一个番外篇吧，好歹可以看到真实的效果，等我考完英语，一定会更新下一章，“愤怒的小鸟篇”

此篇，并不是书中的篇符，而是通过希望通过结合实际的canvas 绘图库实现box2d物理引擎在各绘图库上应用，绘图库网上有很多现成的

如：createjs, pixi.js 等，Egret或者其它游戏引擎有自己的物理引擎扩展库，所以就不说了。

现在通过之前的学习，基本掌握了刚体等基础概念。那如何如何应用于现实画面中呢？

box2d只是模拟了物体，是虚拟的，如果不是通过debug是看不到任何画面的，要让用户看到画面，必须得结合canvas绘图能力，自己操作canvas绘图的原始API太麻烦，所以就有了createjs等其它流行的canvas库.

以下都以createJS代替canvas，当然你用其它库或者直接操作canvas也都可以

先上效果图

完成代码位于

box2d呈现于createJS，贴上图的基本原理，就是将物理引擎世界中刚体的所有状态复制到createJS舞台对象！

这一句

通过createjs的Bitmap对象读取图片，创建一个足球

this.view这个显示对象即createjs的Bitmap对象，用于显示在舞台即canvas上

在Bitmap对象上侦听tick事件，tick事件可以理解为FLASH中的ENTER_FRAME事件，即每一帧调用一次，在每帧中将刚体的x,y位置属性与角度属性复制到createJS的显示对象上，就完成了结合

注释掉这一句，就可以隐藏掉box2Djs的调试状态变成一个正常的带物理效果的足球了

更多关于createJS请至官网或者搜索相关知识，你也完成可以用其它绘图库完成一样的操作，比如Pixi.js

相关系列：

https://github.com/willian12345