Parcourir la source

Adding the level to the screen

Patrick Augusto il y a 4 ans
Parent
commit
09aaa5a793
3 fichiers modifiés avec 27 ajouts et 3 suppressions
  1. 10 1
      Pixel.css
  2. 1 0
      Pixel.html
  3. 16 2
      Pixel.js

+ 10 - 1
Pixel.css

@@ -5,6 +5,15 @@ html, body {
     background-color: darkgreen;
 }
 
-canvas {
+#canvas {
     background-color: palevioletred;
+}
+
+#level {
+    position: fixed;
+    left: 5px;
+    bottom: 5px;
+    font-size: 30;
+    color: black;
+    font-weight: 800;
 }

+ 1 - 0
Pixel.html

@@ -7,6 +7,7 @@
     </head>
     <body>
         <canvas id="canvas" tabindex="0"></canvas>
+        <span id="level">0</span>
         <script>main();</script>
     </body>
 </html>

+ 16 - 2
Pixel.js

@@ -67,12 +67,19 @@ const draw = function(ctx, csize, isize, url, level, images, coords) {
 }
 
 const draw_ = function(ctx, isize, url, level, images, id, coords) {
+    if (level != canvas.level) {
+        return images;
+    }
+
     const decimal = parseInt(id, 2);
+    const index = images.findIndex((i) => (url + id) == i.image.src);
 
     if (!isInsideSquare(coords, canvas.vertices, isize)) {
+        if (index != -1) {
+            images.splice(index);
+        }
         return images;
     } else {
-        const index = images.findIndex((i) => (url + id) == i.image.src);
         const target = images[index];
 
         if (target) {
@@ -180,7 +187,14 @@ const main = function() {
 
     document.addEventListener("wheel", (e) => {
         if (c === document.activeElement) {
-            canvas.level += e.deltaY > 0 ? 1 : -1;
+            if (e.deltaY > 0) {
+                canvas.level += 1;
+            } else {
+                if (canvas.level > 0) {
+                    canvas.level += -1;
+                }
+            }
+            document.getElementById("level").innerText = canvas.level;
             init(c);
         }
     });