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");
-// 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"));
-    startGame();
+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();
+    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,7 +3,11 @@ 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;
@@ -193,7 +197,9 @@ let dropCounter = 0;
 let dropInterval = 1000;
 
 let lastTime = 0;
+
 function update(time = 0) {
+    if(!isPaused) {
         const deltaTime = time - lastTime;
         lastTime = time;
 
@@ -205,6 +211,7 @@ function update(time = 0) {
         draw();
         requestAnimationFrame(update);
     }
+}
 
 function updateScore() {
     document.getElementById('score').innerText = player.score.toString();