New game start on Start New Game button click

Games/Tetris/index.html

@@ -17,6 +17,66 @@
         <div id="left-panel">
             <h1 id="game">TETRIS</h1>
             <h2 id="scoreboard">Score: 0</h2>
+            <script>
+                document.addEventListener("DOMContentLoaded", function() {
+                    const easyButton = document.getElementById("easy-button");
+                    const mediumButton = document.getElementById("medium-button");
+                    const difficultButton = document.getElementById("difficult-button");
+
+                    // Set default active button to Easy
+                    easyButton.classList.add("active");
+
+                    // Add event listeners to buttons
+                    easyButton.addEventListener("click", function() {
+                        setActiveButton(easyButton);
+                    });
+
+                    mediumButton.addEventListener("click", function() {
+                        setActiveButton(mediumButton);
+                    });
+
+                    difficultButton.addEventListener("click", function() {
+                        setActiveButton(difficultButton);
+                    });
+
+                    function setActiveButton(activeButton) {
+                        // Remove active class from all buttons
+                        easyButton.classList.remove("active");
+                        mediumButton.classList.remove("active");
+                        difficultButton.classList.remove("active");
+
+                        // Add active class to the clicked button
+                        activeButton.classList.add("active");
+                    }
+                });
+            </script>
+            <style>
+                #level-selector button.active {
+                    background-color: #4CAF50;
+                    color: white;
+                }
+                #level-selector button {
+                    background-color: #f1f1f1;
+                    color: black;
+                    border: 1px solid #ccc;
+                    padding: 10px;
+                    cursor: pointer;
+                }
+                #level-selector button.active {
+                    background-color: #4CAF50;
+                    color: white;
+                }
+                #easy-button.active {
+                    background-color: #4CAF50;
+                    color: white;
+                }
+        </style>
+            <div id="level-selector">
+                <label for="level">Level:</label>
+                <button id="easy-button">Easy</button>
+                <button id="medium-button">Medium</button>
+                <button id="difficult-button">Difficult</button>
+            </div>
             <button id="start-button">Start New Game</button>
         </div>
         <canvas id="tetris" height="600" width="300"></canvas>

Games/Tetris/script.js

@@ -59,7 +59,7 @@ let grid = generateGrid();
 let fallingPieceObj = null;
 let score = 0;
 
-setInterval(newGameState,500);
+setInterval(newGameState,1200);
 function newGameState(){
     checkGrid();
     if(!fallingPieceObj){
@@ -216,6 +216,8 @@ function renderGame(){
     renderPiece();
 }
 
+
+
 document.addEventListener("keydown",function(e){
     let key = e.key;
     if(key == "ArrowDown"){
@@ -227,4 +229,47 @@ document.addEventListener("keydown",function(e){
     }else if(key == "ArrowUp"){
         rotate();
     }
-})
+})
+
+
+//Sahu: script.js — add this after your other listeners
+document.getElementById('start-button').addEventListener('click', () => {
+  // reset core state, same as on game over
+  grid = generateGrid();        // fresh empty grid
+  score = 0;                    // reset score
+  fallingPieceObj = null;       // force a new random piece in next tick
+  scoreboard.innerHTML = "Score: " + score;
+
+  // optional: clear the canvas immediately
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  // redraw the empty board
+  renderGame();
+})
+
+document.addEventListener('DOMContentLoaded', () => {
+    const levelButtons = document.querySelectorAll('#level-selector button');
+    levelButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            levelButtons.forEach(btn => btn.classList.remove('active'));
+            button.classList.add('active');
+        });
+    });
+});
+
+let gameInterval; // Variable to store the interval ID
+
+document.getElementById('easy-button').addEventListener('click', function() {
+    clearInterval(gameInterval); // Clear any existing interval
+    gameInterval = setInterval(newGameState, 1200); // Set new interval for easy level
+});
+
+document.getElementById('medium-button').addEventListener('click', function() {
+    clearInterval(gameInterval); // Clear any existing interval
+    gameInterval = setInterval(newGameState, 900); // Set new interval for medium level   
+});
+
+document.getElementById('difficult-button').addEventListener('click', function() {
+    clearInterval(gameInterval); // Clear any existing interval
+    gameInterval = setInterval(newGameState, 100); // Set new interval for difficult level 
+});