added status hud at bottom right + speed in tps

main
Codinget 5 years ago
parent 1b2938b807
commit 42e2520c4f
  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>
<nav></nav>
<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>
<footer>
<img src="assets/icon32.png">

@ -26,7 +26,7 @@
let currentGame=null;
// 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
resizeCanvas=() => {
@ -126,6 +126,7 @@
if(evt=='tick') {
input.framefn();
snek.handleInputs(input.inputs);
updateHud();
} else if(evt=='win') {
handleWin(snek);
} else if(evt=='die') {
@ -195,9 +196,10 @@
let popup=new Popup("Finished!");
popup.addStrong("You won!");
popup.addContent({
"Time": snek.playTime/1000+'s',
"Time": snek.endPlayTime/1000+'s',
"Score": snek.score,
"Final length": snek.length
"Final length": snek.length,
"Final speed": snek.speed+'tps'
});
popup.buttons={
retry: "Retry",
@ -233,9 +235,10 @@
let popup=new Popup("Finished!");
popup.addStrong("You died...");
popup.addContent({
"Time": snek.playTime/1000+'s',
"Time": snek.endPlayTime/1000+'s',
"Score": snek.score,
"Final length": snek.length
"Final length": snek.length,
"Final speed": snek.speed+'tps'
});
popup.buttons={
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
restart=() => {
if(currentGame && currentGame.playing) {

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

@ -38,4 +38,21 @@
transform: translate(-50%, -50%);
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