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

Add holding canvas and improve UI layouts

Browse Source
This commit is contained in:
Marcel
2018-01-24 19:42:59 +01:00
parent 535037b69e
commit bb1c24b7e0
4 changed files with 227 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@@ -15,12 +15,25 @@
</defs>
</svg>
<div id="menu">
<div id="language-selector">
<div id="lang-en" class="lang active" data-lang="en">English</div>
<div id="lang-de" class="lang" data-lang="de">Deutsch</div>
</div>
<div id="theme-selector">
<div id="menu-content">
<div id="language-selector">
<div id="lang-en" class="lang active" data-lang="en">English</div>
<div id="lang-de" class="lang" data-lang="de">Deutsch</div>
</div>
<div id="theme-selector">
<div class="radio">
<input id="theme-default" name="theme" type="radio" checked>
<label for="theme-default" class="radio-label">Default</label>
</div>
<div class="radio">
<input id="theme-modern" name="theme" type="radio">
<label for="theme-modern" class="radio-label">Modern</label>
</div>
<div class="radio">
<input id="theme-snakes" name="theme" type="radio">
<label for="theme-snakes" class="radio-label">Snakes</label>
</div>
</div>
</div>
</div>
<div id="menu-opener">
@@ -33,8 +46,12 @@
<div id="time">00:00</div>
<div id="score" data-prefix="Score: ">0</div>
</div>
<canvas id="tetris-background" width="240" height="400"></canvas>
<canvas id="tetris" width="240" height="400"></canvas>
<div id="canvas-container">
<canvas id="tetris-hold" width="100" height="100"></canvas>
<canvas id="tetris-background" width="240" height="400"></canvas>
<canvas id="tetris" width="240" height="400"></canvas>
<canvas id="tetris-upcoming" width="100" height="300"></canvas>
</div>
<div id="controls">
<div id="control-text"></div>
</div>

24
js/menu.js
View File

