diff --git a/index.html b/index.html
index 568826c..4dea2c8 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,7 @@
+
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