Function to pause the game with options to resume and reset

index.html

@@ -10,11 +10,12 @@
     <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="score">0</div>
+<div id="score" data-prefix="Score: ">0</div>
 <div id="container">
     <canvas id="tetris" width="240" height="400"></canvas>
     <h1 id="game-title">Tetris.js</h1>
     <button id="game-play">Play!</button>
+    <button id="game-reset">Reset</button>
 </div>
 <div id="controls"></div>
 <script src="language.js"></script>

language.js

@@ -5,7 +5,12 @@ const en = {
     "<br>" +
     "Q/E -> Rotate the tile" +
     "<br>" +
-    "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 = {
     "<br>" +
     "Q/E -> Objekt drehen" +
     "<br>" +
-    "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");
 

menu.js

@@ -1,7 +1,4 @@
-// const canvas = document.getElementById("tetris");
+window.onresize = () => {
-// const context = canvas.getContext('2d');
-
-window.onresize = function (event) {
     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.addEventListener("keydown", (event) => {
-    document.getElementById("game-title").parentNode.removeChild(document.getElementById("game-title"));
+    if(event.keyCode === 32) {
-    document.getElementById("game-play").parentNode.removeChild(document.getElementById("game-play"));
+        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();
-});
+    firstRun = false;
+    switchLang(currentLang);
+}

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 {

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) {
+    outer: for (let y = arena.length - 1; y > 0; --y) {
-        for(let x = 0; x < arena[y].length; ++x) {
+        for (let x = 0; x < arena[y].length; ++x) {
-            if(arena[y][x] === 0) {
+            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 y = 0; y < m.length; ++y) {
-        for(let x = 0; x < m[y].length; ++x) {
+        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) {
+            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 y = 0; y < matrix.length; ++y) {
-        for(let x = 0; x < y; ++x) {
+        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;
+    if(!isPaused) {
-    lastTime = time;
+        const deltaTime = time - lastTime;
+        lastTime = time;
 
-    dropCounter += deltaTime;
+        dropCounter += deltaTime;
-    if(dropCounter > dropInterval) {
+        if (dropCounter > dropInterval) {
-        playerDrop();
+            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();
         }
     });