Created
June 5, 2017 06:40
Revisions
-
OmarShehata created this gist
Jun 5, 2017 .There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,208 @@ <html> <head> <meta charset="UTF-8" /> <title>Multiplayer Experiment</title> <!-- Load the Phaser game library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.2/phaser.min.js"></script> <!-- Load the Socket.io networking library --> <script src="/socket.io/socket.io.js"></script> <!-- Some simple styles and fonts --> <style type="text/css"> body,html { /* Remove margins */ margin: 0px; position: relative; background-color:#9FC7E1; } canvas { /* Center the canvas */ margin:auto; /*border: 1px solid black;*/ } </style> </head> <body> <script type="text/javascript"> var ASSET_URL = "https://cdn.glitch.com/d371c629-b475-4d7b-88bc-b2558ae406a4%2F"; //Obtained from the assets folder //We first initialize the phaser game object var WINDOW_WIDTH = 750; var WINDOW_HEIGHT = 500; var game = new Phaser.Game(WINDOW_WIDTH, WINDOW_HEIGHT, Phaser.AUTO, '', {preload:preload, create:create, update:GameLoop} ); var WORLD_SIZE = {w:750,h:500}; var other_players = {}; var water_tiles = []; var bullet_array = []; var player = { sprite:null,//Will hold the sprite when it's created speed_x:0,// This is the speed it's currently moving at speed_y:0, speed:0.5, // This is the parameter for how fast it should move friction:0.95, shot:false, update: function(){ // Lerp rotation towards mouse var dx = (game.input.mousePointer.x + game.camera.x) - this.sprite.x; var dy = (game.input.mousePointer.y + game.camera.y) - this.sprite.y; var angle = Math.atan2(dy,dx) - Math.PI/2; var dir = (angle - this.sprite.rotation) / (Math.PI * 2); dir -= Math.round(dir); dir = dir * Math.PI * 2; this.sprite.rotation += dir * 0.1; // Move forward if(game.input.keyboard.isDown(Phaser.Keyboard.W) || game.input.keyboard.isDown(Phaser.Keyboard.UP)){ this.speed_x += Math.cos(this.sprite.rotation + Math.PI/2) * this.speed; this.speed_y += Math.sin(this.sprite.rotation + Math.PI/2) * this.speed; } this.sprite.x += this.speed_x; this.sprite.y += this.speed_y; this.speed_x *= this.friction; this.speed_y *= this.friction; // Shoot bullet if(game.input.activePointer.leftButton.isDown && !this.shot){ var speed_x = Math.cos(this.sprite.rotation + Math.PI/2) * 20; var speed_y = Math.sin(this.sprite.rotation + Math.PI/2) * 20; var bullet = {}; bullet.speed_x = speed_x; bullet.speed_y = speed_y; bullet.sprite = game.add.sprite(this.sprite.x + bullet.speed_x,this.sprite.y + bullet.speed_y,'bullet'); bullet_array.push(bullet); this.shot = true; } if(!game.input.activePointer.leftButton.isDown) this.shot = false; // To make player flash when they are hit, set player.spite.alpha = 0 if(this.sprite.alpha < 1){ this.sprite.alpha += (1 - this.sprite.alpha) * 0.16; } else { this.sprite.alpha = 1; } } }; function CreateShip(type,x,y,angle){ // type is an int that can be between 1 and 6 inclusive // returns the sprite just created var sprite = game.add.sprite(x,y,'ship' + String(type) + '_1'); sprite.rotation = angle; sprite.anchor.setTo(0.5,0.5); return sprite; } function preload(){ game.load.crossOrigin = "Anonymous"; game.stage.backgroundColor = "#3399DA"; // Load all the ships for(var i=1;i<=6;i++){ game.load.image('ship'+String(i) +'_1', ASSET_URL + 'ship'+String(i)+'_1.png'); game.load.image('ship'+String(i) +'_2', ASSET_URL + 'ship'+String(i)+'_2.png'); game.load.image('ship'+String(i) +'_3', ASSET_URL + 'ship'+String(i)+'_3.png'); game.load.image('ship'+String(i) +'_4', ASSET_URL + 'ship'+String(i)+'_4.png'); } game.load.image('bullet', ASSET_URL + 'cannon_ball.png'); game.load.image('water', ASSET_URL + 'water_tile.png'); } function create(){ var socket = io(); // This triggers the 'connection' event on the server // Create water tiles for(var i=0;i<=WORLD_SIZE.w/64+1;i++){ for(var j=0;j<=WORLD_SIZE.h/64+1;j++){ var tile_sprite = game.add.sprite(i * 64, j * 64, 'water'); tile_sprite.anchor.setTo(0.5,0.5); tile_sprite.alpha = 0.5; water_tiles.push(tile_sprite); } } // Create player var player_ship_type = String(3); player.sprite = game.add.sprite(Math.random() * WORLD_SIZE.w/2 + WORLD_SIZE.w/2,Math.random() * WORLD_SIZE.h/2 + WORLD_SIZE.h/2,'ship'+player_ship_type+'_1'); player.sprite.anchor.setTo(0.5,0.5); socket.emit('new-player',{x:player.sprite.x,y:player.sprite.y,angle:player.sprite.rotation}) // Listen for other players connecting socket.on('update-players',function(players_data){ var players_found = {}; // Loop over all the player data received for(var id in players_data){ // If the player hasn't been created yet if(other_players[id] == undefined && id != socket.id){ // Make sure you don't create yourself var data = players_data[id]; var p = CreateShip(1,data.x,data.y,data.angle); other_players[id] = p; console.log("Created new player at (" + data.x + ", " + data.y + ")"); } players_found[id] = true; // Update positions of other players if(id != socket.id){ other_players[id].x = players_data[id].x; // Update target, not actual position, so we can interpolate other_players[id].y = players_data[id].y; other_players[id].rotation = players_data[id].angle; } } // Check if a player is missing and delete them for(var id in other_players){ if(!players_found[id]){ other_players[id].destroy(); delete other_players[id]; } } }) game.world.setBounds(0, 0, WORLD_SIZE.w, WORLD_SIZE.h); game.camera.x = player.sprite.x - WINDOW_WIDTH/2; game.camera.y = player.sprite.y - WINDOW_HEIGHT/2; } function GameLoop(){ player.update(); // Move camera with player var camera_x = player.sprite.x - WINDOW_WIDTH/2; var camera_y = player.sprite.y - WINDOW_HEIGHT/2; game.camera.x += (camera_x - game.camera.x) * 0.08; game.camera.y += (camera_y - game.camera.y) * 0.08; // Update bullets for(var i=0;i<bullet_array.length;i++){ var bullet = bullet_array[i]; bullet.sprite.x += bullet.speed_x; bullet.sprite.y += bullet.speed_y; // Remove if it goes too far off screen if(bullet.sprite.x < -10 || bullet.sprite.x > WORLD_SIZE.w || bullet.sprite.y < -10 || bullet.sprite.y > WORLD_SIZE.h){ bullet.sprite.destroy(); bullet_array.splice(i,1); i--; } } } </script> </body> </html>