added score display and level system

NHV33 · Jan 18, 2024 · 47d4239 · 47d4239
1 parent a002a6e
commit 47d4239
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
     </head>
     <body>
         <div class="container flex col align-c">
+            <canvas id="canvas"></canvas>
             <div id="start-message" class="flex col justify-c align-c">
                 <div id="start-message-text">
                     Press </br>

diff --git a/script.js b/script.js
@@ -149,20 +149,29 @@ function mainLoop() {
     // update();
 }
 
+function calculateLevel() {
+    return Math.floor(rowsCleared / 10) + 1;
+}
+
+function updateInterval() {
+    const startValue = 33;
+    return startValue - calculateLevel() - 1;
+}
+
 let ticks = 0;
-let updateInterval = 33; // smaller is faster
 let rowsCleared = 0;
 
 function resetGame() {
     console.log("game reset");
+    gameover = false;
     ticks = 0;
-    rowsCleared = 0;
     score = 0;
-    gameover = false;
+    rowsCleared = 0;
+    drawStats(0, 1);
     // clock
     setInterval(() => {
         if (inPlay) {
-            if (ticks % updateInterval === 0 ) {
+            if (ticks % updateInterval() === 0) {
                 mainLoop();
             }
             update();
@@ -342,12 +351,13 @@ function shiftDown(rowNumber) {
     }
 }
 
-const rowScore = 100;
 
 function setScore(rowCount) {
+    const rowScore = 100;
     rowsCleared += rowCount;
     score += rowScore * rowCount * rowCount;
-    console.log(score);
+    // console.log(score);
+    drawStats(score, calculateLevel());
 }
 
 function shiftDownByRows(rows2clear) {
@@ -413,4 +423,16 @@ document.addEventListener('keydown', (event) => {
     if (event.key === "ArrowRight") {
         movePiece(activePiece, "right");
     }
-});
+});
+
+function drawStats(score, level) {
+    const canvas = document.getElementById("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.font = "4vmin monospace";
+    // ctx.textAlign = "center";
+    ctx.textBaseline = "top";
+    ctx.fillStyle = "white";
+    ctx.fillText(`Level: ${level}`, 0, 10);
+    ctx.fillText(`Score: ${score}`, 0, 40);
+  }
diff --git a/styles.css b/styles.css
@@ -7,6 +7,15 @@ body {
     overflow: hidden;
 }
 
+#canvas {
+    width: calc(var(--grid-size) * 1.3 * 9 );
+    /* height: calc(var(--grid-size) * 1.3 * 3 ); */
+    /* border: 1px solid white; */
+    /* margin: auto; */
+    position: absolute;
+    z-index: 2;
+}
+
 #end-zone {
     /* justify-self: start; */
     /* align-self: start; */