Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
253 lines (225 sloc) 8.88 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Box2DJS - Physics Engine for JavaScript</title>
<!--=============================-->
<!-- Copy this part to your app. -->
<!-- START -->
<!--=============================-->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Droid+Sans" type="text/css">
<script src="lib/prototype-1.6.0.2.js"></script>
<!-- box2djs -->
<script src='js/box2d/common/b2Settings.js'></script>
<script src='js/box2d/common/math/b2Vec2.js'></script>
<script src='js/box2d/common/math/b2Mat22.js'></script>
<script src='js/box2d/common/math/b2Math.js'></script>
<script src='js/box2d/collision/b2AABB.js'></script>
<script src='js/box2d/collision/b2Bound.js'></script>
<script src='js/box2d/collision/b2BoundValues.js'></script>
<script src='js/box2d/collision/b2Pair.js'></script>
<script src='js/box2d/collision/b2PairCallback.js'></script>
<script src='js/box2d/collision/b2BufferedPair.js'></script>
<script src='js/box2d/collision/b2PairManager.js'></script>
<script src='js/box2d/collision/b2BroadPhase.js'></script>
<script src='js/box2d/collision/b2Collision.js'></script>
<script src='js/box2d/collision/Features.js'></script>
<script src='js/box2d/collision/b2ContactID.js'></script>
<script src='js/box2d/collision/b2ContactPoint.js'></script>
<script src='js/box2d/collision/b2Distance.js'></script>
<script src='js/box2d/collision/b2Manifold.js'></script>
<script src='js/box2d/collision/b2OBB.js'></script>
<script src='js/box2d/collision/b2Proxy.js'></script>
<script src='js/box2d/collision/ClipVertex.js'></script>
<script src='js/box2d/collision/shapes/b2Shape.js'></script>
<script src='js/box2d/collision/shapes/b2ShapeDef.js'></script>
<script src='js/box2d/collision/shapes/b2BoxDef.js'></script>
<script src='js/box2d/collision/shapes/b2CircleDef.js'></script>
<script src='js/box2d/collision/shapes/b2CircleShape.js'></script>
<script src='js/box2d/collision/shapes/b2MassData.js'></script>
<script src='js/box2d/collision/shapes/b2PolyDef.js'></script>
<script src='js/box2d/collision/shapes/b2PolyShape.js'></script>
<script src='js/box2d/dynamics/b2Body.js'></script>
<script src='js/box2d/dynamics/b2BodyDef.js'></script>
<script src='js/box2d/dynamics/b2CollisionFilter.js'></script>
<script src='js/box2d/dynamics/b2Island.js'></script>
<script src='js/box2d/dynamics/b2TimeStep.js'></script>
<script src='js/box2d/dynamics/contacts/b2ContactNode.js'></script>
<script src='js/box2d/dynamics/contacts/b2Contact.js'></script>
<script src='js/box2d/dynamics/contacts/b2ContactConstraint.js'></script>
<script src='js/box2d/dynamics/contacts/b2ContactConstraintPoint.js'></script>
<script src='js/box2d/dynamics/contacts/b2ContactRegister.js'></script>
<script src='js/box2d/dynamics/contacts/b2ContactSolver.js'></script>
<script src='js/box2d/dynamics/contacts/b2CircleContact.js'></script>
<script src='js/box2d/dynamics/contacts/b2Conservative.js'></script>
<script src='js/box2d/dynamics/contacts/b2NullContact.js'></script>
<script src='js/box2d/dynamics/contacts/b2PolyAndCircleContact.js'></script>
<script src='js/box2d/dynamics/contacts/b2PolyContact.js'></script>
<script src='js/box2d/dynamics/b2ContactManager.js'></script>
<script src='js/box2d/dynamics/b2World.js'></script>
<script src='js/box2d/dynamics/b2WorldListener.js'></script>
<script src='js/box2d/dynamics/joints/b2JointNode.js'></script>
<script src='js/box2d/dynamics/joints/b2Joint.js'></script>
<script src='js/box2d/dynamics/joints/b2JointDef.js'></script>
<script src='js/box2d/dynamics/joints/b2DistanceJoint.js'></script>
<script src='js/box2d/dynamics/joints/b2DistanceJointDef.js'></script>
<script src='js/box2d/dynamics/joints/b2Jacobian.js'></script>
<script src='js/box2d/dynamics/joints/b2GearJoint.js'></script>
<script src='js/box2d/dynamics/joints/b2GearJointDef.js'></script>
<script src='js/box2d/dynamics/joints/b2MouseJoint.js'></script>
<script src='js/box2d/dynamics/joints/b2MouseJointDef.js'></script>
<script src='js/box2d/dynamics/joints/b2PrismaticJoint.js'></script>
<script src='js/box2d/dynamics/joints/b2PrismaticJointDef.js'></script>
<script src='js/box2d/dynamics/joints/b2PulleyJoint.js'></script>
<script src='js/box2d/dynamics/joints/b2PulleyJointDef.js'></script>
<script src='js/box2d/dynamics/joints/b2RevoluteJoint.js'></script>
<script src='js/box2d/dynamics/joints/b2RevoluteJointDef.js'></script>
<!--=============================-->
<!-- Copy this part to your app. -->
<!-- END -->
<!--=============================-->
<script src='js/draw_world.js'></script>
<script>
// Create world
var worldAABB = new b2AABB();
worldAABB.minVertex.Set(-1000, -1000);
worldAABB.maxVertex.Set(2000, 2000);
var gravity = new b2Vec2(0, 300);
var world = new b2World(worldAABB, gravity, true); // true is for allowSleep
var throttle = 0;
var MAX_SPEED = 300;
var rotation = 0;
var MAX_ROTATION = 0.5;
var bike;
function setupWorld() {
// Create the motorbike
var rearWheel = new b2CircleDef();
rearWheel.density = 1.0;
rearWheel.restitution = 0.2;
rearWheel.friction = 0;
rearWheel.localPosition.x = 0;
rearWheel.localPosition.y = 0;
rearWheel.radius = 20;
var frontWheel = new b2CircleDef();
frontWheel.density = 1.0;
frontWheel.restitution = 0.2;
frontWheel.friction = 0;
frontWheel.localPosition.x = 80;
frontWheel.localPosition.y = -10;
frontWheel.radius = 30;
var frame = new b2BoxDef()
frame.density = 1.0;
frame.restitution = 1.0;
frame.friction = 0;
frame.extents.x = 55;
frame.extents.y = 8;
frame.localRotation = -0.1 * Math.PI;
frame.localPosition.x = 40;
frame.localPosition.y = -30;
var bikeBd = new b2BodyDef();
bikeBd.AddShape(frontWheel);
bikeBd.AddShape(rearWheel);
bikeBd.AddShape(frame);
bikeBd.position.Set(50, 300);
bike = world.CreateBody(bikeBd);
var groundSd = new b2BoxDef();
groundSd.extents.Set(100, 10);
groundSd.restitution = 0.5;
groundSd.localRotation = -0.15 * Math.PI;
var groundBd = new b2BodyDef();
groundBd.AddShape(groundSd);
groundBd.position.Set(290, 485);
world.CreateBody(groundBd);
var groundSd1 = new b2BoxDef();
groundSd1.extents.Set(100, 10);
groundSd1.restitution = 0.5;
groundSd1.localRotation = 0.1 * Math.PI;
var groundBd1 = new b2BodyDef();
groundBd1.AddShape(groundSd1);
groundBd1.position.Set(100, 500);
world.CreateBody(groundBd1);
var groundSd2 = new b2BoxDef();
groundSd2.extents.Set(100, 10);
groundSd2.restitution = 0.5;
var groundBd2 = new b2BodyDef();
groundBd2.AddShape(groundSd2);
groundBd2.position.Set(800, 550);
world.CreateBody(groundBd2);
}
// Repeat
var ctx;
var canvasWidth;
var canvasHeight;
function step(cnt) {
world.Step(1.0/60, 1);
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// Update the bike velocity
var vel = bike.GetLinearVelocity();
vel.x += throttle;
if (vel.x > MAX_SPEED) { vel.x = MAX_SPEED; }
if (vel.x < -MAX_SPEED) {vel.x = -MAX_SPEED; }
bike.SetLinearVelocity(vel);
// Update the bike rotation
var rot = bike.GetAngularVelocity();
rot += rotation;
//if (rot > MAX_ROTATION) { vel.x = MAX_SPEED; }
//if (rot < -MAX_SPEED) {vel.x = -MAX_SPEED; }
bike.SetAngularVelocity(rot);
drawWorld(world, ctx);
setTimeout('step(' + (cnt || 0) + ')', 10);
}
Event.observe(window, 'load', function() {
setupWorld(world);
ctx = $('canvas').getContext('2d');
var canvasElm = $('canvas');
canvasWidth = parseInt(canvasElm.width);
canvasHeight = parseInt(canvasElm.height);
step();
});
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
Event.observe(window, 'keydown', function(event) {
switch(event.keyCode) {
case KEY_RIGHT:
throttle = 10;
break;
case KEY_LEFT:
throttle = -10;
break;
case KEY_UP:
rotation = 0.1;
break;
case KEY_DOWN:
rotation = -0.1;
break;
}
});
Event.observe(window, 'keyup', function(event) {
switch(event.keyCode) {
case KEY_RIGHT:
case KEY_LEFT:
throttle = 0;
break;
case KEY_UP:
case KEY_DOWN:
rotation = 0;
break;
}
});
</script>
<link href="style/box2d.css" rel="stylesheet" type="text/css" />
</head>
<body>
<hgroup>
<h1>Schlomoff-Dybskiy Motocross</h1>
<h2> by Gregory Schlomoff and Yuriy Dybskiy</h2>
</hgroup>
<canvas id="canvas" width='1000' height='600'></canvas>
<footer>
<h3>Buy new tires</h3>
<img src="img/googlecheckout.png" />
</footer>
</body>
</html>