multiplayer-canvas/client/index.html

<style type="text/css">
html,body{
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}
#game-container {
	width: 100%;
	height: 100%;
	z-index: 1;
}
#leaderboard {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.5);
}

#eventticker {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 10;
	background-color: rgba(255, 255, 255, 0.5);
	overflow: hidden;
	display: block;
}

#eventticker p {
	display: inline;
}
p {
	margin: 0px;
	padding: 0px;
}
</style>


<div id="game-container"></div>

<script type="text/javascript" src="system.js"></script>
<script type="text/javascript" src="keyboardinput.js"></script>
<script type="text/javascript" src="player.js"></script>
<script type="text/javascript" src="examplegame.js"></script>

<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function(event) {

	window.WebSocket = window.WebSocket || window.MozWebSocket;
	//var socketString = "ws://" + window.location.hostname + ":" + window.location.port;
	var socketString = "ws://" + window.location.hostname + ":8080";

	var connection = new WebSocket(socketString);

	connection.onopen = function () {
	};

	connection.onerror = function (error) {
		console.error(error);
	};

	connection.onmessage = function (message) {
		try {
			var json = JSON.parse(message.data);
			system.handleServerMessage(json);
		} catch (e) {
			console.error("This doesn't look like a valid JSON ", message.data);
			console.error(e, e.stack);
			return;
		}
	};

	connection.onclose = function () {
		system.game.disconnect();
	};

window.system = new System();
system.create("game-container", new ExampleGame(connection), "#000000");
});


</script>
<script>

</script>