box2dweb free ball on the curve

licart

2018-03-29 21:49:13

License: MIT License

Fork: 1

Fav: 0

View: 246

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 239 lines
CSS 0 lines

FULLSCREEN WILL BE BETTER
THE POINTS ON THE CURVES CAN BE MOVED

box2dweb free ball on the curve

<html><head>
    <meta charset="utf-8"/> <style type="text/css">  #canvas{position:absolute} #canvas3{position:absolute}
#world{position:absolute}</style>
        <script type="text/javascript" src="http://jsrun.it/assets/Y/t/C/l/YtClR"></script>
</head><body>
<video id="awesome" style="display:none"  src="http://jsrun.it/assets/w/F/d/9/wFd9C" width=250 autoplay loop></video>
		<canvas id="world" ></canvas>
        <canvas id="canvas3" ></canvas>
        <canvas id="canvas" ></canvas>

//scale= window.innerWidth/50;
        b = {};	 bb = {};					
	var COEUR = [[300,330],[250,300],[230,350],[270,400],[295,440],[300,470],[305,440],[330,400],[370,350],[350,300],[300,330]]
  var ptsB3 = [[300,330],[250,300],[230,350],[270,400],[295,440],[300,470],[305,440],[330,400],[370,350],[350,300],[300,330]]

var  POINTS22= [[4.4,11.33],[ 3.83,10.4],[ 4.36,5.97],[ 0.67,6.43],[ 0.7,4.43],[ 5.57,2.87],[ 10.03,4.33],[ 10.4,6.83],[ 6.83,6.37],[ 6.8,10.87],[ 5.06,11.5 ]];
	var  ptsB2=  [[4.4,11.33],[ 3.83,10.4],[ 4.36,5.97],[ 0.67,6.43],[ 0.7,4.43],[ 5.57,2.87],[ 10.03,4.33],[ 10.4,6.83],[ 6.83,6.37],[ 6.8,10.87],[ 5.06,11.5 ]];
var POINTS2 = [[16.67,13.33], [16.67,9.33], [18.33,9.67], [20,10.33], [21.67,9.67], [23.33,10], [25,10.67], [25,13.33]];          
   var  ptsB= [[16.67,13.33], [16.67,9.33], [18.33,9.67], [20,10.33], [21.67,9.67], [23.33,10], [25,10.67], [25,13.33]];

var trip, trop;
	function draw2(){ctx3.clearRect(0, 0, width, height);ctx3.drawImage(vid, ptsB[0][0]*scale+0.67*scale, ptsB[2][1]*scale+1.33*scale,6.6*scale,2.67*scale);}
		setTimeout(function(){trip=setInterval(draw2, 200)}, 5500)
		 setTimeout(function(){clearInterval(trip); ctx3.clearRect(0, 0, width, height);}, 14500);
