added status hud at bottom right + speed in tps

Nathan DECHER 5 years ago
parent 5775f6c96c
commit 462668e5cd
  1. 8
      public/index.html
  2. 35
      src/js/main.js
  3. 4
      src/js/snek.js
  4. 17
      src/less/hud.less

@ -24,7 +24,13 @@
<main> <main>
<nav></nav> <nav></nav>
<canvas class="hidden"></canvas> <canvas class="hidden"></canvas>
<div id="hud" class="hidden"></div> <div id="hud" class="hidden">
<div class="status">
<span class="speed"></span>
<span class="score"></span>
<span class="time"></span>
</div>
</div>
</main> </main>
<footer> <footer>
<img src="assets/icon32.png"> <img src="assets/icon32.png">

@ -26,7 +26,7 @@
let currentGame=null; let currentGame=null;
// forward-declare functions // forward-declare functions
let resizeCanvas, getLevel, startGame, stopGame, handleWin, handleDeath, menu, help, settings, restart; let resizeCanvas, getLevel, startGame, stopGame, handleWin, handleDeath, menu, help, settings, restart, updateHud;
// handle window resize and fullscreen // handle window resize and fullscreen
resizeCanvas=() => { resizeCanvas=() => {
@ -126,6 +126,7 @@
if(evt=='tick') { if(evt=='tick') {
input.framefn(); input.framefn();
snek.handleInputs(input.inputs); snek.handleInputs(input.inputs);
updateHud();
} else if(evt=='win') { } else if(evt=='win') {
handleWin(snek); handleWin(snek);
} else if(evt=='die') { } else if(evt=='die') {
@ -195,9 +196,10 @@
let popup=new Popup("Finished!"); let popup=new Popup("Finished!");
popup.addStrong("You won!"); popup.addStrong("You won!");
popup.addContent({ popup.addContent({
"Time": snek.playTime/1000+'s', "Time": snek.endPlayTime/1000+'s',
"Score": snek.score, "Score": snek.score,
"Final length": snek.length "Final length": snek.length,
"Final speed": snek.speed+'tps'
}); });
popup.buttons={ popup.buttons={
retry: "Retry", retry: "Retry",
@ -233,9 +235,10 @@
let popup=new Popup("Finished!"); let popup=new Popup("Finished!");
popup.addStrong("You died..."); popup.addStrong("You died...");
popup.addContent({ popup.addContent({
"Time": snek.playTime/1000+'s', "Time": snek.endPlayTime/1000+'s',
"Score": snek.score, "Score": snek.score,
"Final length": snek.length "Final length": snek.length,
"Final speed": snek.speed+'tps'
}); });
popup.buttons={ popup.buttons={
retry: "Retry", retry: "Retry",
@ -254,6 +257,28 @@
} }
}; };
// draw status hud
updateHud=() => {
// stay safe
if(!currentGame) return;
// get the actual elements
const speedDisplay=document.querySelector('#hud .speed');
const scoreDisplay=document.querySelector('#hud .score');
const timeDisplay=document.querySelector('#hud .time');
// rpad is useful
const rpad=(n, digits=2, pad=' ') =>
((''+n).length>=digits)?(''+n):(rpad(pad+n, digits, pad));
// actually do the hud
speedDisplay.innerText=rpad(currentGame.speed, 2, '0')+'tps';
scoreDisplay.innerText=currentGame.score;
timeDisplay.innerText=rpad(Math.floor(currentGame.playTime/60000), 2, '0')+
':'+rpad(Math.floor(currentGame.playTime/1000)%60, 2, '0')+
':'+rpad(currentGame.playTime%1000, 3, '0');
};
// quick restart // quick restart
restart=() => { restart=() => {
if(currentGame && currentGame.playing) { if(currentGame && currentGame.playing) {

@ -129,6 +129,10 @@ class SnekGame {
return Date.now()-this.firstStep; return Date.now()-this.firstStep;
} }
get speed() {
return Math.round(1000/this.delay);
}
getTilesOfType(type) { getTilesOfType(type) {
return this return this
.world .world

@ -38,4 +38,21 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
opacity: .5; opacity: .5;
} }
.status {
bottom: 1rem;
right: 1rem;
padding: .2rem;
font-size: 1.4rem;
.score::before {
content: '\1f34e';
}
.time::before {
content: '\23f1';
}
.speed::before {
content: '\1f684';
}
}
} }

Loading…
Cancel
Save