Skip to content

Instantly share code, notes, and snippets.

@OmarShehata
Created June 5, 2017 06:40

Revisions

  1. OmarShehata created this gist Jun 5, 2017.
    208 changes: 208 additions & 0 deletions index.html
    Original 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>