Eliminated graphic bug that tiny gaps appear between blocks + added new theme "Clean"

index.html

@@ -27,6 +27,10 @@
                 <input id="theme-default" name="theme" data-theme="default" type="radio" checked>
                 <label for="theme-default" class="radio-label" data-string="themeDefault">Default</label>
             </div>
+            <div class="radio">
+                <input type="radio" id="theme-clean" name="theme" data-theme="clean">
+                <label for="theme-clean" class="radio-label" data-string="themeClean">Clean</label>
+            </div>
             <div class="radio">
                 <input id="theme-modern" name="theme" data-theme="modern" type="radio">
                 <label for="theme-modern" class="radio-label" data-string="themeModern">Modern</label>

js/game.js

@@ -38,17 +38,20 @@ class Game {
     }
 
     drawTile(x, y, offset, color, matrix, ctx = this.g.context) {
+        ctx.fillStyle = color;
+        x += offset.x;
+        y += offset.y;
         switch (this.g.theme) {
             case "default":
-                ctx.fillStyle = color;
+                ctx.fillRect(x + tileGap / 2, y + tileGap / 2, 1 - tileGap, 1 - tileGap);
-                ctx.fillRect(x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap);
+                break;
+            case "clean":
+                ctx.fillRect(x, y, 1, 1);
                 break;
             case "modern":
-                ctx.fillStyle = color;
+                drawRoundRect(ctx, x + tileGap / 2, y + tileGap / 2, 1 - tileGap, 1 - tileGap, .15);
-                drawRoundRect(ctx, x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap, .15);
                 break;
             case "snakes":
-                ctx.fillStyle = color;
                 let r1 = .15, // top right
                     r2 = .15, // bottom right
                     r3 = .15, // bottom left
@@ -73,10 +76,10 @@ class Game {
                     r2 = 0;
                     r3 = 0;
                 }
-                drawRoundRect(ctx, x + offset.x, y + offset.y, 1, 1, [r1, r2, r3, r4]);
+                drawRoundRect(ctx, x, y, 1, 1, [r1, r2, r3, r4]);
                 break;
             case "retro":
-                drawReliefRect(ctx, x + offset.x, y + offset.y, 1, 1, .15, color);
+                drawReliefRect(ctx, x, y, 1, 1, .15, color);
                 break;
             default:
                 this.g.theme = "default";

js/language.js

@@ -12,6 +12,7 @@ const en = {
     counterScore: "Score: ",
     counterTime: "Time: ",
     themeDefault: "Default",
+    themeClean: "Clean",
     themeModern: "Modern",
     themeRetro: "Retro",
     themeSnakes: "Snakes",
@@ -36,6 +37,7 @@ const de = {
     counterScore: "Punkte: ",
     counterTime: "Zeit: ",
     themeDefault: "Standard",
+    themeClean: "Glattpoliert",
     themeModern: "Modern",
     themeRetro: "Retro",
     themeSnakes: "Schlangen",

js/menu.js

@@ -23,26 +23,32 @@ function scaleWindow() {
         height = width * (5 / 3);
     }
 
+    width = Math.floor(width);
+    height = Math.floor(height);
+
     canvasContainer.style.height = height + "px";
     canvasContainer.style.width = conWidth + "px";
 
+    const canvasScale = width / game.g.fieldSize.x;
+
     game.g.canvasBg.height = height;
     game.g.canvasBg.width = width;
-    game.g.contextBg.scale(width / game.g.fieldSize.x, height / game.g.fieldSize.y);
+    game.g.contextBg.scale(canvasScale, canvasScale);
 
     game.g.canvas.height = height;
     game.g.canvas.width = width;
-    game.g.context.scale(width / game.g.fieldSize.x, height / game.g.fieldSize.y);
+    game.g.context.scale(canvasScale, canvasScale);
 
-    game.g.canvasHold.height = height / game.g.fieldSize.y * 5;
+    game.g.canvasHold.height = game.g.canvasHold.width = height / game.g.fieldSize.y * 5;
-    game.g.canvasHold.width = game.g.canvasHold.height;
     game.g.canvasHold.style.transform = "translate(-100%, -.2em) translateX(-" + width / 2 + "px)";
-    game.g.contextHold.scale(game.g.canvasHold.width / 6, game.g.canvasHold.width / 6);
+    const contextHoldScale = Math.floor(game.g.canvasHold.width / 6);
+    game.g.contextHold.scale(contextHoldScale, contextHoldScale);
 
     game.g.canvasUpcoming.width = height / game.g.fieldSize.y * 5;
     game.g.canvasUpcoming.height = game.g.canvasUpcoming.width * 3;
     game.g.canvasUpcoming.style.transform = "translate(100%, -.2em) translateX(" + width / 2 + "px)";
-    game.g.contextUpcoming.scale(game.g.canvasUpcoming.width / 6, game.g.canvasUpcoming.width / 6);
+    const contextUpcomingScale = Math.floor(game.g.canvasUpcoming.width / 6);
+    game.g.contextUpcoming.scale(contextUpcomingScale, contextUpcomingScale);
 
     if (!firstRun && game.g.isPaused) {
         game.draw();