redraw(ctx);
		
	var lx, ly, dist;
	canvas.onmousedown = function(e) {var p = getPos(e);  cpIndex = -1;isDown = false; pIndex3 = -1; pIndex2 = -1;
		for (var i = 1; i < POINTS2.length-1; i++) { dist = Math.sqrt((POINTS2[i][1]-p[1])*(POINTS2[i][1]-p[1]) +  (POINTS2[i][0]-p[0])*(POINTS2[i][0]-p[0]));
 	if (dist < 0.83) {eraseline(); isDown = true; cpIndex = i;  lx = p[0]-POINTS2[i][0]  ; ly = p[1]-POINTS2[i][1];
	eraseline();if(pause){pause=false; run=true;animate()};	}; }
		for (var j = 1; j <  POINTS22.length-1; j++) { dist = Math.sqrt((POINTS22[j][1]-p[1])*(POINTS22[j][1]-p[1]) +  (POINTS22[j][0]-p[0])*(POINTS22[j][0]-p[0]));
	if (dist < 0.83){   isDown2 = true; pIndex2 = j; lx = p[0]-POINTS22[j][0]  ; ly = p[1]-POINTS22[j][1];	}	};  }	
	
	window.onmousemove = function(e) {
	if (isDown) {eraseline();var p = getPos(e); POINTS2[cpIndex][0]=p[0]-lx; POINTS2[cpIndex][1] = p[1]-ly;eraseline(); 
		for(var i = 1; i < POINTS2.length-1; i++) { 
		if(POINTS2[i][0]>ptsB[i][0]+0.83){POINTS2[i][0]=ptsB[i][0]+0.83}; if(POINTS2[i][0]<ptsB[i][0]-0.83){POINTS2[i][0]=ptsB[i][0]-0.83};
		if(POINTS2[i][1]>ptsB[i][1]+0.83){POINTS2[i][1]=ptsB[i][1]+0.83}; if(POINTS2[i][1]<ptsB[i][1]-0.83){POINTS2[i][1]=ptsB[i][1]-0.83};	
		}	 eraseline(); redraw(ctx);eraseline();}
	if (isDown2) { var p = getPos(e); POINTS22[pIndex2][0] = p[0]-lx; POINTS22[pIndex2][1] = p[1]-ly;
		for (var j = 1; j <  POINTS22.length-1; j++) {
		if(POINTS22[j][0]>ptsB2[j][0]+0.83/scale){POINTS22[j][0]=ptsB2[j][0]+0.83}; if(POINTS22[j][0]<ptsB2[j][0]-0.83){POINTS22[j][0]=ptsB2[j][0]-0.83};
		if(POINTS22[j][1]>ptsB2[j][1]+0.83/scale){POINTS22[j][1]=ptsB2[j][1]+0.83}; if(POINTS22[j][1]<ptsB2[j][1]-0.83){POINTS22[j][1]=ptsB2[j][1]-0.83};	
		} eraseline(); redraw(ctx);};   }; 
		
	window.onmouseup = function() {  cpIndex=-1; isDown2=false;isDown3=false; isDown4=false;isDown = false;pIndex4=-1;pIndex3=-1; pIndex2=-1; };

function getPos(e) { var r=canvas.getBoundingClientRect(); return [x= (e.clientX-r.left)/scale, y= (e.clientY-r.top)/scale] }
function eraseline() { var bodies = world.GetBodyList(); if(bodies.GetUserData() == "line"){world.DestroyBody(bodies)}}

var trap, trup;
		function animate(){if(run && !pause) { trap = window.setTimeout(animate, 40 ); tick();}}
		function pause(){run = !run;if(run){animate()}};		
		window['onload'] = function doOnload() {animate(); }

</script>
</body></html>

box2dweb free ball on the curve

