A Ball-shooting Machine with Physics Engine - HTML5 Game Development - page 250

Preparing the vendor files
We also need a vendors folder that holds the third-party libraries. This includes the
CreateJS suite—EaselJS, MovieClip, TweenJS, PreloadJS—and Box2D.
Box2D is the physics engine that we are going to use in this project. We need to download
the engine code from https://code.google.com/p/box2dweb/ . It is a port version
from AcionScript to JavaScript.
We need the Box2dWeb-2.1.a.3.min.js file or its nonminified version for debugging.
We put this file in the vendors folder.
Box2D is an open source physics-simulaion engine that was created by Erin Cato. It was
originally writen in C++. Later, it was ported to AcionScript because of the popularity of
Flash games, and then it was ported to JavaScript. There are different versions of ports.
The one we are using is called Box2DWeb , which was ported from AcionScript's version
Box2D 2.1. Using an old version may cause issues. Also, it will be difficult to find help
online because most developers have switched to 2.1.
Creating a simulated physics world
Our first task is to create a simulated physics world and put two objects inside it.
Prepare for lift off
In the index.html file, the core part is the game secion. We have two canvas elements
in this game. The debug-canvas element is for the Box2D engine and canvas is for the
CreateJS library:
<section id="game" class="row">
<canvas id="debug-canvas" width="480" height="360"></canvas>
<canvas id="canvas" width="480" height="360"></canvas>
</section>
We prepare a dedicated file for all the physics-related logic. We prepare the physics.js
file with the following code:
;(function(game, cjs, b2d){
// code here later
}).call(this, game, createjs, Box2D);