diff --git a/index.html b/index.html index b722920..ed28252 100644 --- a/index.html +++ b/index.html @@ -10,11 +10,12 @@
English
Deutsch
-
0
+
0

Tetris.js

+
diff --git a/language.js b/language.js index 5294c8c..1e9deee 100644 --- a/language.js +++ b/language.js @@ -5,7 +5,12 @@ const en = { "
" + "Q/E -> Rotate the tile" + "
" + - "Down/S -> Drop the tile faster" + "Down/S -> Drop the tile faster", + play: "Play!", + score: "Score: ", + paused: "Paused", + resume: "Resume", + title: "Tetris.js" }; const de = { @@ -15,9 +20,16 @@ const de = { "
" + "Q/E -> Objekt drehen" + "
" + - "Unten/S -> Objekt schneller fallen lassen" + "Unten/S -> Objekt schneller fallen lassen", + play: "Spielen!", + score: "Punkte: ", + paused: "Pausiert", + resume: "Weiterspielen" }; +let currentLang = "en"; +let firstRun = true; + class Language { constructor(lang) { @@ -37,9 +49,18 @@ class Language { } function switchLang(lang) { - const l = new Language(lang); + currentLang = lang; + const l = new Language(currentLang); + document.getElementById("score").setAttribute("data-prefix", l.getStr("score")); document.getElementById("controls").innerHTML = l.getStr("controls"); - switchActiveSelector(lang) + if(firstRun) { + document.getElementById("game-title").innerHTML = l.getStr("title"); + document.getElementById("game-play").innerHTML = l.getStr("play"); + } else { + document.getElementById("game-title").innerHTML = l.getStr("paused"); + document.getElementById("game-play").innerHTML = l.getStr("resume"); + } + switchActiveSelector(currentLang) } function switchActiveSelector(newSelector) { @@ -52,7 +73,7 @@ function switchActiveSelector(newSelector) { document.getElementById("lang-" + newSelector).classList.add("active"); } -switchLang("en"); +switchLang(currentLang); const langSelectors = document.getElementsByClassName("lang"); diff --git a/menu.js b/menu.js index 5877ca3..95ce6c6 100644 --- a/menu.js +++ b/menu.js @@ -1,7 +1,4 @@ -// const canvas = document.getElementById("tetris"); -// const context = canvas.getContext('2d'); - -window.onresize = function (event) { +window.onresize = () => { scaleWindow(); }; @@ -9,12 +6,75 @@ function scaleWindow() { canvas.height = window.innerHeight - 40; canvas.width = canvas.height / (5 / 3); context.scale(canvas.width / fieldSize.x, canvas.height / fieldSize.y); + if(!firstRun && isPaused) { + draw(); + } } scaleWindow(); -document.getElementById("game-play").addEventListener("click", (event) => { - document.getElementById("game-title").parentNode.removeChild(document.getElementById("game-title")); - document.getElementById("game-play").parentNode.removeChild(document.getElementById("game-play")); +document.addEventListener("keydown", (event) => { + if(event.keyCode === 32) { + if(firstRun) { + initGame(); + } else { + if(!isPaused){ + showMenu(); + } else { + hideMenu(); + } + } + } else if(event.keyCode === 27) { + toggleMenu(); + } +}); + +document.getElementById("game-play").addEventListener("click", () => { + if(firstRun) { + initGame(); + } else { + hideMenu(); + } +}); + +document.getElementById("game-reset").addEventListener("click", () => { + firstRun = true; + clearArena(); + hideMenu(); + switchLang(currentLang); + showMenu(); +}); + +function toggleMenu() { + if(!isPaused){ + showMenu(); + } else { + hideMenu(); + } +} + +function showMenu() { + isPaused = true; + document.getElementById("game-title").style.display = "block"; + document.getElementById("game-play").style.display = "block"; + if(!firstRun) { + document.getElementById("game-reset").style.display = "block"; + } +} + +function hideMenu() { + isPaused = false; + document.getElementById("game-title").style.display = "none"; + document.getElementById("game-play").style.display = "none"; + document.getElementById("game-reset").style.display = "none"; + if(!firstRun) { + update(lastTime); + } +} + +function initGame() { + hideMenu(); startGame(); -}); \ No newline at end of file + firstRun = false; + switchLang(currentLang); +} \ No newline at end of file diff --git a/style.css b/style.css index c7e098f..3211639 100644 --- a/style.css +++ b/style.css @@ -35,12 +35,13 @@ body { transform: translate(-50%, -25%); } -#game-play { +#game-play, #game-reset { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - padding: 20px 100px; + width: 300px; + height: 75px; font-size: 30px; box-shadow: none; color: #ffff; @@ -51,6 +52,12 @@ body { cursor: pointer; } +#game-reset { + display: none; + background-color: #FF0D72; + transform: translate(-50%, -50%) translateY(85px); +} + #game-play:hover, #game-play:active, #game-play:focus { outline: none; box-shadow: 3px 4px 0 3px rgba(0,0,0,0.2); @@ -77,7 +84,7 @@ body { } #score:before { - content: 'Score: '; + content: attr(data-prefix); } #controls { diff --git a/tetris.js b/tetris.js index 41e8874..74965a2 100644 --- a/tetris.js +++ b/tetris.js @@ -3,13 +3,17 @@ const context = canvas.getContext('2d'); const fieldSize = {x: 12, y: 20}; +let isPaused = true; +function clearArena() { + context.clearRect(0, 0, canvas.width, canvas.height); +} function arenaSweep() { let rowCount = 1; - outer: for(let y = arena.length - 1; y > 0; --y) { - for(let x = 0; x < arena[y].length; ++x) { - if(arena[y][x] === 0) { + outer: for (let y = arena.length - 1; y > 0; --y) { + for (let x = 0; x < arena[y].length; ++x) { + if (arena[y][x] === 0) { continue outer; } } @@ -27,9 +31,9 @@ function arenaSweep() { function collide(arena, player) { const [m, o] = [player.matrix, player.pos]; - for(let y = 0; y < m.length; ++y) { - for(let x = 0; x < m[y].length; ++x) { - if(m[y][x] !== 0 && (arena[y + o.y] && arena[y + o.y][x + o.x]) !== 0) { + for (let y = 0; y < m.length; ++y) { + for (let x = 0; x < m[y].length; ++x) { + if (m[y][x] !== 0 && (arena[y + o.y] && arena[y + o.y][x + o.x]) !== 0) { return true; } } @@ -39,14 +43,14 @@ function collide(arena, player) { function createMatrix(w, h) { const matrix = []; - while(h--) { + while (h--) { matrix.push(new Array(w).fill(0)); } return matrix; } function createPiece(type) { - switch(type) { + switch (type) { case 'T': return [ [0, 0, 0], @@ -114,7 +118,7 @@ function drawMatrix(matrix, offset) { function merge(arena, player) { player.matrix.forEach((row, y) => { row.forEach((value, x) => { - if(value !== 0) { + if (value !== 0) { arena[y + player.pos.y][x + player.pos.x] = value; } }); @@ -123,7 +127,7 @@ function merge(arena, player) { function playerDrop() { player.pos.y++; - if(collide(arena, player)) { + if (collide(arena, player)) { player.pos.y--; merge(arena, player); playerReset(); @@ -135,7 +139,7 @@ function playerDrop() { function playerMove(dir) { player.pos.x += dir; - if(collide(arena, player)) { + if (collide(arena, player)) { player.pos.x -= dir; } } @@ -145,7 +149,7 @@ function playerReset() { player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]); player.pos.y = 0; player.pos.x = (arena[0].length / 2 | 0) - (player.matrix[0].length / 2 | 0); - if(collide(arena, player)) { + if (collide(arena, player)) { arena.forEach(row => row.fill(0)); player.score = 0; dropInterval = 1000; @@ -158,10 +162,10 @@ function playerRotate(dir) { const pos = player.pos.x; let offset = 1; - while(collide(arena, player )) { + while (collide(arena, player)) { player.pos.x += offset; offset = -(offset + (offset > 0 ? 1 : -1)); - if(offset > player.matrix[0].length) { + if (offset > player.matrix[0].length) { rotate(player.matrix, -dir); player.pos.x = pos; return; @@ -170,8 +174,8 @@ function playerRotate(dir) { } function rotate(matrix, dir) { - for(let y = 0; y < matrix.length; ++y) { - for(let x = 0; x < y; ++x) { + for (let y = 0; y < matrix.length; ++y) { + for (let x = 0; x < y; ++x) { [ matrix[x][y], matrix[y][x] @@ -182,7 +186,7 @@ function rotate(matrix, dir) { } } - if(dir > 0) { + if (dir > 0) { matrix.forEach(row => row.reverse()); } else { matrix.reverse(); @@ -193,17 +197,20 @@ let dropCounter = 0; let dropInterval = 1000; let lastTime = 0; + function update(time = 0) { - const deltaTime = time - lastTime; - lastTime = time; + if(!isPaused) { + const deltaTime = time - lastTime; + lastTime = time; - dropCounter += deltaTime; - if(dropCounter > dropInterval) { - playerDrop(); + dropCounter += deltaTime; + if (dropCounter > dropInterval) { + playerDrop(); + } + + draw(); + requestAnimationFrame(update); } - - draw(); - requestAnimationFrame(update); } function updateScore() { @@ -256,7 +263,7 @@ const keys = { document.addEventListener('keydown', event => { Object.keys(keys).map((objKey, index) => { const keyBind = keys[objKey]; - if(keyBind.keys.includes(event.keyCode)) { + if (keyBind.keys.includes(event.keyCode)) { keyBind.action(); } });