KingOfDog/tetris.js
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Marcel
2018-02-23 19:55:30 +01:00
parent 9ddcae365d
commit f73ba1e267
4 changed files with 28 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -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>

17
js/game.js
View File

@@ -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";

2
js/language.js
View File

@@ -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",

18
js/menu.js
View File

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