Multi-player games in HTML5 : Client Side Ball Class

Ball.js

var Ball = Class.extend({

		
		init : function( attachTo ) {

				//Create meshes
			this.setupBall();

				//Store the speed value
			this.speed = 100;

				//Attach if requested to
			if(attachTo) {
				this.attachToPlayer( attachTo );
			}

		},

		setupBall : function() {
				//For switching colors!
			this.blueMaterial = new THREE.MeshLambertMaterial({color: 0x3333FF});
			this.redMaterial = new THREE.MeshLambertMaterial({color: 0xFF0000});

				//Create a cylinder mesh
			this.ball = new THREE.Mesh( new THREE.CylinderGeometry( 4, 4, 1, 16, 2, false ), this.blueMaterial ); 
				//Face the camera (set in radians)
			this.ball.rotation.x = 1.57079; 
				//Adjust just off the plane
			this.ball.position.z = 15;
				//enable shadows
      			this.ball.castShadow = true;
      				//add to the scene
			game.scene.add( this.ball );
			

		},

			//Attach the ball to a player block for launching
		attachToPlayer : function ( player ) {

				//Flag this for the player
			player.hasBall = true;

				//Set the position to the right spot
			this.ball.position.x = player.block.position.x;
			this.ball.position.y = player.block.position.y - 12;

				//Store the player so we can update this
			this.attachedTo = player;
		},

		release : function() {

				//Choose a random direction, and start moving
			var xdir = Math.ceil( Math.random() * 2 ) == 2 ? -1 : 1;
			var ydir = this.attachedTo.connection ? 1 : -1;

			var xspeed = 1 + (Math.random() * 2); 

				//Set the direction
			this.dir = { x : xdir * xspeed , y : ydir };

				//Flag this back
			this.attachedTo.hasBall = false;

				//Let go of the player we were on
			this.attachedTo = null;
		},

		update : function( deltatime ) {

			if(this.attachedTo) {
					//Keep in line with player
				this.ball.position.x = this.attachedTo.block.position.x - 12;
				this.ball.position.y = this.attachedTo.block.position.y - 12;

			} else {
					//Update the ball physics
				this.ball.position.x  += this.speed * this.dir.x * deltatime ;
				this.ball.position.y  += this.speed * this.dir.y * deltatime ;			

					//Bounce off the right edge
				if(this.ball.position.x > game.bounds.w) {
					this.dir.x *= -1;
				}

					//Bounce off the left edge
				if(this.ball.position.x < game.bounds.x) {
					this.dir.x *= -1;
				}

					//Check for collision against my own paddle.
				if(this.ball.position.y > game.bounds.y && !this.playerResetTimer) {

					var paddleleft = (game.player.block.position.x - 29);
					var paddleright = (game.player.block.position.x + 29);

					if( this.ball.position.x > paddleleft && this.ball.position.x < paddleright) {

							//Fetch where we hit
						var hitposition = ( this.ball.position.x - paddleleft  ) / 58;
							//Scale to -1, 1
						hitposition = -1 + (hitposition * 2);

							//Return the ball 
						this.dir.y = -1;

							//Adjust speed of ball based on hit position
						if(hitposition < 0 && hitposition < -0.6) { this.dir.x *= 2; } else 
						if(hitposition > 0 && hitposition > 0.6) { this.dir.x *= 2; } else 
						{  this.dir.x *= 0.5; }

					} else {

						if(!this.playerResetTimer) {
							this.playerResetTimer = setTimeout(  
								function(){
									if(game.online && game.ingame && game.opponent) {
										this.attachTo( game.opponent );
										this.ball.material = this.redMaterial;
									} else {
										this.attachToPlayer( game.player );
										this.ball.material = this.blueMaterial;
									}
									
									this.playerResetTimer = null;
								}.bind(this), 600 );
							
						} //set up a reset time	


					} //other wise

				} //ball past player

					//These come after the check for player collision because they are a fail safe,
					//To keep the ball inside the area at all times.
				
					//Bounce off the bottom
				if(this.ball.position.y < game.bounds.h ) {
					this.dir.y = 1;
				}

					//Bounce off the top
				if(this.ball.position.y > game.bounds.y && !this.playerResetTimer) {
					this.dir.y = -1;
				}
			}
		},
	});