Create a gist now

Instantly share code, notes, and snippets.

Embed
Final client code for step 1 of the Tuts+ Multiplayer Pirate Game Tutorial.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment