@@ -284,11 +284,11 @@ class Player extends Entity { | |||
return; | |||
} | |||
let pos = e.pos.clone().sub(this.pos).normalize().scale(100); | |||
let pos = e.pos.clone().sub(this.pos).normalize().scale(130); | |||
ctx.fillStyle = "rgb(255, 0, 0)"; | |||
ctx.beginPath(); | |||
ctx.arc(pos.x, pos.y, 10, 0, 2*Math.PI); | |||
ctx.arc(pos.x, pos.y, 5, 0, 2*Math.PI); | |||
ctx.closePath(); | |||
ctx.fill(); | |||
}); | |||
@@ -365,6 +365,7 @@ export default class Game { | |||
this.raf = null; | |||
this.prevTime = new Date().getTime(); | |||
this.player = null; | |||
this.onloss = function(){}; | |||
this.shake = 0; | |||
this.shakedec = 0.5; | |||
@@ -387,13 +388,15 @@ export default class Game { | |||
}); | |||
sock.on("set", (msg) => { | |||
if (!this.entities[msg.id]) { | |||
let ent = createEntity(msg, this); | |||
if (ent) | |||
this.entities[msg.id] = ent; | |||
} else { | |||
this.entities[msg.id].set(msg); | |||
} | |||
msg.forEach((m) => { | |||
if (!this.entities[m.id]) { | |||
let ent = createEntity(m, this); | |||
if (ent) | |||
this.entities[m.id] = ent; | |||
} else { | |||
this.entities[m.id].set(m); | |||
} | |||
}); | |||
}); | |||
sock.on("despawn", (msg) => { | |||
@@ -405,8 +408,8 @@ export default class Game { | |||
if (msg.id == this.id) { | |||
this.screenShake(400); | |||
setTimeout(() => { | |||
alert("You died."); | |||
this.stop(); | |||
this.onloss(); | |||
}, 1200); | |||
} | |||
}); |
@@ -1,12 +1,20 @@ | |||
let Game = require("./game"); | |||
document.querySelector("#startGameBtn").addEventListener("click", () => { | |||
let game, sock; | |||
function startGame() { | |||
view("game"); | |||
let sock = new SockSugar(conf.address); | |||
let game = new Game(sock, document.getElementById("canvas")); | |||
sock = new SockSugar(conf.address); | |||
game = new Game(sock, document.getElementById("canvas")); | |||
sock.on("close", () => { | |||
alert("Server closed."); | |||
game.stop(); | |||
}); | |||
}); | |||
game.onloss = () => view("game-over"); | |||
} | |||
document.querySelector("#startGameBtn").addEventListener("click", startGame); | |||
document.querySelector("#restartGameBtn").addEventListener("click", startGame); |
@@ -19,13 +19,40 @@ | |||
.view.current { | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.view.pre.current { | |||
.view button { | |||
font-size: 1.1em; | |||
padding: 10px; | |||
border-radius: 5px; | |||
color: #ccc; | |||
background-color: #333; | |||
border: 2px solid #222; | |||
} | |||
.view button:hover { | |||
background-color: #343434; | |||
border-color: #555; | |||
} | |||
.view.pre.current, | |||
.view.game-over.current { | |||
position: absolute; | |||
max-width: 900px; | |||
margin: auto; | |||
line-height: 1.5; | |||
top: 50%; | |||
left: 50%; | |||
-webkit-transform: translate(-50%, -50%); | |||
-moz-transform: translate(-50%, -50%); | |||
-ms-transform: translate(-50%, -50%); | |||
-o-transform: translate(-50%, -50%); | |||
transform: translate(-50%, -50%); | |||
} | |||
.view.game-over.current { | |||
color: #bb5545; | |||
text-align: center; | |||
} | |||
x-script { | |||
@@ -48,6 +75,11 @@ | |||
<canvas id="canvas">Your browser is bad and you should feel bad.</canvas> | |||
</div> | |||
<div class="view game-over"> | |||
<h1>Game over.</h1> | |||
<button id="restartGameBtn">Restart</button> | |||
</div> | |||
<script src="conf.js"></script> | |||
<script src="js/view.js"></script> | |||
<script src="node_modules/socksugar/client.js"></script> |