diff --git a/index.html b/index.html index 568826c..4dea2c8 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,7 @@
Deutsch
+
0:00
0
diff --git a/menu.js b/menu.js index 44b76e9..6248014 100644 --- a/menu.js +++ b/menu.js @@ -87,6 +87,30 @@ function fadeBlurOut() { } } +function scoreUpdateAni() { + const scoreEl = document.getElementById("score"); + const nativeTransform = "translate(-50%, -50%)"; + + const scale = 1.5; + const finalScale = 1; + let currentScale = 1; + let upscaling = true; + + const id = setInterval(frame, 5); + function frame() { + if(currentScale <= scale && upscaling) { + currentScale += 0.02; + scoreEl.style.transform = nativeTransform + " scale(" + currentScale + ")"; + } else if (currentScale >= finalScale) { + upscaling = false; + currentScale -= 0.02; + scoreEl.style.transform = nativeTransform + " scale(" + currentScale + ")"; + } else { + clearInterval(id); + } + } +} + function showMenu() { isPaused = true; document.getElementById("game-title").style.opacity = "1"; diff --git a/style.css b/style.css index 1a867e7..063d4b8 100644 --- a/style.css +++ b/style.css @@ -65,7 +65,7 @@ body { #game-play:hover, #game-play:active, #game-play:focus { outline: none !important; - box-shadow: 3px 4px 0 3px rgba(0,0,0,0.2) !important; + box-shadow: 3px 4px 0 3px rgba(0, 0, 0, 0.2) !important; } #background { @@ -111,4 +111,4 @@ body { font-size: 20px; font-weight: 300; transform: translate(0, -50%); -} \ No newline at end of file +} diff --git a/tetris.js b/tetris.js index b926485..f6aea1d 100644 --- a/tetris.js +++ b/tetris.js @@ -5,6 +5,8 @@ const fieldSize = {x: 12, y: 20}; let isPaused = true; +let startTime = 0; + function clearScreen() { context.clearRect(0, 0, canvas.width, canvas.height); } @@ -198,6 +200,8 @@ let dropInterval = 1000; let lastTime = 0; +const timeEl = document.getElementById("time"); + function update(time = 0) { if(!isPaused) { const deltaTime = time - lastTime; @@ -208,12 +212,24 @@ function update(time = 0) { playerDrop(); } + timeEl.innerHTML = formatMillis(Date.now() - startTime); + draw(); requestAnimationFrame(update); } } +function formatMillis(millis) { + const d = new Date(1000*Math.round(millis / 1000)); + return (d.getUTCMinutes() < 10 ? "0" : "") + d.getUTCMinutes() + ":" + (d.getUTCSeconds() < 10 ? "0" : "") + d.getUTCSeconds(); +} + +let lastScore = 0; function updateScore() { + if(lastScore !== player.score) { + scoreUpdateAni(); + lastScore = player.score; + } document.getElementById('score').innerText = player.score.toString(); } @@ -274,4 +290,5 @@ function startGame() { playerReset(); update(); updateScore(); + startTime = Date.now(); } \ No newline at end of file