FULLSCREEN WILL BE BETTER THE POINTS ON THE CURVES CAN BE MOVED<html><head> <meta charset="utf-8"/> <style type="text/css"> #canvas{position:absolute} #canvas3{position:absolute} #world{position:absolute}</style> <script type="text/javascript" src="http://jsrun.it/assets/Y/t/C/l/YtClR"></script> </head><body> <video id="awesome" style="display:none" src="http://jsrun.it/assets/w/F/d/9/wFd9C" width=250 autoplay loop></video> <canvas id="world" ></canvas> <canvas id="canvas3" ></canvas> <canvas id="canvas" ></canvas> <script> var b2Vec2=Box2D.Common.Math.b2Vec2,b2AABB=Box2D.Collision.b2AABB,b2BodyDef=Box2D.Dynamics.b2BodyDef,b2Body=Box2D.Dynamics.b2Body,b2FixtureDef=Box2D.Dynamics.b2FixtureDef,b2Fixture=Box2D.Dynamics.b2Fixture,b2World=Box2D.Dynamics.b2World,b2MassData=Box2D.Collision.Shapes.b2MassData, b2PolygonShape=Box2D.Collision.Shapes.b2PolygonShape,b2CircleShape=Box2D.Collision.Shapes.b2CircleShape,b2Shape=Box2D.Collision.Shapes.b2Shape,b2Settings=Box2D.Common.b2Settings,b2DebugDraw=Box2D.Dynamics.b2DebugDraw, b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef,b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef ; var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var canvas3 = document.getElementById('canvas3'), ctx3 = canvas3.getContext('2d'); var canvas2 = document.getElementById('world'), ctx2 = canvas2.getContext('2d'); var width = canvas.width= canvas2.width = canvas3.width =window.innerWidth, height = canvas.height = canvas2.height =canvas3.height = window.innerHeight; world = new b2World(new b2Vec2(0, 9.8), true); var scale = 30; var bodies = []; drawing = new Image(); drawing.src = "http://jsrun.it/assets/M/d/u/Q/MduQX.png"; var isDown=false,isDown2=false,isDown3=false,isDown4=false,cpIndex=-1, pIndex3=-1, pIndex4=-1,pIndex2=-1; var trup; var vid=document.getElementById('awesome'); var run=true; var pause=false; //scale= window.innerWidth/50; b = {}; bb = {}; var COEUR = [[300,330],[250,300],[230,350],[270,400],[295,440],[300,470],[305,440],[330,400],[370,350],[350,300],[300,330]] var ptsB3 = [[300,330],[250,300],[230,350],[270,400],[295,440],[300,470],[305,440],[330,400],[370,350],[350,300],[300,330]] var POINTS22= [[4.4,11.33],[ 3.83,10.4],[ 4.36,5.97],[ 0.67,6.43],[ 0.7,4.43],[ 5.57,2.87],[ 10.03,4.33],[ 10.4,6.83],[ 6.83,6.37],[ 6.8,10.87],[ 5.06,11.5 ]]; var ptsB2= [[4.4,11.33],[ 3.83,10.4],[ 4.36,5.97],[ 0.67,6.43],[ 0.7,4.43],[ 5.57,2.87],[ 10.03,4.33],[ 10.4,6.83],[ 6.83,6.37],[ 6.8,10.87],[ 5.06,11.5 ]]; var POINTS2 = [[16.67,13.33], [16.67,9.33], [18.33,9.67], [20,10.33], [21.67,9.67], [23.33,10], [25,10.67], [25,13.33]]; var ptsB= [[16.67,13.33], [16.67,9.33], [18.33,9.67], [20,10.33], [21.67,9.67], [23.33,10], [25,10.67], [25,13.33]]; var CPRADIUS = 4; scale = window.innerHeight / 25; function redraw(ctx) { eraseline(); ctx.clearRect(0, 0, width, height); ctx.lineWidth=5; if (POINTS2.length > 1) { var curve = POINTS2;//ctx.strokeStyle = 'blue'; for (var precision = 3; precision--;) curve = fourPoint(curve); drawPolyline(ctx, curve); ctx.strokeStyle = 'rgba(0,220,0,1)'; ctx.shadowColor='rgba(220,0,220,1)'; ctx.shadowBlur=80; ctx.lineWidth=50; ctx.stroke(); ctx.globalCompositeOperation='destination-in'; ctx.fill(); ctx.globalCompositeOperation='destination-over'; ctx.fillStyle = 'rgba(200,0,0,0.1'; ctx.fill(); ctx.globalCompositeOperation='source-over'; ctx.lineWidth=50;ctx.strokeStyle = 'rgba(10,250,0,0.1)'; ctx.shadowOffsetY = -30; ctx.shadowColor = 'white';ctx.shadowBlur = 50;ctx.stroke(); ctx.shadowColor='rgba(0,0,0,0)';ctx.shadowBlur=0;ctx.shadowOffsetY = 0; ctx.lineWidth=3;ctx.strokeStyle = 'rgba(0,0,255,1)';ctx.stroke(); } ctx.fillStyle = 'rgba(255,0,0,1'; drawPoints(ctx, POINTS2); if (POINTS22.length > 1) { var curve2 = POINTS22; ctx.strokeStyle = 'red'; ctx.lineWidth=5; for (var precision = 3; precision--;) curve2 = fourPoint(curve2); drawPolyline(ctx, curve2) ; ctx.fillStyle = 'rgba(0,155,250,0.1)'; ctx.fill(); ctx.stroke();}; ctx.fillStyle = 'pink'; } function affineCombination(e){for(var n=0,t=[0,0],a=0;a<e.length;a++)n+=e[a][1];for(var a=0;a<e.length;a++){var i=e[a],o=i[1]/n;t[0]+=i[0][0]*o,t[1]+=i[0][1]*o}return t} function fourPoint(e){var n=e.length;if(4>n)return e;var a=[e[0]];a.push(affineCombination([[e[0],5],[e[1],15],[e[2],-5],[e[3],1]])); for(var r=n-2,t=1;r>t;++t){var o=t-1;a.push(e[t]),a.push(affineCombination([[e[t-1],-1],[e[t+0],9],[e[t+1],9],[e[t+2],-1]]))}a.push(e[r]); var o=n-4;return a.push(affineCombination([[e[o+0],1],[e[o+1],-5],[e[o+2],15],[e[o+3],5]])),a.push(e[n-1]),a} function drawPolyline(e,n){ e.beginPath(),e.moveTo(n[0][0]*scale,n[0][1]*scale);var t=new b2BodyDef;t.type=b2Body.b2_staticBody; for(var a=n[0][0],i=n[0][1],o=world.CreateBody(t),r=1;r<n.length;r++){var f=new b2FixtureDef;f.density=15,f.friction=.8,f.restitution=.4;var l=n[r][0],s=n[r][1];f.shape=new b2PolygonShape,f.shape.SetAsEdge(new b2Vec2(a,i),new b2Vec2(l,s)),o.CreateFixture(f),a=l,i=s,bodies.push(o),o.SetUserData("line"), e.lineTo(n[r][0]*scale,n[r][1]*scale)};e.stroke(); } function drawPoints(e,n){for(var t=1;t<n.length-1;t++)e.beginPath(),e.arc(n[t][0]*scale,n[t][1]*scale,CPRADIUS,0,2*Math.PI,!0),e.fill()} var debugDraw=new b2DebugDraw;debugDraw.SetSprite(document.getElementById("world").getContext("2d")),debugDraw.SetDrawScale(scale),debugDraw.SetFillAlpha(.5),debugDraw.SetLineThickness(.1),debugDraw.SetFlags(b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit),world.SetDebugDraw(debugDraw); var bodyDef2 = new b2BodyDef; bodyDef2.type = b2Body.b2_dynamicBody; bodyDef2.position.Set(7,-5); var fixDef2 = new b2FixtureDef; fixDef2.density = 2; fixDef2.friction = .5; fixDef2.restitution = .7; fixDef2.shape = new b2CircleShape(0.98); wheel = world.CreateBody(bodyDef2); wheel.CreateFixture(fixDef2); wheel.SetUserData('circle2'); wheel.ApplyImpulse(new b2Vec2(0, 0.2), wheel.GetWorldCenter()); for (c = 0; 9 > c; c++) { fixDef = new b2FixtureDef; var bodyDef = new b2BodyDef;fixDef.shape = new b2CircleShape(0.33); fixDef.friction = 1;fixDef.restitution = 0.2; fixDef.density = 1.5; bodyDef.type = b2Body.b2_dynamicBody; bodyDef.position.x = 10.7+ 0.67 * c + 0.2, bodyDef.position.y = 7, b["link" + c] = world.CreateBody(bodyDef), b["link" + c].CreateFixture(fixDef);} a = new b2RevoluteJointDef(); a.localAnchorA=new b2Vec2(0,0); a.localAnchorB=new b2Vec2( ptsB2[7][0]+0.2, ptsB2[7][1]+0.1); a.bodyA=b.link0; a.bodyB=world.GetGroundBody(); world.CreateJoint(a); for (c = 1; 9 > c; c++) {a.Initialize(b["link" + (c - 1)], b["link" + c], b["link" + (c - 1)].GetWorldCenter()), world.CreateJoint(a);} a.localAnchorB=new b2Vec2(0.5,0); a.localAnchorA=new b2Vec2( ptsB[1][0]-0.2, ptsB[1][1]); a.bodyB=b.link8; a.bodyA=world.GetGroundBody(); world.CreateJoint(a); /* var bodyDef = new b2BodyDef; bodyDef.type = b2Body.b2_dynamicBody;bodyDef.fixedRotation = true; fixDef = new b2FixtureDef;fixDef.density = 20;fixDef.friction = 1;fixDef.restitution = 1; for (c = 0; 12 > c; c++) { fixDef.shape = new b2CircleShape(0.07); bodyDef.position.x = 280/scale+ 0.5 * c; bodyDef.position.y = 250/scale -0.15 * c-0.15; b["link" + c] = world.CreateBody(bodyDef); b["link" + c].CreateFixture(fixDef); } a = new b2RevoluteJointDef(); a.localAnchorA=new b2Vec2(-0.5,0); a.localAnchorB=new b2Vec2( 280/scale, 270/scale); a.bodyA=b.link0; a.bodyB=world.GetGroundBody(); world.CreateJoint(a); for (c = 1; 12 > c; c++) {a.Initialize(b["link" + (c - 1)], b["link" + c], b["link" + (c - 1)].GetWorldCenter()), world.CreateJoint(a);} a.localAnchorB=new b2Vec2(0.5,0); a.localAnchorA=new b2Vec2( 500/scale, 290/scale); a.bodyB=b.link11; a.bodyA=world.GetGroundBody(); world.CreateJoint(a); for (c = 0; 12 > c; c++) { fixDef.shape = new b2CircleShape(0.35); fixDef.density = 1; fixDef.friction = 1; fixDef.restitution = 0.8;bodyDef.type = b2Body.b2_dynamicBody; bodyDef.position.x = 270 / scale+ 0.7 * c + 0.7, bodyDef.position.y = 230 / scale- 0.1 * c +0.1, bb["link2" + c] = world.CreateBody(bodyDef), bb["link2" + c].CreateFixture(fixDef); } a = new b2RevoluteJointDef(); a.Initialize( bb.link20,world.GetGroundBody(), bb.link20.GetWorldCenter()); world.CreateJoint(a); for (c = 1; 12 > c; c++) { a.Initialize(bb["link2" + (c - 1)], bb["link2" + c], bb["link2" + (c - 1)].GetWorldCenter()), world.CreateJoint(a); } a.Initialize(bb.link211, world.GetGroundBody(), bb.link211.GetWorldCenter()); world.CreateJoint(a); */ /* setTimeout(function(){ fixDef.density=5; fixDef.friction=1; fixDef.restitution=0.3; bodyDef.type=b2Body.b2_dynamicBody; bodyDef.fixedRotation=true; bodyDef.angularDamping = 2; bodyDef.linearDamping = 0.1; var bodyTmp=null; var bodies=[]; var num=36; for(var i = 0; i < num; ++i) { fixDef.shape = new b2CircleShape(0.1); bodyDef.position.x = 1.5+i/4; bodyDef.position.y = 4; bodyTmp = world.CreateBody(bodyDef); bodyTmp.CreateFixture(fixDef);bodyTmp.SetUserData("circ"); bodies.push(bodyTmp); } var jointDef = new b2DistanceJointDef(); jointDef.bodyA = bodies[bodies.length-1]; jointDef.bodyB = bodies[0]; jointDef.collideConnected = false; jointDef.length=1.7*3.14/num; jointDef.frequencyHz = 0; jointDef.dampingRatio = 0; jointDef.anchorPoint1 = bodies[bodies.length-1].GetLocalCenter(); jointDef.anchorPoint2 = bodies[0].GetLocalCenter(); lol= world.CreateJoint(jointDef);lol.SetUserData("line"); for(var j=0;j<bodies.length-1;j++){ jointDef.bodyA = bodies[j]; jointDef.bodyB = bodies[j+1]; jointDef.anchorPoint1 = bodies[j].GetLocalCenter(); jointDef.anchorPoint2 = bodies[j+1].GetLocalCenter(); lol=world.CreateJoint(jointDef); lol.SetUserData("line"); } for(var k=0;k<bodies.length/2;k++){ jointDef.frequencyHz = 1.8; jointDef.dampingRatio =.2; jointDef.bodyA = bodies[k]; jointDef.bodyB = bodies[k+bodies.length/2]; jointDef.length=1.7; jointDef.anchorPoint1 = bodies[k].GetLocalCenter(); jointDef.anchorPoint2 = bodies[k*2].GetLocalCenter(); world.CreateJoint(jointDef);eraseline(); }},8000);*/ function tick(){ world.Step(1 / 20, 4, 2); ctx2.clearRect(0, 0, width, height); ctx2.fillStyle = '#1d1f20'; ctx2.fillRect(0, 0, width, height); //world.DrawDebugData(); var body = world.GetBodyList(); while (body) { if (body.GetUserData() == "circle2") { var radius = body.GetFixtureList().GetShape().GetRadius(), rotation = body.GetAngle() ; var x = body.GetPosition().x, y = body.GetPosition().y ; ctx2.save(); ctx2.translate(x*scale,y*scale); ctx2.rotate(rotation); ctx2.drawImage(drawing, -radius*scale,-radius*scale,radius*2*scale,radius*2*scale); ctx2.restore(); } if (body.GetUserData() == "circ") { var radius = body.GetFixtureList().GetShape().GetRadius() ; rotation = body.GetAngle() ; var x=body.GetPosition().x, y=body.GetPosition().y ; ctx2.save(); ctx2.beginPath();ctx2.fillStyle='rgba(255,0,0,0.7)'; ctx2.arc(x*scale, y*scale, radius*scale, Math.PI * 2, false); ctx2.fill(); ctx2.restore(); } body = body.GetNext(); } ctx2.beginPath(); ctx2.moveTo(b.link0.GetPosition().x * scale, b.link0.GetPosition().y * scale); for (a = 1; 8 >= a; a++) { var fix = b["link" + (a )].GetPosition(), g = b["link" + a].GetPosition(); ctx2.quadraticCurveTo(fix.x*scale, fix.y*scale, (fix.x*scale+g.x*scale)/2, (fix.y*scale+g.y*scale)/2)} ctx2.lineWidth=5; ctx2.strokeStyle='blue'; ctx2.stroke();ctx2.shadowColor='white' ctx2.shadowBlur=30; ctx2.stroke(); ctx2.shadowBlur=0;ctx2.shadowColor='rgba(0,0,0,0)'; if(wheel.GetAngularVelocity() == 0 && wheel.GetLinearVelocity().y ==0 && !isDown ){run=false; pause=true } //if( wheel.GetAngularVelocity() !== 0 && wheel.GetLinearVelocity().y !==0 ){pause=false; run=true;} //world.ClearForces(); }; var trip, trop; function draw2(){ctx3.clearRect(0, 0, width, height);ctx3.drawImage(vid, ptsB[0][0]*scale+0.67*scale, ptsB[2][1]*scale+1.33*scale,6.6*scale,2.67*scale);} setTimeout(function(){trip=setInterval(draw2, 200)}, 5500) setTimeout(function(){clearInterval(trip); ctx3.clearRect(0, 0, width, height);}, 14500); redraw(ctx); var lx, ly, dist; canvas.onmousedown = function(e) {var p = getPos(e); cpIndex = -1;isDown = false; pIndex3 = -1; pIndex2 = -1; for (var i = 1; i < POINTS2.length-1; i++) { dist = Math.sqrt((POINTS2[i][1]-p[1])*(POINTS2[i][1]-p[1]) + (POINTS2[i][0]-p[0])*(POINTS2[i][0]-p[0])); if (dist < 0.83) {eraseline(); isDown = true; cpIndex = i; lx = p[0]-POINTS2[i][0] ; ly = p[1]-POINTS2[i][1]; eraseline();if(pause){pause=false; run=true;animate()}; }; } for (var j = 1; j < POINTS22.length-1; j++) { dist = Math.sqrt((POINTS22[j][1]-p[1])*(POINTS22[j][1]-p[1]) + (POINTS22[j][0]-p[0])*(POINTS22[j][0]-p[0])); if (dist < 0.83){ isDown2 = true; pIndex2 = j; lx = p[0]-POINTS22[j][0] ; ly = p[1]-POINTS22[j][1]; } }; } window.onmousemove = function(e) { if (isDown) {eraseline();var p = getPos(e); POINTS2[cpIndex][0]=p[0]-lx; POINTS2[cpIndex][1] = p[1]-ly;eraseline(); for(var i = 1; i < POINTS2.length-1; i++) { if(POINTS2[i][0]>ptsB[i][0]+0.83){POINTS2[i][0]=ptsB[i][0]+0.83}; if(POINTS2[i][0]<ptsB[i][0]-0.83){POINTS2[i][0]=ptsB[i][0]-0.83}; if(POINTS2[i][1]>ptsB[i][1]+0.83){POINTS2[i][1]=ptsB[i][1]+0.83}; if(POINTS2[i][1]<ptsB[i][1]-0.83){POINTS2[i][1]=ptsB[i][1]-0.83}; } eraseline(); redraw(ctx);eraseline();} if (isDown2) { var p = getPos(e); POINTS22[pIndex2][0] = p[0]-lx; POINTS22[pIndex2][1] = p[1]-ly; for (var j = 1; j < POINTS22.length-1; j++) { if(POINTS22[j][0]>ptsB2[j][0]+0.83/scale){POINTS22[j][0]=ptsB2[j][0]+0.83}; if(POINTS22[j][0]<ptsB2[j][0]-0.83){POINTS22[j][0]=ptsB2[j][0]-0.83}; if(POINTS22[j][1]>ptsB2[j][1]+0.83/scale){POINTS22[j][1]=ptsB2[j][1]+0.83}; if(POINTS22[j][1]<ptsB2[j][1]-0.83){POINTS22[j][1]=ptsB2[j][1]-0.83}; } eraseline(); redraw(ctx);}; }; window.onmouseup = function() { cpIndex=-1; isDown2=false;isDown3=false; isDown4=false;isDown = false;pIndex4=-1;pIndex3=-1; pIndex2=-1; }; function getPos(e) { var r=canvas.getBoundingClientRect(); return [x= (e.clientX-r.left)/scale, y= (e.clientY-r.top)/scale] } function eraseline() { var bodies = world.GetBodyList(); if(bodies.GetUserData() == "line"){world.DestroyBody(bodies)}} var trap, trup; function animate(){if(run && !pause) { trap = window.setTimeout(animate, 40 ); tick();}} function pause(){run = !run;if(run){animate()}}; window['onload'] = function doOnload() {animate(); } </script> </body></html>

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

licart

where is my box2d?

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/2ymY/js"></script>

QR Code

Discussion

Questions on this code?

Forked

sort by

forked: box2dweb free ball on

ohisama1

364/13/17
- animation
- art&design
- box2d
- box2dweb
- canvas
- css
- game
- html5_elements&api
- javascript
- other
- physics

box2dweb free ball on the curve

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Forked