names

es/game.js

 function background(ctx, camera, offset) {
 	if (!background.cache) {
 		let cache = [];
-		let n = 1000;
+		let n = window.innerWidth / 2;
 		for (let i = 0; i < n; ++i) {
 			let parallax = random(5.6, 9);
 			cache.push({
 };
 
 class Player extends Entity {
-	constructor(x, y, id, rot, game) {
+	constructor(x, y, id, rot, name, game) {
 		super(x, y, 25, 60, id, game);
 		this.rot = rot;
 		this.rotVel = 0;
 		this.keys = {};
 		this.health = 0;
+		this.name = name;
 
 		this.thrustAnim = new Animation({
 			img: PlayerImgs.thrust_back,
 		this.thrustAnim.visible = false;
 		game.animate(this.thrustAnim);
 
-		this.thrustSound = document.createElement("audio");
-		this.thrustSound.src = PlayerSounds.thrust;
-		this.thrustSound.loop = true;
-		this.thrustSound.play();
-		this.thrustSound.volume = 0;
+		if (this.id === game.id) {
+			this.thrustSound = document.createElement("audio");
+			this.thrustSound.src = PlayerSounds.thrust;
+			this.thrustSound.loop = true;
+			this.thrustSound.play();
+			this.thrustSound.volume = 0;
+		}
 	}
 
 	draw(ctx, selfId) {
 		ctx.closePath();
 		ctx.fill();
 
+		{
+
+			let h = (this.height/2) + 10;
+			if (this.thrustAnim.visible)
+				h += this.thrustAnim.dheight;
+
+		}
+
 		ctx.rotate(-this.rot);
 
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+		ctx.font = "bold 30px Arial";
+		ctx.strokeStyle = "#000000";
+		ctx.fillStyle = "#ffffff";
+		ctx.lineWidth = 2;
+		ctx.fillText(this.name, 0, 0);
+		ctx.strokeText(this.name, 0, 0);
+
 		//Draw pointers to far away players
 		if (selfId == this.id) {
 			this.game.entities.forEach((e) => {
 		this.keys = obj.keys;
 		this.health = obj.health;
 
+		if (obj.name)
+			this.name = obj.name;
+
 		if (this.id == this.game.id && lastHealth > obj.health) {
 			this.game.screenShake(50);
 		}
 
 		if (this.keys.up) {
 			this.thrustAnim.visible = true;
-			if (this.keys.sprint)
-				this.thrustSound.volume = 1;
-			else
-				this.thrustSound.volume = 0.5;
+
+			if (this.keys.sprint && this.thrustSound)
+				this.thrustSound.volume = 0.6;
+			else if (this.id === this.game.id)
+				this.thrustSound.volume = 0.3;
 		} else {
 			this.thrustAnim.visible = false;
-			this.thrustSound.volume = 0;
+
+			if (this.thrustSound)
+				this.thrustSound.volume = 0;
 		}
 	}
 
 		this.thrustAnim.visible = false;
 		this.thrustAnim.loop = false;
 		this.game.playSound(PlayerSounds.despawn, this.pos);
+		if (this.thrustSound)
+			this.thrustSound.stop();
 	}
 }
 
 function createEntity(obj, game) {
 	if (obj.type == "player") {
-		return new Player(obj.pos.x, obj.pos.y, obj.id, obj.rot, game);
+		return new Player(obj.pos.x, obj.pos.y, obj.id, obj.rot, obj.name, game);
 	} else if (obj.type == "bullet") {
 		return new Bullet(obj.pos.x, obj.pos.y, obj.vel, obj.id, obj.ownerId, game);
 	} else {
-		console.log("Unknown entity type: "+obj.type);
+		throw new Error("Unknown entity type: "+obj.type);
 		return false;
 	}
 }
 
 export default class Game {
-	constructor(sock, canvas) {
+	constructor(sock, canvas, name) {
 		this.sock = sock;
 		this.canvas = canvas;
 		this.ctx = canvas.getContext("2d");
 		this.animations = [];
 
 		sock.on("ready", () => {
-			sock.send("get_id", {}, (err, res) => {
+			sock.send("get_id", {
+				name: name
+			}, (err, res) => {
 				this.id = res.id;
 			});
 		});
 
 		sock.on("set", (msg) => {
 			msg.forEach((m) => {
-				if (!this.entities[m.id]) {
-					let ent = createEntity(m, this);
-					if (ent)
-						this.entities[m.id] = ent;
-				} else {
+				if (this.entities[m.id]) {
 					this.entities[m.id].set(m);
+				} else {
+					if (!m.type)
+						return;
+
+					let ent = createEntity(m, this);
+					this.entities[m.id] = ent;
 				}
 			});
 		});
 
 		sock.on("despawn", (msg) => {
+			console.log(msg);
 			if (!this.entities[msg.id])
 				return;
 
 
 	playSound(url, pos) {
 		let player = this.entities[this.id];
+		if (!player)
+			return;
+
 		let dist = player.pos.clone().sub(pos);
-		console.log(dist, dist.length());
 
 		let sound = document.createElement("audio");
 		sound.src = url;

es/script.js

 
 let game, sock;
 
-function startGame() {
+function startGame(name) {
+	if (typeof name !== "string")
+		name = document.getElementById("playerName").value || "Guest";
+
 	view("game");
-	location.hash = "game";
+	location.hash = name;
 
 	sock = new SockSugar(conf.address);
-	game = new Game(sock, document.getElementById("canvas"));
+	game = new Game(sock, document.getElementById("canvas"), name);
 
 	sock.on("close", () => {
 		alert("Server closed.");
 
 document.querySelector("#startGameBtn").addEventListener("click", startGame);
 document.querySelector("#restartGameBtn").addEventListener("click", () => {
-	location.hash = "game";
 	location.reload();
 });
 document.querySelector("#storyBtn").addEventListener("click", () => {
 });
 
 window.addEventListener("load", () => {
-	if (location.hash.substring(1) === "game") {
-		startGame();
+	let name = location.hash.substring(1);
+	if (name) {
+		startGame(name);
 		console.log("starting");
 	}
 });

index.html

 				width: 100%;
 			}
 
-			.view button {
+			.view button,
+			.view input {
 				font-size: 1.1em;
 				padding: 10px;
 				border-radius: 5px;
 			<p>Umbreosylians are a fickle race. At the first sign of danger, of course, everyone you knew flew away to migrate to a safe place. Except you. You overslept, missed the ships, and are now abandoned.</p>
 
 			<p>You barely managed to enter your ship, lift off, and get to a somewhat safe distance from the planet, before The Deathers destroyed Umbreosyl. You're currently sitting in your space ship, blood boiling, watching the debris from your beloved home planet encounter you from behind, and ships from The Deathers from ahead.</p>
-
+	
+			<input id="playerName" placeholder="Name"></input>
 			<button id="startGameBtn">Start</button>
 		</div>