game.html

<script type="text/javascript" src="node_modules/socket.io-client/socket.io.js"></script>
<script type="text/javascript" src="./node_modules/phaser/build/phaser.min.js"></script>
<script type="text/javascript">
/**
 * Generated from the Phaser Sandbox
 *
 * http://phaser.io/sandbox/rpqQRssz
 *
 * This source requires Phaser 2.6.2
 */
const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;
var game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });

function preload() {

    game.stage.backgroundColor = '#000000';

    game.load.baseURL = 'http://examples.phaser.io/assets/';
    game.load.crossOrigin = 'anonymous';

    game.load.image('ball', 'https://cdn2.iconfinder.com/data/icons/iconslandsport/PNG/48x48/Football_Ball.png');
    game.load.image('platform', 'sprites/platform.png');

    game.load.audio('rocky top', 'https://raw.githubusercontent.com/kveca1/winternet/master/rockytop.mp3');

    game.load.image('bullets', 'https://raw.githubusercontent.com/kveca1/winternet/master/BETTERFFA500.png', 6, 6);
}

var ball;
var platforms;
var jumpButton;
var net;
var net2;
var button;

var goal1;
var goal2;

var score1;
var score2;
var scoreboard;
var socket;

var name1= "home";
var name2= "away";
var name1board;
var name2board;

var finaltext;
var maxscore;
var isHost = false;

var music;
var emitter;

function create() {

  socket = io();
  socket.emit('addPlayer', localStorage.getItem('username'));

  ball = game.add.sprite(0 , 200, 'ball');//adds ball to the game
  game.physics.arcade.enable(ball);

  socket.on('isHost', function(data)
	{
		isHost = data;
    ball.body.collideWorldBounds = data; //sets world border and gravity
    if(data) ball.body.gravity.y = 350;
	});


	button = false;
	score1 = 0;
	score2 = 0;
  min = Math.ceil(1);
  max = Math.floor(11);
  maxscore= Math.floor(Math.random() * (max - min + 1)) + min;
  maxscore *= 7;

  //music = game.sound.play('rocky top');

    ball.x = (GAME_WIDTH - ball.width)  * .5; // sets ball to the middle
    ball.body.velocity.y = -200;

    scoreboard = game.add.text(game.world.centerX, 50, score1 + " - " + score2, { font: "65px Arial", fill: "#ffffff", align: "center" }); //creates scoreboard
    scoreboard.anchor.set(0.5);
    name1board = game.add.text(game.world.leftX, 50, name1, { font: "48px Arial", fill: "#ffffff", align: "left" });
    name2board = game.add.text(GAME_WIDTH, 112, name2, { font: "48px Arial", fill: "#ffffff", align: "right" });
    name2board.anchor.set(1);

    platforms = game.add.physicsGroup();

	goal1 = new Phaser.Rectangle(0, GAME_HEIGHT - 50, 150, 50);
	goal2 = new Phaser.Rectangle(GAME_WIDTH - 150, GAME_HEIGHT - 50, 150, 50);


    platforms.create(150, GAME_HEIGHT - 50, 'platform');

    net2 = platforms.create(GAME_WIDTH *.5 - 5, GAME_HEIGHT *.5,'platform');
    net2.width = 10;
    net2.height = GAME_HEIGHT *.5 - 50;

    net = new Phaser.Rectangle(GAME_WIDTH *.5 - 5, GAME_HEIGHT *.5, 10, GAME_HEIGHT *.5 - 50);

    //Rectangles
    orange0 = new Phaser.Rectangle(0,GAME_HEIGHT - 25, 25, 25);
    orange1 = new Phaser.Rectangle(25,GAME_HEIGHT - 50, 25, 25);
    orange2 = new Phaser.Rectangle(50,GAME_HEIGHT - 25, 25, 25);
    orange3 = new Phaser.Rectangle(75,GAME_HEIGHT - 50, 25, 25);
    orange4 = new Phaser.Rectangle(100,GAME_HEIGHT - 25, 25, 25);
    orange5 = new Phaser.Rectangle(125,GAME_HEIGHT - 50, 25, 25);
    orange6 = new Phaser.Rectangle(GAME_WIDTH - 150, GAME_HEIGHT - 25, 25, 25);
    orange7 = new Phaser.Rectangle(GAME_WIDTH - 125, GAME_HEIGHT - 50,  25, 25);
    orange8 = new Phaser.Rectangle(GAME_WIDTH -100, GAME_HEIGHT - 25,  25, 25);
    orange9 = new Phaser.Rectangle( GAME_WIDTH -75, GAME_HEIGHT - 50, 25, 25);
    orange10 = new Phaser.Rectangle(GAME_WIDTH - 50, GAME_HEIGHT - 25,  25 , 25);
    orange11 = new Phaser.Rectangle(GAME_WIDTH - 25, GAME_HEIGHT - 50,  25, 25);


    platforms.setAll('body.immovable', true);
	socket.on('ballSet', function(data)
	{
    ball.x = data.x;
    ball.y = data.y
	});

    socket.on('score', function(data)
    {
    scoreboard.text = data[0] + " - " + data[1];
 	});
  socket.on('click',function(data)
  {
    if (Math.abs(data[0] - ball.centerX) <= 100 && Math.abs(ball.centerY - data[1]) <= 100 && data[0]  > ball.centerX)
    {
        ball.body.velocity.x += -250;
    }
    else if (Math.abs(ball.centerX - data[0]) <= 100 && Math.abs(ball.centerY - data[1]) <= 100 && ball.centerX > data[0] )
    {
        ball.body.velocity.x += 250;
    }

    if (Math.abs(data[1]- ball.centerY) <= 100 && Math.abs(ball.centerX - data[0] ) <= 100 && data[1] > ball.centerY)
    {
      ball.body.velocity.y += -250;
    }
    else if (Math.abs(ball.centerY - data[1]) <= 100 && Math.abs(ball.centerX - data[0] ) <= 100 && ball.centerY > data[1])
    {
      ball.body.velocity.y += 250;
    }
  });

	socket.on('end', function(data)
	{
		if(data[0] == 1)
		{
			endscreen("Home", data[1], data[2]);
		}
		else
		{
			endscreen("Away", data[1], data[1]);
		}
	});
}

var lastpos = {}

function update () {

	if(isHost)
	{
	game.physics.arcade.collide(ball, net2);
    game.physics.arcade.collide(ball, platforms);
    ball.body.velocity.x /= 1.05; /*frictional x movement*/

	if(ball.body.position.x < 10) // pushes ball sprite from wall
    {
         ball.body.velocity.x += 50;
    }
    else if(ball.body.position.x > GAME_WIDTH - 10 - ball.width)
    {
         ball.body.velocity.x -= 50;
    }

	if(game.input.activePointer.isDown && !button) // Controls the movements of the Slime with respect to the cursor
	{
		button = true;
    	socket.emit('click', [game.input.position.x,game.input.position.y]);
	}
	else if(game.input.activePointer.isUp)//ensures the ball must click a to interact and not hold down
	{
		button = false;
	}

	if(goal1.contains(ball.x, ball.centerY))
	{
		socket.emit('score',2);
		//score2+=7;
		ball.x = (GAME_WIDTH - ball.width)  * .5;
		ball.y = 200;
		ball.body.velocity.x = 0;
		ball.body.velocity.y = -200;
		//scoreboard.text = score1 + " - " + score2;
    if(score2 == maxscore){
      endscreen(name2, score2, score1);
    }
	}
	else if(goal2.contains(ball.x, ball.centerY))
	{
		socket.emit('score',1);
		//score1+=7;
		ball.x = (GAME_WIDTH - ball.width)  * .5;
		ball.y = 200;
		ball.body.velocity.x = 0;
		ball.body.velocity.y = -200;
		//scoreboard.text = score1 + " - " + score2;
    if(score1==maxscore){
      endscreen(name1, score1, score2);
    }
	}

		socket.emit('ballSet', { x: ball.x, y: ball.y });
	}
  else
  {
    if(game.input.activePointer.isDown && !button)
    {
      button = true;
      socket.emit('click', [game.input.position.x,game.input.position.y]);
    }
    else if(game.input.activePointer.isUp)
    {
      button = false;
    }
  }


}

function endscreen(winner, winscore, losescore){
  finaltext = game.add.text(game.world.centerX, 150, "Congrats, " + winner + "!\nFinal Score: " + winscore + " - " + losescore, { font: "65px Arial", fill: "#ffffff", align: "center" }); //creates scoreboard
  finaltext.anchor.set(0.5);
  //endtext.text = "Congrats, " + winner + "!\nFinal Score: " + winscore + " - " + losescore;
  music = game.sound.play('rocky top');

  emitter = game.add.emitter(game.world.centerX, game.world.centerY, 20);

  emitter.makeParticles('bullets', [30000,30001,30002,30003,30004], 200, true, true);

  emitter.minParticleSpeed.setTo(-200, -300);
  emitter.maxParticleSpeed.setTo(200, -400);
  emitter.minParticleScale = 0.25;
  emitter.maxParticleScale = 1;
  emitter.gravity = 150;
  emitter.bounce.setTo(0.5, 0.5);
  emitter.angularDrag = 30;

  emitter.start(false, 6000, 100);

}

function render () {
  game.debug.geom(net,'#ffff00');
  game.debug.geom(goal1, "#ffffff");
  game.debug.geom(goal2, "#ffffff");

  game.debug.geom(orange0, "#ffa500");
  game.debug.geom(orange1, "#ffa500");
  game.debug.geom(orange2, "#ffa500");
  game.debug.geom(orange3, "#ffa500");
  game.debug.geom(orange4, "#ffa500");
  game.debug.geom(orange5, "#ffa500");
  game.debug.geom(orange6, "#ffa500");
  game.debug.geom(orange7, "#ffa500");
  game.debug.geom(orange8, "#ffa500");
  game.debug.geom(orange9, "#ffa500");
  game.debug.geom(orange10, "#ffa500");
  game.debug.geom(orange11, "#ffa500");

  //game.debug.soundInfo(music, 32, 32);

  //if (music.isDecoding)
  //{
    //  game.debug.text("Decoding MP3 ...", 32, 200);
  //}
}

</script>