├── 1.html ├── 2.html ├── 5-c.html ├── 5.html ├── README.md ├── article ├── ch03 │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── ch03-1.html │ ├── ch03-2.html │ ├── ch03-3.html │ └── ch03.md ├── ch04 │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.html │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ ├── 9.png │ ├── ch04-1.html │ ├── ch04-2.html │ ├── ch04-3.html │ ├── ch04-4.html │ ├── ch04-5.html │ ├── ch04-6.html │ ├── ch04-7.html │ ├── ch04-8.html │ ├── ch04-9.html │ └── ch04.md ├── ch05 │ ├── 1.png │ ├── 2.png │ ├── ch05-1.html │ ├── ch05-2.html │ ├── ch05-3.html │ ├── ch05-4.html │ └── ch05.md ├── ch06 │ ├── 1.png │ ├── 10.png │ ├── 11.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ ├── 9.png │ ├── ch06-1.html │ ├── ch06-10.html │ ├── ch06-2.html │ ├── ch06-3.html │ ├── ch06-4.html │ ├── ch06-5.html │ ├── ch06-6.html │ ├── ch06-7.html │ ├── ch06-8.html │ ├── ch06-9.html │ └── ch06.md └── ch07 │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── ch07-1.html │ ├── ch07-2.html │ ├── ch07-3.html │ └── ch07.md ├── demo1-1.html ├── demo1-2.html ├── demo2-1.html ├── demo2-2.html ├── demo2-3.html ├── demo2-4.html ├── demo2-5.html ├── demo2-6.html ├── demo2-7.html ├── extra.html ├── extra.md ├── img ├── cover.png └── soccer.png └── js ├── Box2D.js ├── Box2D.min.js ├── createjs-2015.11.26.min.js └── jquery.min2.0.3.js /1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Box2D for javascript Games 4 | 5 | 6 | 7 | 8 | 9 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Box2dJS 4 | 5 | 6 | 7 | 8 | 9 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /5-c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Box2dJS 4 | 18 | 19 | 20 |
21 | 22 | 23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Box2dJS 4 | 15 | 16 | 17 |
18 | 19 |
20 |
21 |
22 | 23 | 24 | 25 | 26 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | > 2023 年 12 月更新 3 | 4 | # Box2D for Javascript Games 改写完成 5 | 6 | 原本的书是 Box2D for Flash Games 版本用的是 AS3.0 脚本并且运行环境是 Flash 7 | 8 | 为了能在 HTML5上 运行必须改成 Javascript 版本的 Box2D JS 版引擎 9 | 10 | 不定时更新直到所有章节改写完成... 11 | 12 | ![image](https://github.com/willian12345/Box2D-for-Javascript-Games/blob/master/img/cover.png?raw=true) 13 | 14 | 15 | 文章在博客园更新合集 16 | 17 | https://www.cnblogs.com/willian/p/5477922.html 18 | 19 | ## 目录 20 | 21 | 第一章 Hello Box2D World 22 | - 定义Box2D世界 23 | - 运行模拟 24 | - 小结 25 | 26 | 第二章 向世界添加刚体 27 | - 你的第一个模拟----一个球落地 28 | - 创建一个圆形形形状 29 | - 创建夹具 30 | - 使用调试绘制测试你的模拟 31 | - 创建矩形形状 32 | - 不同的刚体类型----static, dynamic 和 kinematic 33 | - 密度，摩擦和恢复 34 | - 创建图腾破坏者的关卡 35 | - 创建复合刚体 36 | - 创建定向矩形 37 | - 创建各种类型的凸多边形 38 | - 小结 39 | 40 | 第三章 刚体的交互 41 | 42 | - 通过鼠标点击选择并销毁刚体 43 | - 将自定义属性指定到刚体上 44 | - 遍历刚体并获取它的属性 45 | - 小结 46 | 47 | 番外篇 - 为游戏添加皮肤 48 | 49 | > 此章为非原书内容，是为了后续章节需要新增的一章 50 | > 注意由于 Javascript 版改写需要，原书第七章去掉，改为提前至番外篇，番外篇讲的其实是类似“为游戏添加皮肤” 的内容 51 | > 原第七章删除后，第七章内容实际为原书第八章 52 | 53 | 54 | 第四章 将力作用到刚体上 55 | 56 | - 苹果掉落，修正 57 | - 力，冲量和线速率 58 | - 应用冲量来得到线速度 59 | - 应用力来获得线速度 60 | - 将力应用到真实的游戏中 61 | - 物理游戏不只是关于物理 62 | - 放置物理小鸟 63 | - 发射物理小鸟 64 | - 小结 65 | 66 | 第五章 碰撞处理 67 | 68 | - 碰撞检查 69 | - Box2D内建的碰撞监听 70 | - 将碰撞开始和结束输出到输出窗口 71 | - 检测当你要解决碰撞和当你解决了碰撞 72 | - 在图腾破坏者中检测神像坠落地面 73 | - 在愤怒的小鸟中销毁砖块并消灭小猪 74 | - 小结 75 | 76 | 第六章 关节和马达 77 | 78 | - 拾取并拖拽刚体—鼠标关节 79 | - 让刚体之间保持给定的距离—距离关节 80 | - 使刚体绕一个点旋转—旋转关节 81 | - 当愤怒的小鸟遇见粉碎城堡 82 | - 通过马达控制关节 83 | - 通过键盘控制马达 84 | - 让一些刚体不要发生碰撞—碰撞过滤 85 | - 将它们放在一起 86 | - 小结 87 | 88 | 89 | 第七章 子弹和传感器 90 | 91 | - 感受隧道效应 92 | - 阻止隧道效应—设置刚体为子弹 93 | - 通过传感器检测接触，可以允许刚体重叠 94 | 95 | 96 | -------------------------------------------------------------------------------- /article/ch03/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch03/1.png -------------------------------------------------------------------------------- /article/ch03/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch03/2.png -------------------------------------------------------------------------------- /article/ch03/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch03/3.png -------------------------------------------------------------------------------- /article/ch03/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch03/4.png -------------------------------------------------------------------------------- /article/ch03/ch03-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第三章 刚体的交互 -- Box2d For Javascript Games 5 | 6 | 7 | 8 | 9 | 10 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /article/ch03/ch03-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第三章 刚体的交互 -- Box2d For Javascript Games 5 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |
30 | 31 | 32 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /article/ch03/ch03-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第三章 刚体的交互 -- Box2d For Javascript Games 5 | 17 | 18 | 19 |
20 | 21 |
22 |
23 |
24 | 25 | 26 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /article/ch04/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch04/1.png -------------------------------------------------------------------------------- /article/ch04/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch04/2.png -------------------------------------------------------------------------------- /article/ch04/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch04/3.png -------------------------------------------------------------------------------- /article/ch04/4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Box2dJS 4 | 15 | 16 | 17 |
18 | 19 |
20 |
21 |
22 | 23 | 24 | 25 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /article/ch04/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch04/4.png -------------------------------------------------------------------------------- /article/ch04/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch04/5.png -------------------------------------------------------------------------------- /article/ch04/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch04/6.png -------------------------------------------------------------------------------- /article/ch04/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch04/7.png -------------------------------------------------------------------------------- /article/ch04/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch04/8.png -------------------------------------------------------------------------------- /article/ch04/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch04/9.png -------------------------------------------------------------------------------- /article/ch04/ch04-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第四章 将力作用到刚体上 -- Box2d For Javascript Games 5 | 8 | 9 | 10 | 11 | 12 | 13 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /article/ch04/ch04-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第四章 将力作用到刚体上 -- Box2d For Javascript Games 5 | 8 | 9 | 10 | 11 | 12 | 13 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /article/ch04/ch04-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 第四章 将力作用到刚体上 -- Box2d For Javascript Games 7 | 10 | 11 | 12 | 13 | 14 | 15 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /article/ch04/ch04-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第四章 将力作用到刚体上 -- Box2d For Javascript Games 5 | 8 | 9 | 10 | 11 | 12 | 13 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /article/ch04/ch04-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第四章 将力作用到刚体上 -- Box2d For Javascript Games 5 | 8 | 9 | 10 | 11 | 12 | 13 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /article/ch04/ch04-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第四章 将力作用到刚体上 -- Box2d For Javascript Games 5 | 8 | 9 | 10 | 11 | 12 | 13 | 128 | -------------------------------------------------------------------------------- /article/ch04/ch04-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第四章 将力作用到刚体上 -- Box2d For Javascript Games 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 178 | -------------------------------------------------------------------------------- /article/ch04/ch04-8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第四章 将力作用到刚体上 -- Box2d For Javascript Games 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 191 | -------------------------------------------------------------------------------- /article/ch04/ch04-9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第四章 将力作用到刚体上 -- Box2d For Javascript Games 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 198 | -------------------------------------------------------------------------------- /article/ch05/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch05/1.png -------------------------------------------------------------------------------- /article/ch05/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch05/2.png -------------------------------------------------------------------------------- /article/ch05/ch05-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第五章 碰撞处理 -- Box2d For Javascript Games 5 | 11 | 12 | 13 | 14 | 15 | 16 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /article/ch05/ch05-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第五章 碰撞处理 -- Box2d For Javascript Games 5 | 11 | 12 | 13 | 14 | 15 | 16 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /article/ch06/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch06/1.png -------------------------------------------------------------------------------- /article/ch06/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch06/10.png -------------------------------------------------------------------------------- /article/ch06/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch06/11.png -------------------------------------------------------------------------------- /article/ch06/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch06/2.png -------------------------------------------------------------------------------- /article/ch06/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch06/3.png -------------------------------------------------------------------------------- /article/ch06/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch06/4.png -------------------------------------------------------------------------------- /article/ch06/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch06/5.png -------------------------------------------------------------------------------- /article/ch06/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch06/6.png -------------------------------------------------------------------------------- /article/ch06/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch06/7.png -------------------------------------------------------------------------------- /article/ch06/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch06/8.png -------------------------------------------------------------------------------- /article/ch06/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch06/9.png -------------------------------------------------------------------------------- /article/ch06/ch06-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 第六章 关节和马达 -- Box2d For Javascript Games 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /article/ch06/ch06-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 第六章 关节和马达 -- Box2d For Javascript Games 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /article/ch06/ch06-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第六章 关节和马达 -- Box2d For Javascript Games 5 | 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /article/ch06/ch06-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 第六章 关节和马达 -- Box2d For Javascript Games 5 | 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /article/ch06/ch06-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 第六章 关节和马达 -- Box2d For Javascript Games 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /article/ch06/ch06-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 第六章 关节和马达 -- Box2d For Javascript Games 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 180 | 181 | 182 | -------------------------------------------------------------------------------- /article/ch06/ch06-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 第六章 关节和马达 -- Box2d For Javascript Games 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /article/ch06/ch06-8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 第六章 关节和马达 -- Box2d For Javascript Games 6 | 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 239 | 240 | 241 | -------------------------------------------------------------------------------- /article/ch07/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch07/1.png -------------------------------------------------------------------------------- /article/ch07/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch07/2.png -------------------------------------------------------------------------------- /article/ch07/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/article/ch07/3.png -------------------------------------------------------------------------------- /article/ch07/ch07-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 第七章 子弹和感应器 -- Box2d For Javascript Games 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /article/ch07/ch07-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 第七章 子弹和感应器 -- Box2d For Javascript Games 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /article/ch07/ch07-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 第七章 子弹和感应器 -- Box2d For Javascript Games 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /demo1-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Demo1-1 Box2dJS 4 | 5 | 6 | 7 | 44 | 45 | -------------------------------------------------------------------------------- /demo1-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Demo Box2dJS 4 | 5 | 6 | 7 | 8 | 9 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /demo2-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Demo1-1 Box2dJS 4 | 5 | 6 | 7 | 8 | 60 | 61 | -------------------------------------------------------------------------------- /demo2-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Demo1-1 Box2dJS 4 | 5 | 6 | 7 | 8 | 70 | 71 | -------------------------------------------------------------------------------- /demo2-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Demo1-1 Box2dJS 4 | 5 | 6 | 7 | 8 | 71 | 72 | -------------------------------------------------------------------------------- /demo2-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Box2dJS 4 | 5 | 6 | 7 | 8 | 9 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /demo2-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Box2dJS 4 | 5 | 6 | 7 | 8 | 9 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /demo2-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Box2dJS 4 | 5 | 6 | 7 | 8 | 9 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /demo2-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Box2dJS 4 | 5 | 6 | 7 | 8 | 9 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /extra.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Box2dJS 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /extra.md: -------------------------------------------------------------------------------- 1 | 2D物理引擎 Box2D for javascript Games -- 番外篇 2 | 3 | 此篇，并不是书中的篇符，而是通过希望通过结合实际的 canvas 绘图库实现 box2d 物理引擎在各绘图库上应用，绘图库网上有很多现成的 4 | 5 | 如：createjs, pixi.js 等，Egret或者其它游戏引擎有自己的物理引擎扩展库，所以就不说了。 6 | 7 | 现在通过之前的学习，基本掌握了刚体等基础概念。 8 | 9 | 那如何应用于现实画面中呢？ 10 | 11 | Box2d 只是模拟了物体，是虚拟的，如果不是通过 debug 是看不到任何画面的，要让用户看到画面，必须得结合 canvas 绘图能力 12 | 13 | 自己直接操作 canvas 绘图的原始 API 太麻烦，所以就有了 createjs、pixi.js、fabric.js 等其它流行的 canvas 库. 14 | 15 | 以下都以 createJS 代替 canvas，当然你用其它库或者直接操作 canvas 也都可以 16 | 17 | 18 | 19 | 先上效果图 20 | 21 | ![image](https://img2018.cnblogs.com/blog/405426/201902/405426-20190217151129471-1564337733.png) 22 | 23 | 24 | 完整代码位于 25 | 26 | https://github.com/willian12345/Box2D-for-Javascript-Games/blob/master/extra.html 27 | 28 | 29 | 30 | Box2d 呈现于 createJS，贴上图的基本原理，就是将物理引擎世界中刚体的所有状态复制到 createJS 舞台对象！ 31 | 32 | 33 | ``` 34 | function init() { 35 | var b2Vec2 = Box2D.Common.Math.b2Vec2 36 | , b2AABB = Box2D.Collision.b2AABB 37 | , b2BodyDef = Box2D.Dynamics.b2BodyDef 38 | , b2Body = Box2D.Dynamics.b2Body 39 | , b2FixtureDef = Box2D.Dynamics.b2FixtureDef 40 | , b2Fixture = Box2D.Dynamics.b2Fixture 41 | , b2World = Box2D.Dynamics.b2World 42 | , b2MassData = Box2D.Collision.Shapes.b2MassData 43 | , b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape 44 | , b2CircleShape = Box2D.Collision.Shapes.b2CircleShape 45 | , b2DebugDraw = Box2D.Dynamics.b2DebugDraw 46 | , b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef 47 | ; 48 | var worldScale = 30; // box2d中以米为单位，1米=30像素 49 | var gravity = new b2Vec2(0, 5); 50 | var sleep = true; 51 | var world; 52 | var stage,debug; 53 | 54 | 55 | function main(){ 56 | stage = new createjs.Stage("canvas"); 57 | debug = new createjs.Stage("debug"); 58 | 59 | setupPhysics(); 60 | 61 | debugDraw(); 62 | 63 | debug.on("stagemousedown", stagemousedown); 64 | 65 | createjs.Ticker.timingMode = createjs.Ticker.RAF; 66 | createjs.Ticker.on("tick", function(){ 67 | stage.update(); 68 | world.DrawDebugData(); // 为了显示出createjs对象，这里不再绘制box2d对象至canvas 69 | world.Step(1/30, 10, 10);// 更新世界模拟 70 | world.ClearForces(); // 清除作用力 71 | }); 72 | } 73 | main(); 74 | 75 | 76 | function Ball(){ 77 | this.view = new createjs.Bitmap('soccer.png'); 78 | this.view.regX = this.view.regY = 50; 79 | 80 | // 创建box2d球形体 81 | var bodyDef = new b2BodyDef(); 82 | bodyDef.position.Set(Math.random()*640 / worldScale, 0/worldScale); 83 | bodyDef.type = b2Body.b2_dynamicBody 84 | bodyDef.userData = 0; 85 | var circleShape = new b2CircleShape(50 / worldScale); 86 | var fixtureDef = new b2FixtureDef(); 87 | fixtureDef.shape = circleShape; 88 | fixtureDef.density = 1; 89 | fixtureDef.restitution = .4 90 | fixtureDef.friction = .5; 91 | this.view.body = world.CreateBody(bodyDef); 92 | this.view.body.CreateFixture(fixtureDef); 93 | 94 | this.view.on("tick", function(){ 95 | // 让createjs的bitmap对象实时复制box2d对象的位置与旋转角度 96 | this.x = this.body.GetPosition().x * worldScale; 97 | this.y = this.body.GetPosition().y * worldScale; 98 | this.rotation = this.body.GetAngle() * (180 / Math.PI); 99 | }); 100 | } 101 | 102 | function setupPhysics(){ 103 | world = new b2World(new b2Vec2(0, 50), true); 104 | floor(); 105 | } 106 | 107 | function stagemousedown(){ 108 | var b = new Ball(); 109 | stage.addChild(b.view); // 将产生的createjs对象添加至舞台上 110 | } 111 | 112 | function floor(){ 113 | var bodyDef = new b2BodyDef(); 114 | bodyDef.position.Set(320/worldScale, 465/worldScale); 115 | var polygonShape = new b2PolygonShape(); 116 | polygonShape.SetAsBox(320/worldScale, 15/worldScale); 117 | var fixtureDef = new b2FixtureDef(); 118 | fixtureDef.shape = polygonShape; 119 | fixtureDef.restitution = .4; 120 | fixtureDef.friction = .5; 121 | var theFloor = world.CreateBody(bodyDef); 122 | theFloor.CreateFixture(fixtureDef); 123 | } 124 | 125 | //setup debug draw 126 | function debugDraw(){ 127 | var debugDraw = new b2DebugDraw(); 128 | debugDraw.SetSprite(debug.canvas.getContext('2d')); 129 | debugDraw.SetDrawScale(worldScale); 130 | debugDraw.SetFillAlpha(0.5); 131 | debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit); 132 | world.SetDebugDraw(debugDraw); 133 | } 134 | }; 135 | ``` 136 | 137 | 注意：**分别使用两个 canvas** 138 | 139 | 一个用于渲染的 dom id 为 "canvas" 对象 140 | 141 | ``` 142 | new createjs.Stage("canvas"); 143 | ``` 144 | 145 | 另一个用于 Box2d debug 渲染 dom id 为 "debug" 146 | 147 | ``` 148 | debug = new createjs.Stage("debug"); 149 | ``` 150 | 151 | 这一句引入一张图片 152 | 153 | ``` 154 | this.view = new createjs.Bitmap('soccer.png'); 155 | ``` 156 | 157 | 通过 createjs 的 Bitmap 对象读取图片，创建一个足球 158 | 159 | this.view 这个显示对象即 createjs 的 Bitmap 对象，用于显示在舞台即 canvas 上 160 | 161 | ``` 162 | this.view.on("tick", function(){ 163 | // 让createjs的bitmap对象实时复制box2d对象的位置与旋转角度 164 | this.x = this.body.GetPosition().x * worldScale; 165 | this.y = this.body.GetPosition().y * worldScale; 166 | this.rotation = this.body.GetAngle() * (180 / Math.PI); 167 | }); 168 | ``` 169 | 170 | 在 Bitmap 对象上侦听 tick 事件，tick 事件回调，每一帧调用一次 171 | 172 | 在每帧中将刚体的 x,y 位置属性与角度属性复制到 createJS 的显示对象上，就完成了结合 173 | 174 | 175 | 注释掉这一句，就可以隐藏掉 Box2Djs 的调试状态变成一个正常的带物理效果的足球了 176 | 177 | // debugDraw(); 178 | 179 | 180 | 181 | 更多关于createJS请至官网或者搜索相关知识，你也完成可以用其它绘图库完成一样的操作 182 | 183 | 相关系列： 184 | 185 | HTML5 之 2D物理引擎 Box2D for javascript Games 系列 第一章 186 | 187 | 188 | 189 | ---- 190 | 注：转载请注明出处博客园：王二狗 Sheldon 池中物 (willian12345@126.com) 191 | 192 | https://github.com/willian12345 -------------------------------------------------------------------------------- /img/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/img/cover.png -------------------------------------------------------------------------------- /img/soccer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/willian12345/Box2D-for-Javascript-Games/1e947a060e74bb86042c3f18ebb3b6817f31982d/img/soccer.png --------------------------------------------------------------------------------