p.s. Sorry about the indentation in the code, the editor screws it up :(
index.html
<html>
<head>
<title>Box2dWeb</title>
</head>
<style type="text/css" media="screen">
canvas, img { display:block; margin:1em auto; border:1px solid black; }
canvas { background:url(image/BG2.jpg) }
</style>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400" style="background-color:#333333;" ></canvas>
</body>
<script type="text/javascript" src="libs/Box2dWeb-2.1.a.3.min.js"></script>
<script type="text/javascript" src="js/initWorld.js"></script>
<script type="text/javascript" src="js/baseclass.js"></script>
<script type="text/javascript" src="js/gameDemo.js"></script>
</html>
initWorld.js
- initializes the world
- handles events
- handles collision
- redraws world
var world;
var b2Vec2 = Box2D.Common.Math.b2Vec2
, b2BodyDef = Box2D.Dynamics.b2BodyDef
, b2Body = Box2D.Dynamics.b2Body
, b2FixtureDef = Box2D.Dynamics.b2FixtureDef
, b2World = Box2D.Dynamics.b2World
, b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
, b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
, b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef
, b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef
, b2RopeJointDef = Box2D.Dynamics.Joints.b2RopeJointDef
, b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef
, b2DebugDraw = Box2D.Dynamics.b2DebugDraw
, b2Fixture = Box2D.Dynamics.b2Fixture
, b2AABB = Box2D.Collision.b2AABB
, b2Color = Box2D.Common.b2Color;
var SCALE = 30;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function init() {
world = new b2World(new b2Vec2(0,10), true);
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite ( document.getElementById ("canvas").getContext ("2d"));
debugDraw.SetDrawScale(SCALE); //define scale
debugDraw.SetFillAlpha(0.3); //define transparency
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);
initGame();
window.setInterval(update,1000/60);
}
window.setInterval(removeObjScheduledForRemoval, 1000/90);
document.body.addEventListener("keydown", keyset, false);
var moveLeft, moveRight;
function keyset(evt){
//37: "left", 39: "right"
if(evt.keyCode == 37){
moveLeft = 1;
moveRight = 0;
}
if(evt.keyCode == 39){
moveLeft = 0;
moveRight = 1;
}
}
var bricksScheduledForRemoval = Array();
var index = -1;
function removeObjScheduledForRemoval()
{
for(var i = 0; i <= index; i++){
world.DestroyBody(bricksScheduledForRemoval[i]);
bricksScheduledForRemoval[i] = null;
}
bricksScheduledForRemoval = Array();
index = -1;
}
function update() {
world.Step(1 / 60, 10, 10);
world.ClearForces();
context.clearRect(0, 0, canvas.width, canvas.height);
world.DrawDebugData(); // comment to disable debugdraw
//detect collision
for (var c = world.GetContactList() ; c ; c = c.GetNext()){
var body1 = c.GetFixtureA().GetBody();
var body2 = c.GetFixtureB().GetBody();
if((body1.GetUserData().name == "Bat" && body2.GetUserData().name == "Ball") ||(body1.GetUserData().name == "Ball" && body2.GetUserData().name == "Bat")){
var ImpulseVec = new b2Vec2((Math.random() * 3), - (Math.random() * 5));
var point = new b2Vec2((body2.GetWorldCenter().x),(body2.GetWorldCenter().y));
body2.ApplyImpulse(ImpulseVec, point);
}
for (var i = 0; i < 3 ; i = i + 1)
{
for(var j = 0; j <= 9 ; j = j + 1)
{
if(body1.GetUserData().name == ("Brick" + j + i) && body2.GetUserData().name == "Ball") {
bricksScheduledForRemoval[++index] = body1;
}else if(body1.GetUserData().name == "Ball" && body2.GetUserData().name == ("Brick" + j + i)){
bricksScheduledForRemoval[++index] = body2;
}
}
}
}
// world redraw
for (b = world.GetBodyList() ; b; b = b.GetNext()) {
// draw the static world objects
if (b.GetType() == b2Body.b2_staticBody && b.GetUserData() != null){
updateSkin(b);
}
if (b.GetType() == b2Body.b2_dynamicBody && b.GetUserData() != null) {
if(b.GetUserData().name == "Bat"){
if(moveLeft){
moveLeft = 0;
var ImpulseVec = new b2Vec2(-30,0);
var point = new b2Vec2((b.GetWorldCenter().x ), (b.GetWorldCenter().y ));
b.ApplyImpulse(ImpulseVec, point);
}
if(moveRight){
moveLeft = 0;
var ImpulseVec = new b2Vec2(30,0);
var point = new b2Vec2((b.GetWorldCenter().x ), (b.GetWorldCenter().y ));
b.ApplyImpulse(ImpulseVec, point);
}
}
updateSkin(b);
}
}
}
baseclass.js
- Generic class for creation Box2D objects
- handles Box2D world to Canvas mapping
function createRigidBody(propList){
var fixDef = new b2FixtureDef;
fixDef.density = propList.density;
fixDef.friction = propList.friction;
fixDef.restitution = propList.restitution;
var bodyDef = new b2BodyDef;
if(propList.type == "StaticBody"){
bodyDef.type = b2Body.b2_staticBody;
}
if(propList.type == "DynamicBody"){
bodyDef.type = b2Body.b2_dynamicBody;
}
if(propList.shape == "Box"){
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(propList.width, propList.height);
}
if(propList.shape == "Sphere"){
fixDef.shape = new b2CircleShape(propList.width)
}
bodyDef.position.x = propList.x;
bodyDef.position.y = propList.y;
rbData = new Object();
rbData.name = propList.name;
rbData.width = propList.width;
rbData.height = propList.height;
rbData.skin = propList.skin;
bodyDef.userData = rbData;
var rigidbody = world.CreateBody(bodyDef).CreateFixture(fixDef);
return rigidbody;
}
function updateSkin(b)
{
var pos = b.GetPosition();
context.save();
context.translate(b.GetWorldCenter().x * SCALE,b.GetWorldCenter().y * SCALE);
context.rotate(b.GetAngle());
width = b.GetUserData().width * SCALE;
height = b.GetUserData().height * SCALE;
context.drawImage(b.GetUserData().skin, -width, -height, (width)*2, (height)*2);
context.restore();
}
gameDemo.js
- Creationg of the Game objects
function initGame(){
initBox();
initBat();
initBricks();
initBall();
}
function initGame2(){
initBox();
initPendullum();
initBasket();
}
function initBox(){
propertyList = new Object();
propertyList.density = 1.0;
propertyList.friction = 0.5;
propertyList.restitution = 0.1;
propertyList.x = 10;
propertyList.y = 14;
propertyList.width = 10;
propertyList.height = 1;
propertyList.type = "StaticBody";
propertyList.shape = "Box"
var image = new Image();
image.src = "image/border.png";
propertyList.skin = image;
propertyList.name = "Ground";
ground = createRigidBody(propertyList);
propertyList.x = 10;
propertyList.y = 0;
propertyList.width = 10;
propertyList.height = 0.3;
propertyList.name = "Roof";
roof = createRigidBody(propertyList);
propertyList.x = 0;
propertyList.y = 0;
propertyList.width = 0.4;
propertyList.height = 14;
propertyList.name = "rwall";
rwall = createRigidBody(propertyList);
propertyList.x = 20;
propertyList.y = 0;
propertyList.name = "lwall";
lwall = createRigidBody(propertyList);
}
function initBat(){
//create Basket
propertyList = new Object();
propertyList.density = 10.0;
propertyList.friction = 0.5;
propertyList.restitution = 0.2;
propertyList.x = 10;
propertyList.y = 13;
propertyList.width = 1.5;
propertyList.height = .8;
propertyList.type = "DynamicBody";
propertyList.shape = "Box"
var image = new Image();
image.src = "image/moneky.png";
propertyList.skin = image;
propertyList.name = "Bat";
bat = createRigidBody(propertyList);
}
function initBall(){
propertyList = new Object();
propertyList.density = 1.0;
propertyList.friction = 0.5;
propertyList.restitution = 0.1;
propertyList.x = 10.0;
propertyList.y = 5.0;
propertyList.width = 0.5;
propertyList.height = 0.5;
propertyList.type = "DynamicBody";
propertyList.shape = "Sphere"
var image = new Image();
image.src = "image/ball.png";
propertyList.skin = image;
propertyList.name = "Ball";
pendullumball = createRigidBody(propertyList);
}
function initBricks() {
propertyList = new Object();
propertyList.density = 10.0;
propertyList.friction = 0.5;
propertyList.restitution = 0.2;
propertyList.width = 0.7;
propertyList.height = 0.5;
propertyList.type = "StaticBody";
propertyList.shape = "Box"
var image = new Image();
image.src = "image/banana.png";
propertyList.skin = image;
var x = 1, y = 1;
for (var i = 0; i < 3 ; i = i + 1)
{
for(var j = 0; j <= 9 ; j = j + 1)
{
propertyList.x = x;
propertyList.y = y;
propertyList.name = "Brick" + j + i;
createRigidBody(propertyList);
x = x + 2;
}
y = y + 0.9;
x = 1;
}
}
Yaeeee my short term project is completed. Now on we march to bigger goals :D
The game doesn't end when the monkey drops the ball since i suck at playing it :)
Reference -
Removing bodies safely
