return; | 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.fillStyle = "rgb(255, 0, 0)"; | ||||
ctx.beginPath(); | 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.closePath(); | ||||
ctx.fill(); | ctx.fill(); | ||||
}); | }); | ||||
this.raf = null; | this.raf = null; | ||||
this.prevTime = new Date().getTime(); | this.prevTime = new Date().getTime(); | ||||
this.player = null; | this.player = null; | ||||
this.onloss = function(){}; | |||||
this.shake = 0; | this.shake = 0; | ||||
this.shakedec = 0.5; | this.shakedec = 0.5; | ||||
}); | }); | ||||
sock.on("set", (msg) => { | 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) => { | sock.on("despawn", (msg) => { | ||||
if (msg.id == this.id) { | if (msg.id == this.id) { | ||||
this.screenShake(400); | this.screenShake(400); | ||||
setTimeout(() => { | setTimeout(() => { | ||||
alert("You died."); | |||||
this.stop(); | this.stop(); | ||||
this.onloss(); | |||||
}, 1200); | }, 1200); | ||||
} | } | ||||
}); | }); |
let Game = require("./game"); | let Game = require("./game"); | ||||
document.querySelector("#startGameBtn").addEventListener("click", () => { | |||||
let game, sock; | |||||
function startGame() { | |||||
view("game"); | 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", () => { | sock.on("close", () => { | ||||
alert("Server closed."); | alert("Server closed."); | ||||
game.stop(); | game.stop(); | ||||
}); | }); | ||||
}); | |||||
game.onloss = () => view("game-over"); | |||||
} | |||||
document.querySelector("#startGameBtn").addEventListener("click", startGame); | |||||
document.querySelector("#restartGameBtn").addEventListener("click", startGame); |
.view.current { | .view.current { | ||||
display: block; | display: block; | ||||
width: 100%; | 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; | max-width: 900px; | ||||
margin: auto; | margin: auto; | ||||
line-height: 1.5; | 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 { | x-script { | ||||
<canvas id="canvas">Your browser is bad and you should feel bad.</canvas> | <canvas id="canvas">Your browser is bad and you should feel bad.</canvas> | ||||
</div> | </div> | ||||
<div class="view game-over"> | |||||
<h1>Game over.</h1> | |||||
<button id="restartGameBtn">Restart</button> | |||||
</div> | |||||
<script src="conf.js"></script> | <script src="conf.js"></script> | ||||
<script src="js/view.js"></script> | <script src="js/view.js"></script> | ||||
<script src="node_modules/socksugar/client.js"></script> | <script src="node_modules/socksugar/client.js"></script> |