box2dweb - Why is this file not running the javascript that is in example5.js? -
i found code on internet. pasted notepad++ , changed these 2 files match ones created on desktop.
<script src='c:/users/home-1/desktop/box2dweb-2.1.a.3.js'></script> <script src='c:/users/home-1/desktop/example5.js'></script> i have script tag in html file have tried in code , in file , neither of them seem work.
for reason page not work. know different page , why not work.
box2dweb-2.1.a.3.js and created example5.js file , have on desktop. should show canvas along several objects can drop , drag on screen.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>mouse joint</title> <script src='c:/users/home-1/desktop/box2dweb-2.1.a.3.js'></script> <script src='c:/users/home-1/desktop/example5.js'></script> <style> canvas { background-color:black; } </style> </head> <body> <canvas id='b2dcanvas' width='1024' height='500'>broswer not support canvas tag</canvas> <script> (function() { var b2vec2 = box2d.common.math.b2vec2; var b2bodydef = box2d.dynamics.b2bodydef; var b2body = box2d.dynamics.b2body; var b2fixturedef = box2d.dynamics.b2fixturedef; var b2fixture = box2d.dynamics.b2fixture; var b2world = box2d.dynamics.b2world; var b2massdata = box2d.collision.shapes.b2massdata; var b2polygonshape = box2d.collision.shapes.b2polygonshape; var b2circleshape = box2d.collision.shapes.b2circleshape; var b2debugdraw = box2d.dynamics.b2debugdraw; var physics = window.physics = function(element,scale) { var gravity = new b2vec2(0,9.8); this.world = new b2world(gravity, true); this.element = element; this.context = element.getcontext("2d"); this.scale = scale || 20; this.dtremaining = 0; this.stepamount = 1/60; }; physics.prototype.debug = function() { this.debugdraw = new b2debugdraw(); this.debugdraw.setsprite(this.context); this.debugdraw.setdrawscale(this.scale); this.debugdraw.setfillalpha(0.3); this.debugdraw.setlinethickness(1.0); this.debugdraw.setflags(b2debugdraw.e_shapebit | b2debugdraw.e_jointbit); this.world.setdebugdraw(this.debugdraw); }; physics.prototype.step = function(dt) { this.dtremaining += dt; while(this.dtremaining > this.stepamount) { this.dtremaining -= this.stepamount; this.world.step(this.stepamount, 10, // velocity iterations 10);// position iterations } if(this.debugdraw) { this.world.drawdebugdata(); } else { var obj = this.world.getbodylist(); this.context.clearrect(0,0,this.element.width,this.element.height); this.context.save(); this.context.scale(this.scale,this.scale); while(obj) { var body = obj.getuserdata(); if(body) { body.draw(this.context); } obj = obj.getnext(); } this.context.restore(); } }; physics.prototype.click = function(callback) { var self = this; function handleclick(e) { e.preventdefault(); var point = { x: (e.offsetx || e.layerx) / self.scale, y: (e.offsety || e.layery) / self.scale }; self.world.querypoint(function(fixture) { callback(fixture.getbody(), fixture, point); },point); } this.element.addeventlistener("mousedown",handleclick); this.element.addeventlistener("touchstart",handleclick); }; physics.prototype.dragndrop = function() { var self = this; var obj = null; var joint = null; function calculateworldposition(e) { return point = { x: (e.offsetx || e.layerx) / self.scale, y: (e.offsety || e.layery) / self.scale }; } this.element.addeventlistener("mousedown",function(e) { e.preventdefault(); var point = calculateworldposition(e); self.world.querypoint(function(fixture) { obj = fixture.getbody().getuserdata(); },point); }); this.element.addeventlistener("mousemove",function(e) { if(!obj) { return; } var point = calculateworldposition(e); if(!joint) { var jointdefinition = new box2d.dynamics.joints.b2mousejointdef(); jointdefinition.bodya = self.world.getgroundbody(); jointdefinition.bodyb = obj.body; jointdefinition.target.set(point.x,point.y); jointdefinition.maxforce = 100000; jointdefinition.timestep = self.stepamount; joint = self.world.createjoint(jointdefinition); } joint.settarget(new b2vec2(point.x,point.y)); }); this.element.addeventlistener("mouseup",function(e) { obj = null; if(joint) { self.world.destroyjoint(joint); joint = null; } }); }; physics.prototype.collision = function() { this.listener = new box2d.dynamics.b2contactlistener(); this.listener.postsolve = function(contact,impulse) { var bodya = contact.getfixturea().getbody().getuserdata(), bodyb = contact.getfixtureb().getbody().getuserdata(); if(bodya.contact) { bodya.contact(contact,impulse,true) } if(bodyb.contact) { bodyb.contact(contact,impulse,false) } }; this.world.setcontactlistener(this.listener); }; var body = window.body = function(physics,details) { this.details = details = details || {}; // create definition this.definition = new b2bodydef(); // set definition for(var k in this.definitiondefaults) { this.definition[k] = details[k] || this.definitiondefaults[k]; } this.definition.position = new b2vec2(details.x || 0, details.y || 0); this.definition.linearvelocity = new b2vec2(details.vx || 0, details.vy || 0); this.definition.userdata = this; this.definition.type = details.type == "static" ? b2body.b2_staticbody : b2body.b2_dynamicbody; // create body this.body = physics.world.createbody(this.definition); // create fixture this.fixturedef = new b2fixturedef(); for(var l in this.fixturedefaults) { this.fixturedef[l] = details[l] || this.fixturedefaults[l]; } details.shape = details.shape || this.defaults.shape; switch(details.shape) { case "circle": details.radius = details.radius || this.defaults.radius; this.fixturedef.shape = new b2circleshape(details.radius); break; case "polygon": this.fixturedef.shape = new b2polygonshape(); this.fixturedef.shape.setasarray(details.points,details.points.length); break; case "block": default: details.width = details.width || this.defaults.width; details.height = details.height || this.defaults.height; this.fixturedef.shape = new b2polygonshape(); this.fixturedef.shape.setasbox(details.width/2, details.height/2); break; } this.body.createfixture(this.fixturedef); }; body.prototype.defaults = { shape: "block", width: 4, height: 4, radius: 1 }; body.prototype.fixturedefaults = { density: 2, friction: 1, restitution: 0.2 }; body.prototype.definitiondefaults = { active: true, allowsleep: true, angle: 0, angularvelocity: 0, awake: true, bullet: false, fixedrotation: false }; body.prototype.draw = function(context) { var pos = this.body.getposition(), angle = this.body.getangle(); context.save(); context.translate(pos.x,pos.y); context.rotate(angle); if(this.details.color) { context.fillstyle = this.details.color; switch(this.details.shape) { case "circle": context.beginpath(); context.arc(0,0,this.details.radius,0,math.pi*2); context.fill(); break; case "polygon": var points = this.details.points; context.beginpath(); context.moveto(points[0].x,points[0].y); for(var i=1;i<points.length;i++) { context.lineto(points[i].x,points[i].y); } context.fill(); break; case "block": context.fillrect(-this.details.width/2, -this.details.height/2, this.details.width, this.details.height); default: break; } } if(this.details.image) { context.drawimage(this.details.image, -this.details.width/2, -this.details.height/2, this.details.width, this.details.height); } context.restore(); } var physics, lastframe = new date().gettime(); window.gameloop = function() { var tm = new date().gettime(); requestanimationframe(gameloop); var dt = (tm - lastframe) / 1000; if(dt > 1/15) { dt = 1/15; } physics.step(dt); lastframe = tm; }; function init() { var img = new image(); // wait image load img.addeventlistener("load", function() { physics = window.physics = new physics(document.getelementbyid("b2dcanvas")); physics.collision(); // create walls new body(physics, { color: "red", type: "static", x: 0, y: 0, height: 50, width: 0.5 }); new body(physics, { color: "red", type: "static", x:51, y: 0, height: 50, width: 0.5}); new body(physics, { color: "red", type: "static", x: 0, y: 0, height: 0.5, width: 120 }); new body(physics, { color: "red", type: "static", x: 0, y:25, height: 0.5, width: 120 }); new body(physics, { image: img, x: 5, y: 8 }); new body(physics, { image: img, x: 13, y: 8 }); new body(physics, { color: "blue", x: 8, y: 3 }); new body(physics, { color: "gray", shape: "circle", radius: 4, x: 5, y: 20 }); new body(physics, { color: "pink", shape: "polygon", points: [ { x: 0, y: 0 }, { x: 0, y: 4 },{ x: -10, y: 0 } ], x: 20, y: 5 }); physics.dragndrop(); requestanimationframe(gameloop); }); img.src = "images/bricks.jpg"; } window.addeventlistener("load",init); }()); // lastly, add in `requestanimationframe` shim, if necessary. nothing // if `requestanimationframe` on `window` object. (function() { var lasttime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestanimationframe; ++x) { window.requestanimationframe = window[vendors[x]+'requestanimationframe']; window.cancelanimationframe = window[vendors[x]+'cancelanimationframe'] || window[vendors[x]+'cancelrequestanimationframe']; } if (!window.requestanimationframe) { window.requestanimationframe = function(callback, element) { var currtime = new date().gettime(); var timetocall = math.max(0, 16 - (currtime - lasttime)); var id = window.settimeout(function() { callback(currtime + timetocall); }, timetocall); lasttime = currtime + timetocall; return id; }; } if (!window.cancelanimationframe) { window.cancelanimationframe = function(id) { cleartimeout(id); }; } }()); </script> </body> </html> below code supposed produce on screen. wanting use 1 example have not been able work.
this how have files currently:
<script src='box2dweb-2.1.a.3.js'></script> <script src='example5.js'></script>
you need file:/// prefix both of them, e.g. file:///c:\users\home-1\desktop\example5.js; i’d use relative path, though.
assuming file on desktop too,
<script src="box2dweb-2.1.a.3.js"></script> <script src="example5.js"></script> much more portable.
Comments
Post a Comment