@@ -3,13 +3,25 @@ window.onresize = () => {
};
function scaleWindow() {
bgCanvas.height = window.innerHeight - 40;
bgCanvas.width = bgCanvas.height / (5 / 3);
bgContext.scale(bgCanvas.width / fieldSize.x, bgCanvas.height / fieldSize.y);
const canvasContainer = document.getElementById("canvas-container");
const height = window.innerHeight - 40;
const width = height / (5 / 3);
canvas.height = window.innerHeight - 40;
canvas.width = canvas.height / (5 / 3);
context.scale(canvas.width / fieldSize.x, canvas.height / fieldSize.y);
canvasContainer.height = height;
canvasContainer.width = width + 200;
bgCanvas.height = height;
bgCanvas.width = width;
bgContext.scale(width / fieldSize.x, height / fieldSize.y);
canvas.height = height;
canvas.width = width;
context.scale(width / fieldSize.x, height / fieldSize.y);
holdCanvas.height = height / fieldSize.y * 4;
holdCanvas.width = holdCanvas.height;
holdCanvas.style.transform = "translateX(-" + ((width / 2) + holdCanvas.height) + "px) translate(-.4em, -.2em)";
holdContext.scale(holdCanvas.width / 6, holdCanvas.width / 6);
if(!firstRun && isPaused) {
draw();

69
js/tetris.js
View File

@@ -4,6 +4,12 @@ const context = canvas.getContext('2d');
const bgCanvas = document.getElementById('tetris-background');
const bgContext = bgCanvas.getContext('2d');
const holdCanvas = document.getElementById('tetris-hold');
const holdContext = holdCanvas.getContext('2d');
const upcomingCanvas = document.getElementById('tetris-upcoming');
const upcomingContext = upcomingCanvas.getContext('2d');
const fieldSize = {x: 12, y: 20};
const tileGap = .05;
@@ -134,26 +140,32 @@ function createPiece(type) {
}
function draw() {
// bgContext.fillStyle = '#000';
// bgContext.fillRect(0, 0, canvas.width, canvas.height);
context.clearRect(0, 0, canvas.width, canvas.height);
// clearScreen();
// drawMatrix(arena, {x: 0, y: 0}, true);
drawMatrix(player.matrix, player.pos);
}
function drawArena() {
bgContext.fillStyle = '#000';
bgContext.fillRect(0, 0, canvas.width, canvas.height);
drawMatrix(arena, {x: 0, y: 0}, true);
drawMatrix(arena, {x: 0, y: 0}, bgContext);
}
function drawMatrix(matrix, offset, isBg) {
function drawHolding() {
holdContext.clearRect(0, 0, holdCanvas.width, holdCanvas.height);
console.log(holdingTile, holdingTile.length, holdCanvas.width / (holdingTile.length + 2));
// holdContext.scale(holdCanvas.width / (holdingTile.length + 2), holdCanvas.width / (holdingTile.length + 2));
const tile = removeEmpty(holdingTile);
const x = 3 - (tile[0].length / 2);
const y = 3 - (tile.length / 2);
console.log(x, y);
drawMatrix(tile, {x: x, y: y}, holdContext);
}
function drawMatrix(matrix, offset, useContext = context) {
matrix.forEach((row, y) => {
row.forEach((value, x) => {
if (value !== 0) {
drawTile(x, y, offset, colors[value], matrix, isBg);
drawTile(x, y, offset, colors[value], matrix, useContext);
}
});
});
@@ -203,13 +215,12 @@ function drawRoundRect(ctx, x, y, w, h, r) {
ctx.fill();
}
function drawTile(x, y, offset, color, matrix, isBg) {
let ctx = context;
if (isBg) {
ctx = bgContext;
}
function drawTile(x, y, offset, color, matrix, useContext = context) {
const ctx = useContext;
switch (theme) {
case "default":
if (ctx === holdContext)
console.log(ctx, color, x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap);
ctx.fillStyle = color;
ctx.fillRect(x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap);
break;
@@ -218,6 +229,7 @@ function drawTile(x, y, offset, color, matrix, isBg) {
drawRoundRect(ctx, x + offset.x + tileGap / 2, y + offset.y + tileGap / 2, 1 - tileGap, 1 - tileGap, .15);
break;
case "snakes":
console.log(ctx);
ctx.fillStyle = color;
let r1 = .15, // top right
r2 = .15, // bottom right
@@ -246,6 +258,8 @@ function drawTile(x, y, offset, color, matrix, isBg) {
drawRoundRect(ctx, x + offset.x, y + offset.y, 1, 1, [r1, r2, r3, r4]);
break;
default:
theme = "default";
drawTile(x, y, offset, color, matrix, useContext);
break;
}
}
@@ -320,6 +334,7 @@ function playerHold() {
holdingTile = [player.matrix, player.matrix = holdingTile][0];
playerReset(true, false);
}
drawHolding();
}
function playerMove(dir) {
@@ -385,6 +400,34 @@ function prerenderPieces() {
});
}
function removeEmpty(matrix) {
const tempMatrix = rotate(matrix, 1);
matrix.forEach((row, y) => {
let onlyZeroes = true;
row.forEach((value, x) => {
if (value > 0) {
onlyZeroes = false;
}
});
if (onlyZeroes) {
matrix.splice(y, 1);
}
});
tempMatrix.forEach((col, x) => {
let onlyZeroes = true;
col.forEach((value, y) => {
if (value > 0) {
onlyZeroes = false;
}
});
if (onlyZeroes)
matrix.forEach((row, y) => {
matrix[y].splice(x, 1);
});
});
return matrix;
}
function rotate(matrix, dir) {
for (let y = 0; y < matrix.length; ++y) {
for (let x = 0; x < y; ++x) {

182
style.css
View File

@@ -8,13 +8,64 @@ body {
color: #fff;
}
#language-selector {
.menu {
-webkit-transition: 0.1s -webkit-transform linear;
transition: 0.1s -webkit-transform linear;
transition: 0.1s transform linear;
transition: 0.1s transform linear, 0.1s -webkit-transform linear;
position: absolute;
right: 15px;
top: 20px;
font-size: 14px;
font-weight: 300;
background: 0;
float: left;
height: 2.7rem;
width: 3.5rem;
z-index: 1;
outline: 0;
padding: 0;
border: 0;
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5);
}
#menu {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .75);
transform: translateX(-100%);
-webkit-transition: transform .5s;
-moz-transition: transform .5s;
-ms-transition: transform .5s;
-o-transition: transform .5s;
transition: transform .5s;
z-index: 100;
top: 0;
}
#menu-content {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: .6em;
}
#menu-content > * {
padding: 20px;
border-bottom: 1px solid #444;
}
.menu-open #menu {
transform: none;
}
#menu-opener {
position: absolute;
left: 10px;
top: 10px;
z-index: 101;
}
.lang {
@@ -81,6 +132,15 @@ body {
filter: url(#f1);
}
#canvas-container {
height: 936px;
width: 761px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#tetris, #tetris-background {
position: absolute;
left: 50%;
@@ -100,6 +160,18 @@ body {
z-index: 0;
}
#tetris-hold {
position: absolute;
left: 50%;
border: solid .2em #fff;
}
#tetris-upcoming {
position: absolute;
right: 0;
transform: translateX(.2em);
}
#game-stats {
position: absolute;
top: 50%;
@@ -122,6 +194,7 @@ body {
left: 50%;
transform: translate(-50%, -50%) translateX(30vw);
font-size: 20px;
max-width: 20vw;
}
#footer {
@@ -160,31 +233,6 @@ body {
color: rgba(255, 255, 255, 1);
}
#menu-opener {
display: none;
}
.menu {
-webkit-transition: 0.1s -webkit-transform linear;
transition: 0.1s -webkit-transform linear;
transition: 0.1s transform linear;
transition: 0.1s transform linear, 0.1s -webkit-transform linear;
position: absolute;
background: 0;
float: left;
height: 2.7rem;
width: 3.5rem;
z-index: 1;
outline: 0;
padding: 0;
border: 0;
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5);
}
.bar, .bar::before, .bar::after {
-webkit-transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s -webkit-transform linear;
transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s -webkit-transform linear;
@@ -293,31 +341,57 @@ body {
#control-text {
font-size: 14px;
}
}
#menu {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .75);
transform: translateX(-100%);
-webkit-transition: transform .5s;
-moz-transition: transform .5s;
-ms-transition: transform .5s;
-o-transition: transform .5s;
transition: transform .5s;
z-index: 100;
top: 0;
}
/*
Radio Buttons
*/
.menu-open #menu {
transform: none;
}
.radio {
margin: 0.5rem;
}
#menu-opener {
position: absolute;
display: block;
left: 10px;
top: 10px;
z-index: 101;
}
.radio input[type="radio"] {
position: absolute;
opacity: 0;
}
.radio input[type="radio"] + .radio-label:before {
content: '';
background: #f4f4f4;
border-radius: 100%;
border: 1px solid #b4b4b4;
display: inline-block;
width: 1.4em;
height: 1.4em;
position: relative;
top: -0.2em;
margin-right: 1em;
vertical-align: top;
cursor: pointer;
text-align: center;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}
.radio input[type="radio"]:checked + .radio-label:before {
background-color: #3197EE;
-webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type="radio"]:focus + .radio-label:before {
outline: none;
border-color: #3197EE;
}
.radio input[type="radio"]:disabled + .radio-label:before {
-webkit-box-shadow: inset 0 0 0 4px #f4f4f4;
box-shadow: inset 0 0 0 4px #f4f4f4;
border-color: #b4b4b4;
background: #b4b4b4;
}
.radio input[type="radio"] + .radio-label:empty:before {
margin-right: 0;
}