Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
321 lines (265 sloc) 6.67 KB
<!DOCTYPE HTML>
<html>
<head>
<title>eSpacewar</title>
<style type="text/css">
body {
font-family: sans-serif;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var ws;
var x=0;
var y=0;
var heading = 0;
var enemies = [];
var torps = [];
var fire = false;
var left = false;
var right = false;
var thrust = false;
var torpRotation = 0;
$(document).keydown(function(e) {
switch(e.keyCode) {
case 32:
fire = true;
break;
case 38:
thrust = true;
break;
case 40:
thrust = true;
break;
case 37:
left = true;
break;
case 39:
right = true;
break;
default:
break;
}
send();
});
$(document).keyup(function(e) {
switch(e.keyCode) {
case 32:
fire = false;
break;
case 38:
thrust = false;
break;
case 40:
thrust = false;
break;
case 37:
left = false;
break;
case 39:
right = false;
break;
default:
break;
}
send();
});
function send() {
var p = "";
if(left)
p = p + "10";
else if(right)
p = p + "01";
else
p = p + "00";
if(thrust)
p = p + "1";
else
p = p + "0";
if(fire)
p = p + "1";
else
p = p + "0";
if(ws != undefined)
ws.send(p);
fire = false;
}
function openWs()
{
var playerName = $("#playerName").val();
console.log("Opening WS");
if (!("WebSocket" in window)) {
alert("This browser does not support WebSockets");
return;
}
var url = "ws://" + document.domain + ":8080/ws?player=" + encodeURIComponent(playerName);
console.log("Connecting to " + url + " for websocket");
ws = new WebSocket(url);
ws.onopen = function() {
$("#loginBox").remove();
console.log('Connected');
console.log('starting control loop');
window.setInterval("send()", 10);
var ctx = document.getElementById("space").getContext("2d");
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, 800, 500);
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
var payload = JSON.parse(evt.data);
if(payload.error != undefined)
alert(payload.error);
if(payload.score != undefined) {
updateScores(payload.score);
}
if(payload.player != undefined) {
payload.player.x = payload.player.x + 400;
payload.player.y = payload.player.y + 250;
updatePos(payload.player);
}
if(payload.enemies != undefined) {
clearEnemies(enemies);
enemies = payload.enemies;
enemies.forEach(function(e) {
e.x = e.x + 400;
e.y = e.y + 250;
})
drawEnemies(enemies);
}
if(payload.torps != undefined) {
clearTorps(torps);
torpRotation = torpRotation + 20;
if(torpRotation > 350)
torpRotation = 0;
torps = payload.torps;
torps.forEach(function(t) {
t.x = t.x + 400;
t.y = t.y + 250;
})
drawTorps(torps);
}
};
ws.onclose = function()
{
console.log('Connection closed');
};
}
function clearEnemies(enem) {
var c = document.getElementById("space");
var ctx = c.getContext("2d");
ctx.fillStyle = "#000000";
if(enem.length > 0)
enem.forEach(function(e) {
ctx.fillRect(e.x-10, e.y-10, 20, 20);
});
}
function drawEnemies(enems) {
var c = document.getElementById("space");
var ctx = c.getContext("2d");
enems.forEach(function(enem) {
ctx.save();
ctx.fillStyle = "#ffffff";
ctx.translate(enem.x, enem.y);
ctx.rotate(enem.z * Math.PI / 180);
drawShip(ctx);
ctx.restore();
});
}
function drawTorps(t) {
var c = document.getElementById("space");
var ctx = c.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.strokeStyle = "#ff0000";
t.forEach(function(torp) {
ctx.save();
ctx.translate(torp.x, torp.y);
ctx.rotate(torpRotation * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(5, 0);
ctx.lineTo(-5, 0);
ctx.moveTo(0, 5);
ctx.lineTo(0, -5);
ctx.closePath();
ctx.stroke();
ctx.restore();
});
}
function clearTorps(t) {
var c = document.getElementById("space");
var ctx = c.getContext("2d");
ctx.fillStyle = "#000000";
if(t.length > 0)
t.forEach(function(torp) {
ctx.fillRect(torp.x - 6, torp.y - 6, 12, 12);
});
}
function updatePos(payload) {
var c = document.getElementById("space");
var ctx = c.getContext("2d");
ctx.fillStyle = "#000000";
ctx.fillRect(x-10, y-10, 20, 20);
heading = payload.z;
x = payload.x;
y = payload.y;
ctx.save();
ctx.fillStyle = "#00ff00";
ctx.translate(x, y);
ctx.rotate(heading * Math.PI / 180);
drawShip(ctx);
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.fillStyle = "#ffff00";
ctx.arc(400, 250, 20, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
ctx.restore();
}
function drawShip(ctx) {
ctx.beginPath();
ctx.moveTo(5, 0);
ctx.beginPath();
ctx.lineTo(-6, 6);
ctx.lineTo(-6, -6);
ctx.lineTo(6, 0);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#ffffff";
ctx.moveTo(6, 0);
ctx.lineTo(-6, 0);
ctx.closePath();
ctx.stroke();
}
function updateScores(scores) {
newTable = "<table id='scores'>"
scores.forEach(function(s) {
newTable = newTable + "<tr><td>" + s.name + "</td><td>" + s.score + "</td></tr>"
});
newTable = newTable + "</table>";
$("#scores").remove();
$("#scoresDiv").append(newTable);
}
</script>
</head>
<body>
<div id="sse">
<span id="loginBox">
Username: <input type=text id="playerName"/>
<a href="#" onClick="openWs();">Start Playing</a><br/>
</span>
left = rotate left<br/>
right = rotate right<br/>
up/down = thrust<br/>
space = fire torpedo<br/>
</div>
<div>
<canvas id="space" width="800" height="500" style="border:1px solid #000000; float:left;"></canvas>
<div id="scoresDiv">
<h1>Scores</h1>
<table id="scores"/>
</div>
</div>
</body>
</html>