Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge branch 'master' of github.com:gregschlom/Html5MotorCross

  • Loading branch information...
commit 57efc6d9264ce2610460e423fc745d0e01b4f472 2 parents aa76d9b + 2bed0a0
@gregschlom authored
Showing with 174 additions and 265 deletions.
  1. +168 −14 index.html
  2. +0 −249 index2.html
  3. +6 −2 style/box2d.css
View
182 index.html
@@ -1,13 +1,14 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Box2DJS - Physics Engine for JavaScript</title>
+ <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 -->
@@ -80,19 +81,172 @@
<!-- END -->
<!--=============================-->
- <!-- demos -->
- <script src='demos/draw_world.js'></script>
- <script src='demos/demo_base.js'></script>
- <script src='demos/top.js'></script>
- <script src='demos/stack.js'></script>
- <script src='demos/compound.js'></script>
- <script src='demos/pendulum.js'></script>
- <script src='demos/crank.js'></script>
- <script src='demos/demos.js'></script>
+
+ <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>
- <canvas id="canvas" width='500' height='300' style="top:0px; left:0px;"></canvas>
+ <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>
View
249 index2.html
@@ -1,249 +0,0 @@
-<!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>
- <h1>HTML5 Canvas Motocross</h1><h2> by Gregory Schlomoff and Yuriy Dybskiy</h2>
- <canvas id="canvas" width='1000' height='600'></canvas>
- <div id="footer">
- <h3>Buy new tires</h3>
- <img src="img/googlecheckout.png" />
- </div>
-</body>
-</html>
View
8 style/box2d.css
@@ -1,6 +1,7 @@
body {
font-family: 'Droid Sans',arial,serif;
background-color:#999;
+ text-shadow:0px 1px 1px #fff;
}
#canvas {
@@ -12,7 +13,7 @@ body {
background: url('bg.jpg') no-repeat;
}
-#footer {
+footer {
position: absolute;
left: 980px;
top: 20px;
@@ -24,9 +25,12 @@ h1, h2 {
float:left;
padding-bottom:0;
font-weight: 500;
- text-shadow:0px 1px 1px #fff;
}
h2 {
padding:7px 0px 0px 10px;
+}
+img {
+ border-radius: 5px;
+ box-shadow: 1px 2px 3px #333;
}
Please sign in to comment.
Something went wrong with that request. Please try again.