p2s
Version:
A JavaScript 2D physics engine.
91 lines (77 loc) • 2.95 kB
HTML
<html>
<head>
<title>Top down vehicle demo - p2.js physics engine</title>
<script src="../build/p2.js"></script>
<script src="../build/p2.renderer.js"></script>
<link href="css/demo.css" rel="stylesheet"/>
<meta name="description" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script>
// Create demo application
var app = new p2.WebGLRenderer(function(){
// Create a World
var world = new p2.World({
gravity : [0,0]
});
this.setWorld(world);
// Create a dynamic body for the chassis
chassisBody = new p2.Body({
mass: 1
});
var boxShape = new p2.Box({ width: 0.5, height: 1 });
chassisBody.addShape(boxShape);
world.addBody(chassisBody);
// Create the vehicle
vehicle = new p2.TopDownVehicle(chassisBody);
// Add one front wheel and one back wheel - we don't actually need four :)
frontWheel = vehicle.addWheel({
localPosition: [0, 0.5] // front
});
frontWheel.setSideFriction(4);
// Back wheel
backWheel = vehicle.addWheel({
localPosition: [0, -0.5] // back
});
backWheel.setSideFriction(3); // Less side friction on back wheel makes it easier to drift
vehicle.addToWorld(world);
// Key controls
var keys = {
'37': 0, // left
'39': 0, // right
'38': 0, // up
'40': 0 // down
};
var maxSteer = Math.PI / 5;
this.on("keydown",function (evt){
keys[evt.keyCode] = 1;
onInputChange();
});
this.on("keyup",function (evt){
keys[evt.keyCode] = 0;
onInputChange();
});
function onInputChange(){
// Steer value zero means straight forward. Positive is left and negative right.
frontWheel.steerValue = maxSteer * (keys[37] - keys[39]);
// Engine force forward
backWheel.engineForce = keys[38] * 7;
backWheel.setBrakeForce(0);
if(keys[40]){
if(backWheel.getSpeed() > 0.1){
// Moving forward - add some brake force to slow down
backWheel.setBrakeForce(5);
} else {
// Moving backwards - reverse the engine force
backWheel.setBrakeForce(0);
backWheel.engineForce = -2;
}
}
}
});
</script>
</body>
</html>