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();