Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
98 lines (94 sloc) 3.76 KB
<!doctype html><title>Augmented Pong</title>
<script src="../../build/augmentedgesture-bundle.js"></script>
<script src="tquery-bundle.js"></script>
<!--
<script src="http://jeromeetienne.github.com/augmentedgesture.js/build/augmentedgesture-bundle.min.js"></script>
<script src="http://jeromeetienne.github.com/tquery/build/tquery-bundle.min.js"></script>
-->
<body><script>
// create a AugmentedGesture
var aGesture = new AugmentedGesture().enableDatGui().start().domElementThumbnail();
// create a tQuery.World
var world = tQuery.createWorld().boilerplate().start();
// no camera controls is needed
world.removeCameraControls();
// some constants for players
var players = { "right" : {}, "left": {} };
var racketW = 0.25*0.5;
var racketH = 1.00*0.5;
var racketRangeY= 2;
// init each player
Object.keys(players).forEach(function(playerId){
var player = players[playerId];
// create tQuery.Object3D for a racket
var object3d = tQuery.createCube().addTo(world).scale(0.25,1,0.5).scaleBy(0.5);
object3d.translateX(1.3 * (playerId === "right" ? +1 : -1));
player.object3d = object3d;
// add a pointer for this player
var pointerOpts = new AugmentedGesture.OptionPointer();
aGesture.addPointer(playerId, pointerOpts);
// tune the pointer for each player
if( playerId === "right" ){
pointerOpts.pointer.crossColor = {r: 255, g: 50, b: 50};
pointerOpts.colorFilter.r = {min: 97, max: 255};
pointerOpts.colorFilter.g = {min: 10, max: 255};
pointerOpts.colorFilter.b = {min: 0, max: 43};
}else{
pointerOpts.pointer.crossColor = {r: 50, g: 255, b: 50};
pointerOpts.colorFilter.r = {min: 0, max: 83};
pointerOpts.colorFilter.g = {min: 50, max: 255};
pointerOpts.colorFilter.b = {min: 0, max: 55};
}
// bind aGesture "mousemove" and update object3d position with it
aGesture.bind("mousemove."+playerId, function(event){
object3d.get(0).position.y = -(-racketRangeY/2 + event.y*racketRangeY);
});
})
// constant for the field
var fieldW = 3;
var fieldH = 1.8;
// constant for the ball
var ballRadius = 1/5;
var angle = Math.random()*Math.PI*2;
var ballVelX = Math.cos(angle)*0.03;
var ballVelY = Math.sin(angle)*0.03;
// create a tQuery.Object3d for the ball
var ball3d = tQuery.createSphere().addTo(world).scaleBy(ballRadius);
world.loop().hook(function(){
// get ball position
var position = ball3d.get(0).position;
// update position
position.x += ballVelX;
position.y += ballVelY;
// bounce the ball if it reach the border
if( position.x < -fieldW/2 ) ballVelX *= -1;
if( position.x > +fieldW/2 ) ballVelX *= -1;
if( position.y < -fieldH/2 ) ballVelY *= -1;
if( position.y > +fieldH/2 ) ballVelY *= -1;
// get the boundaries
position.x = Math.max(position.x, -fieldW/2);
position.x = Math.min(position.x, +fieldW/2);
position.y = Math.max(position.y, -fieldH/2);
position.y = Math.min(position.y, +fieldH/2);
// check collision with each player racket
["right", "left"].forEach(function(playerId){
// get tQuery.Object3D for this player
var object3d = players[playerId].object3d;
// get the position in X and Y
var racketX = object3d.get(0).position.x;
var racketY = object3d.get(0).position.y;
// test each ball boundary
var mayHitLeft = (position.x+ballRadius/2) >= (racketX-racketW/2);
var mayHitRight = (position.x-ballRadius/2) <= (racketX+racketW/2);
var mayHitTop = (position.y+ballRadius/2) >= (racketY-racketH/2);
var mayHitBottom= (position.y-ballRadius/2) <= (racketY+racketH/2);
// test if there is collision
if( mayHitLeft && mayHitRight && mayHitTop && mayHitBottom ){
// reaction of a collision
ballVelX *= -1;
var deltaX = racketW/2 + ballRadius/2;
position.x = racketX + (playerId === "right"? -deltaX : +deltaX);
}
});
});
</script></body>