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>
</div>
<div id="background" class="blurred">
<div id="game-stats">
<div 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 class="game-stats" id="score" data-string="counterScore" data-string-type="prefix">0</div>
<div class="game-stats" id="time" data-string="counterTime" data-string-type="prefix">00:00</div>
<div id="canvas-container">
<canvas id="tetris-hold" width="100" height="100"></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 = () => {
scaleWindow();
game.draw();
game.drawArena();
game.drawUpcoming();
game.drawHolding();
};
function scaleWindow() {
const canvasContainer = document.getElementById("canvas-container");
const height = window.innerHeight - 40;
const width = height / (5 / 3);
let height = .8 * window.innerHeight - 40;
let width = height / (5 / 3);
let conWidth = width + (2 * (height / game.g.fieldSize.y * 5));
const ratio = width / conWidth;
canvasContainer.height = height;
canvasContainer.width = width + 200;
if (conWidth > window.innerWidth * .8) {
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.width = width;
@@ -25,14 +37,14 @@ function scaleWindow() {
game.g.canvas.width = width;
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.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.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.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);
if (!firstRun && game.g.isPaused) {
@@ -47,7 +59,7 @@ document.addEventListener("keydown", (event) => {
if(firstRun) {
initGame();
} else {
if(!isPaused){
if (!game.g.isPaused) {
showMenu();
} else {
hideMenu();

107
style.css
View File

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