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

Fixed all known bugs with scaling the interface

Browse Source
This commit is contained in:
Marcel
2018-02-18 00:15:27 +01:00
parent a9e59eee22
commit ae5e54f971
3 changed files with 78 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -63,10 +63,8 @@
</button> </button>
</div> </div>
<div id="background" class="blurred"> <div id="background" class="blurred">
<div id="game-stats"> <div class="game-stats" id="score" data-string="counterScore" data-string-type="prefix">0</div>
<div id="time" data-string="counterTime" data-string-type="prefix">00:00</div> <div class="game-stats" id="time" data-string="counterTime" data-string-type="prefix">00:00</div>
<div id="score" data-string="counterScore" data-string-type="prefix">0</div>
</div>
<div id="canvas-container"> <div id="canvas-container">
<canvas id="tetris-hold" width="100" height="100"></canvas> <canvas id="tetris-hold" width="100" height="100"></canvas>
<canvas id="tetris-background" width="240" height="400"></canvas> <canvas id="tetris-background" width="240" height="400"></canvas>

30
js/menu.js
View File

@@ -7,15 +7,27 @@ let escState = 1;
window.onresize = () => { window.onresize = () => {
scaleWindow(); scaleWindow();
game.draw();
game.drawArena();
game.drawUpcoming();
game.drawHolding();
}; };
function scaleWindow() { function scaleWindow() {
const canvasContainer = document.getElementById("canvas-container"); const canvasContainer = document.getElementById("canvas-container");
const height = window.innerHeight - 40; let height = .8 * window.innerHeight - 40;
const width = height / (5 / 3); let width = height / (5 / 3);
let conWidth = width + (2 * (height / game.g.fieldSize.y * 5));
const ratio = width / conWidth;
canvasContainer.height = height; if (conWidth > window.innerWidth * .8) {
canvasContainer.width = width + 200; conWidth = window.innerWidth * .8;
width = conWidth * ratio;
height = width * (5 / 3);
}
canvasContainer.style.height = height + "px";
canvasContainer.style.width = conWidth + "px";
game.g.canvasBg.height = height; game.g.canvasBg.height = height;
game.g.canvasBg.width = width; game.g.canvasBg.width = width;
@@ -25,14 +37,14 @@ function scaleWindow() {
game.g.canvas.width = width; game.g.canvas.width = width;
game.g.context.scale(width / game.g.fieldSize.x, height / game.g.fieldSize.y); game.g.context.scale(width / game.g.fieldSize.x, height / game.g.fieldSize.y);
game.g.canvasHold.height = height / game.g.fieldSize.y * 4; game.g.canvasHold.height = height / game.g.fieldSize.y * 5;
game.g.canvasHold.width = game.g.canvasHold.height; game.g.canvasHold.width = game.g.canvasHold.height;
game.g.canvasHold.style.transform = "translateX(-" + ((width / 2) + game.g.canvasHold.width) + "px) translate(-.4em, -.2em)"; 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); game.g.contextHold.scale(game.g.canvasHold.width / 6, game.g.canvasHold.width / 6);
game.g.canvasUpcoming.width = height / game.g.fieldSize.y * 4; game.g.canvasUpcoming.width = height / game.g.fieldSize.y * 5;
game.g.canvasUpcoming.height = game.g.canvasUpcoming.width * 3; game.g.canvasUpcoming.height = game.g.canvasUpcoming.width * 3;
game.g.canvasUpcoming.style.transform = "translateX(" + ((width / 2) + game.g.canvasHold.width) + "px) translate(.4em, -.2em)"; 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); game.g.contextUpcoming.scale(game.g.canvasUpcoming.width / 6, game.g.canvasUpcoming.width / 6);
if (!firstRun && game.g.isPaused) { if (!firstRun && game.g.isPaused) {
@@ -47,7 +59,7 @@ document.addEventListener("keydown", (event) => {
if(firstRun) { if(firstRun) {
initGame(); initGame();
} else { } else {
if(!isPaused){ if (!game.g.isPaused) {
showMenu(); showMenu();
} else { } else {
hideMenu(); hideMenu();

107
style.css
View File

@@ -202,16 +202,19 @@ body {
border: solid .2em #fff; border: solid .2em #fff;
} }
#game-stats { .game-stats {
position: absolute; position: absolute;
top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%) translateX(-30vw); bottom: 3.75vh;
text-align: right; transform: translateX(-50%);
font-size: 2.5vh;
} }
#score { #score {
font-weight: 900; font-weight: 900;
bottom: 0;
top: 2.5vh;
font-size: 5vh;
} }
#time:before, #score:before { #time:before, #score:before {
@@ -320,57 +323,57 @@ body {
transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s transform linear 0.2s, 0.2s -webkit-transform linear 0.2s; transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s transform linear 0.2s, 0.2s -webkit-transform linear 0.2s;
} }
@media (max-width: 1400px) { /*@media (max-width: 1400px) {*/
#tetris, #tetris-background { /*#tetris, #tetris-background {*/
height: 75%; /*height: 75%;*/
} /*}*/
#game-stats { /*#game-stats {*/
top: 10px; /*top: 10px;*/
left: 50%; /*left: 50%;*/
transform: translateX(-50%); /*transform: translateX(-50%);*/
} /*}*/
/**/
#game-stats > div { /*#game-stats > div {*/
display: inline; /*display: inline;*/
} /*}*/
/**/
#time { /*#time {*/
margin-right: 50px; /*margin-right: 50px;*/
} /*}*/
/**/
#controls { /*#controls {*/
top: initial; /*top: initial;*/
bottom: 10px; /*bottom: 10px;*/
left: 50%; /*left: 50%;*/
transform: translateX(-50%); /*transform: translateX(-50%);*/
height: 10%; /*height: 10%;*/
overflow: auto; /*overflow: auto;*/
} /*}*/
/**/
#control-text { /*#control-text {*/
height: 100%; /*height: 100%;*/
} /*}*/
/**/
#language-selector { /*#language-selector {*/
font-size: 20px; /*font-size: 20px;*/
} /*}*/
} /*}*/
@media (max-width: 840px) { @media (max-width: 840px) {
#game-stats { /*#game-stats {*/
font-size: 20px; /*font-size: 20px;*/
text-align: center; /*text-align: center;*/
} /*}*/
/**/
#game-stats > div { /*#game-stats > div {*/
margin-right: 0; /*margin-right: 0;*/
display: block; /*display: block;*/
} /*}*/
/**/
#control-text { /*#control-text {*/
font-size: 14px; /*font-size: 14px;*/
} /*}*/
} }
/* /*