diff --git a/index.html b/index.html
index 74bdce7..7713ef4 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,10 @@
+
+
+
+
diff --git a/js/game.js b/js/game.js
index e0754e1..c47e19b 100644
--- a/js/game.js
+++ b/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 + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap);
+ ctx.fillRect(x + tileGap / 2, 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 + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap, .15);
+ drawRoundRect(ctx, x + tileGap / 2, 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";
diff --git a/js/language.js b/js/language.js
index d04076e..b09c1cd 100644
--- a/js/language.js
+++ b/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",
diff --git a/js/menu.js b/js/menu.js
index f3ad597..9c9d6b5 100644
--- a/js/menu.js
+++ b/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.width = game.g.canvasHold.height;
+ game.g.canvasHold.height = game.g.canvasHold.width = height / game.g.fieldSize.y * 5;
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();