diff --git a/Sudoku_Game_8x8/index.html b/Sudoku_Game_8x8/index.html index 6583108..fad612e 100644 --- a/Sudoku_Game_8x8/index.html +++ b/Sudoku_Game_8x8/index.html @@ -3,7 +3,7 @@ - + 8x8 Sudoku Solver @@ -12,16 +12,24 @@

8x8 Sudoku Solver

- - +
+
+ +
+ +
+ Time Remaining
10:00 +
+
- Lives: 5 + Lives: ❤️❤️❤️
-
+
diff --git a/Sudoku_Game_8x8/script.js b/Sudoku_Game_8x8/script.js index 52c1eb3..da0663f 100644 --- a/Sudoku_Game_8x8/script.js +++ b/Sudoku_Game_8x8/script.js @@ -19,8 +19,9 @@ const difficulties = [ ], ]; -let lives = 5; -let wrongInputs = 0; +let lives = 3; +let totalSeconds = 600; // 10 minutes in seconds +let timerInterval; document.addEventListener('DOMContentLoaded', function () { const gridSize = 8; @@ -55,6 +56,7 @@ document.addEventListener('DOMContentLoaded', function () { } changeDifficulty(0); + updateTimer(); }); function changeDifficulty(difficulty) { @@ -95,10 +97,11 @@ function handleInput(event) { event.target.classList.add("output-cell"); event.target.style.color = "red"; if (!isNaN(parsedValue)) { - wrongInputs++; + document.getElementById(`h-${lives}`).style.display="none"; + lives--; } - document.getElementById("lives").textContent = `Lives: ${lives - wrongInputs}`; - if (wrongInputs >= 5) { + + if (lives<=0) { gameOver(); } } @@ -223,9 +226,16 @@ function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } function resetGrid() { - lives = 5; - document.getElementById("lives").textContent = `Lives: ${lives}`; - wrongInputs = 0; + clearInterval(timerInterval); + totalSeconds = (3 - currentDifficulty) * 400; + updateTimer(); + timerInterval = setInterval(updateTimer, 1000); + + lives = 3; + document.getElementById(`h-1`).style.display=""; + document.getElementById(`h-2`).style.display=""; + document.getElementById(`h-3`).style.display=""; + const gridSize = 8; console.log(currentDifficulty); const puzzle = difficulties[currentDifficulty][Math.floor(Math.random() * difficulties[currentDifficulty].length)]; @@ -251,8 +261,28 @@ function gridReset() { } function complete() { - alert("Congratulation !!! You Solved The Game") + alert("Congratulation !!! You Solved The Game"); + clearInterval(timerInterval); } +function updateTimer() { + let timerElement = document.getElementById('timer'); + let minutes, seconds; + console.log(totalSeconds); + minutes = Math.floor(totalSeconds / 60); + seconds = totalSeconds % 60; + timerElement.textContent = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; + + if (totalSeconds <= 0) { + clearInterval(timerInterval); + alert("Time's UP"); + resetGrid(); + } else { + totalSeconds--; + } +} + +timerInterval = setInterval(updateTimer, 1000); // Update the timer every second + // Call gridReset to attach the event listener to the resetButton gridReset(); \ No newline at end of file diff --git a/Sudoku_Game_8x8/style.css b/Sudoku_Game_8x8/style.css index 6f0e034..dee4475 100644 --- a/Sudoku_Game_8x8/style.css +++ b/Sudoku_Game_8x8/style.css @@ -39,10 +39,10 @@ table { } .cell { - width: 70px; - height: 70px; + width: 50px; + height: 50px; text-align: center; - font-size: 50px; + font-size: 40px; border: 1px solid #999; transform: all 0.3s ease-in-out; background: rgb(244, 213, 99); @@ -142,4 +142,39 @@ select,option{ font-size: 1.3rem; border-radius: 10px; padding: 2px; +} + +#hearts{ + display: flex; +} + +#choose-size{ + margin: 10px; + background-color: rgb(255, 175, 47); + padding:5px ; + border-radius: 10px; + line-height: 1.7rem; +} + +#timer-container{ + font-size: 1.1rem; + margin: 10px; + background-color: rgb(248, 255, 47); + padding:5px ; + border-radius: 10px; + line-height: 1.8rem; +} +#timer-container span{ + font-size: 1.4rem; + background-color: white; + padding: 3px; + border-radius: 5px; +} + +@media (max-width:500px){ + .cell{ + height: 10vw; + width: 10vw; + font-size: 7vw; + } } \ No newline at end of file diff --git a/Sudoku_Game_9x9/index.html b/Sudoku_Game_9x9/index.html index bb691a2..fb0efc8 100644 --- a/Sudoku_Game_9x9/index.html +++ b/Sudoku_Game_9x9/index.html @@ -3,7 +3,7 @@ - + 9x9 Sudoku Solver @@ -12,16 +12,24 @@

9x9 Sudoku Solver

- - +
+
+ +
+ +
+ Time Remaining
10:00 +
+
- Lives: 5 + Lives: ❤️❤️❤️
-
+
diff --git a/Sudoku_Game_9x9/script.js b/Sudoku_Game_9x9/script.js index cf108a8..7437bd6 100644 --- a/Sudoku_Game_9x9/script.js +++ b/Sudoku_Game_9x9/script.js @@ -19,8 +19,9 @@ const difficulties = [ ], ]; -let lives = 5; -let wrongInputs = 0; +let lives = 3; +let totalSeconds = 600; // 10 minutes in seconds +let timerInterval; document.addEventListener('DOMContentLoaded', function () { const gridSize = 9; @@ -55,6 +56,7 @@ document.addEventListener('DOMContentLoaded', function () { } changeDifficulty(0); + updateTimer(); }); function changeDifficulty(difficulty) { @@ -95,10 +97,10 @@ function handleInput(event) { event.target.classList.add("output-cell"); event.target.style.color = "red"; if (!isNaN(parsedValue)) { - wrongInputs++; + document.getElementById(`h-${lives}`).style.display="none"; + lives--; } - document.getElementById("lives").textContent = `Lives: ${lives - wrongInputs}`; - if (wrongInputs >= 5) { + if (lives<=0) { gameOver(); } } @@ -223,9 +225,14 @@ function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } function resetGrid() { - lives = 5; - document.getElementById("lives").textContent = `Lives: ${lives}`; - wrongInputs = 0; + clearInterval(timerInterval); + totalSeconds = (3 - currentDifficulty) * 600; + updateTimer(); + timerInterval = setInterval(updateTimer, 1000); + lives = 3; + document.getElementById(`h-1`).style.display=""; + document.getElementById(`h-2`).style.display=""; + document.getElementById(`h-3`).style.display=""; const gridSize = 9; console.log(currentDifficulty); const puzzle = difficulties[currentDifficulty][Math.floor(Math.random() * difficulties[currentDifficulty].length)]; @@ -251,8 +258,28 @@ function gridReset() { } function complete() { - alert("Congratulation !!! You Solved The Game") + alert("Congratulation !!! You Solved The Game"); + clearInterval(timerInterval); } +function updateTimer() { + let timerElement = document.getElementById('timer'); + let minutes, seconds; + console.log(totalSeconds); + minutes = Math.floor(totalSeconds / 60); + seconds = totalSeconds % 60; + timerElement.textContent = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; + + if (totalSeconds <= 0) { + clearInterval(timerInterval); + alert("Time's UP"); + resetGrid(); + } else { + totalSeconds--; + } +} + +timerInterval = setInterval(updateTimer, 1000); // Update the timer every second + // Call gridReset to attach the event listener to the resetButton gridReset(); \ No newline at end of file diff --git a/Sudoku_Game_9x9/style.css b/Sudoku_Game_9x9/style.css index 28f806a..26f7423 100644 --- a/Sudoku_Game_9x9/style.css +++ b/Sudoku_Game_9x9/style.css @@ -142,4 +142,39 @@ select,option{ font-size: 1.3rem; border-radius: 10px; padding: 2px; +} + +#hearts{ + display: flex; +} + +#choose-size{ + margin: 10px; + background-color: rgb(255, 175, 47); + padding:5px ; + border-radius: 10px; + line-height: 1.7rem; +} + +#timer-container{ + font-size: 1.1rem; + margin: 10px; + background-color: rgb(248, 255, 47); + padding:5px ; + border-radius: 10px; + line-height: 1.8rem; +} +#timer-container span{ + font-size: 1.4rem; + background-color: white; + padding: 3px; + border-radius: 5px; +} + +@media (max-width:800px){ + .cell{ + height: 8vw; + width: 8vw; + font-size: 6vw; + } } \ No newline at end of file diff --git a/css_files/sudocu_game_4x4.css b/css_files/sudocu_game_4x4.css index dd544d8..2975727 100644 --- a/css_files/sudocu_game_4x4.css +++ b/css_files/sudocu_game_4x4.css @@ -127,7 +127,6 @@ label{ font-size: 1.5rem; padding:5px ; border-radius: 10px; - margin-left: 50px; } .info{ @@ -143,4 +142,31 @@ select,option{ font-size: 1.3rem; border-radius: 10px; padding: 2px; +} + +#hearts{ + display: flex; +} + +#choose-size{ + margin: 10px; + background-color: rgb(255, 175, 47); + padding:5px ; + border-radius: 10px; + line-height: 1.7rem; +} + +#timer-container{ + font-size: 1.1rem; + margin: 10px; + background-color: rgb(248, 255, 47); + padding:5px ; + border-radius: 10px; + line-height: 1.8rem; +} +#timer-container span{ + font-size: 1.4rem; + background-color: white; + padding: 3px; + border-radius: 5px; } \ No newline at end of file diff --git a/css_files/sudoku_game_6x6.css b/css_files/sudoku_game_6x6.css index 90f2e85..e8920ca 100644 --- a/css_files/sudoku_game_6x6.css +++ b/css_files/sudoku_game_6x6.css @@ -11,10 +11,10 @@ body { align-items: center; justify-content: center; flex-direction: column; - height: 100vh; background-size: cover; background-position: center center; background-repeat: no-repeat; + min-height: 100vh; } h1 { @@ -126,7 +126,6 @@ label { font-size: 1.5rem; padding: 5px; border-radius: 10px; - margin-left: 50px; } .info { @@ -145,4 +144,39 @@ option { font-size: 1.3rem; border-radius: 10px; padding: 2px; -} \ No newline at end of file +} + +#hearts{ + display: flex; +} + +#choose-size{ + margin: 10px; + background-color: rgb(255, 175, 47); + padding:5px ; + border-radius: 10px; + line-height: 1.7rem; +} + +#timer-container{ + font-size: 1.1rem; + margin: 10px; + background-color: rgb(248, 255, 47); + padding:5px ; + border-radius: 10px; + line-height: 1.8rem; +} +#timer-container span{ + font-size: 1.4rem; + background-color: white; + padding: 3px; + border-radius: 5px; +} + +@media (max-width:500px){ + .cell{ + height: 14vw; + width: 14vw; + font-size: 11vw; + } +} diff --git a/html_files/sudoku_game_4x4.html b/html_files/sudoku_game_4x4.html index fd08d34..61fade3 100644 --- a/html_files/sudoku_game_4x4.html +++ b/html_files/sudoku_game_4x4.html @@ -1,43 +1,49 @@ - - - - - - 4x4 Sudoku Solver + + + + 4x4 Sudoku Solver -

Sudoku Solver

-
- - -
- Lives: 3 -
-
-
-
- - - - -
-
-
- - -
- - +

Sudoku Solver

+
+
+
+ +
+ +
+ Time Remaining
10:00 +
+ +
+ Lives: ❤️❤️❤️ +
+
+
+ + + + + +
+
+
+ + +
+ + \ No newline at end of file diff --git a/html_files/sudoku_game_6x6.html b/html_files/sudoku_game_6x6.html index ed3e295..1b51129 100644 --- a/html_files/sudoku_game_6x6.html +++ b/html_files/sudoku_game_6x6.html @@ -1,11 +1,9 @@ - - - + 6x6 Sudoku Solver @@ -14,16 +12,24 @@

Sudoku Solver

- - +
+
+ +
+ +
+ Time Remaining
10:00 +
+
- Lives: 3 + Lives: ❤️❤️❤️
-
+
diff --git a/javascript/sudocu_game_4x4.js b/javascript/sudocu_game_4x4.js index e5bb6f0..ef007e7 100644 --- a/javascript/sudocu_game_4x4.js +++ b/javascript/sudocu_game_4x4.js @@ -19,8 +19,8 @@ const difficulties = [ ]; let lives = 3; -let wrongInputs = 0; - +let totalSeconds = 600; // 10 minutes in seconds +let timerInterval; document.addEventListener('DOMContentLoaded', function () { const gridSize = 4; const solveButton = document.getElementById("solve-btn"); @@ -54,6 +54,7 @@ document.addEventListener('DOMContentLoaded', function () { } changeDifficulty(0); + updateTimer(); }); function changeDifficulty(difficulty) { @@ -94,10 +95,10 @@ function handleInput(event) { event.target.classList.add("output-cell"); event.target.style.color = "red"; if (!isNaN(parsedValue)) { - wrongInputs++; + document.getElementById(`h-${lives}`).style.display="none"; + lives--; } - document.getElementById("lives").textContent = `Lives: ${lives - wrongInputs}`; - if (wrongInputs >= 3) { + if (lives<=0) { gameOver(); } } @@ -156,7 +157,7 @@ function solveSudokuHelper(board) { for (let row = 0; row < gridSize; row++) { for (let col = 0; col < gridSize; col++) { - if(board[row][col]>4||board[row][col]<0){ + if (board[row][col] > 4 || board[row][col] < 0) { return false; } if (board[row][col] === 0) { @@ -182,7 +183,7 @@ function solveSudokuHelper(board) { } function isValidMove(board, row, col, num) { - if(num>4||num<1){ + if (num > 4 || num < 1) { return false; } const gridSize = 4; @@ -224,8 +225,14 @@ function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } function resetGrid() { + clearInterval(timerInterval); + totalSeconds = (3 - currentDifficulty) * 120; + updateTimer(); + timerInterval = setInterval(updateTimer, 1000); lives = 3; - wrongInputs = 0; + document.getElementById(`h-1`).style.display=""; + document.getElementById(`h-2`).style.display=""; + document.getElementById(`h-3`).style.display=""; const gridSize = 4; console.log(currentDifficulty); const puzzle = difficulties[currentDifficulty][Math.floor(Math.random() * difficulties[currentDifficulty].length)]; @@ -251,8 +258,28 @@ function gridReset() { } function complete() { - alert("Congratulation !!! You Solved The Game") + alert("Congratulation !!! You Solved The Game"); + clearInterval(timerInterval); } +function updateTimer() { + let timerElement = document.getElementById('timer'); + let minutes, seconds; + console.log(totalSeconds); + minutes = Math.floor(totalSeconds / 60); + seconds = totalSeconds % 60; + timerElement.textContent = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; + + if (totalSeconds <= 0) { + clearInterval(timerInterval); + alert("Time's UP"); + resetGrid(); + } else { + totalSeconds--; + } +} + +timerInterval = setInterval(updateTimer, 1000); // Update the timer every second + // Call gridReset to attach the event listener to the resetButton -gridReset(); +gridReset(); \ No newline at end of file diff --git a/javascript/sudoku_game_6x6.js b/javascript/sudoku_game_6x6.js index 75cd9b7..f424eec 100644 --- a/javascript/sudoku_game_6x6.js +++ b/javascript/sudoku_game_6x6.js @@ -19,7 +19,8 @@ const difficulties = [ ]; let lives = 3; -let wrongInputs = 0; +let totalSeconds = 600; // 10 minutes in seconds +let timerInterval; document.addEventListener('DOMContentLoaded', function () { const gridSize = 6; @@ -54,6 +55,7 @@ document.addEventListener('DOMContentLoaded', function () { } changeDifficulty(0); + updateTimer(); }); function changeDifficulty(difficulty) { @@ -94,10 +96,10 @@ function handleInput(event) { event.target.classList.add("output-cell"); event.target.style.color = "red"; if (!isNaN(parsedValue)) { - wrongInputs++; + document.getElementById(`h-${lives}`).style.display="none"; + lives--; } - document.getElementById("lives").textContent = `Lives: ${lives - wrongInputs}`; - if (wrongInputs >= 3) { + if (lives<=0) { gameOver(); } } @@ -224,8 +226,14 @@ function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } function resetGrid() { + clearInterval(timerInterval); + totalSeconds = (3 - currentDifficulty) * 300; + updateTimer(); + timerInterval = setInterval(updateTimer, 1000); lives = 3; - wrongInputs = 0; + document.getElementById(`h-1`).style.display=""; + document.getElementById(`h-2`).style.display=""; + document.getElementById(`h-3`).style.display=""; const gridSize = 6; console.log(currentDifficulty); const puzzle = difficulties[currentDifficulty][Math.floor(Math.random() * difficulties[currentDifficulty].length)]; @@ -251,8 +259,28 @@ function gridReset() { } function complete() { - alert("Congratulation !!! You Solved The Game") + alert("Congratulation !!! You Solved The Game"); + clearInterval(timerInterval); } +function updateTimer() { + let timerElement = document.getElementById('timer'); + let minutes, seconds; + console.log(totalSeconds); + minutes = Math.floor(totalSeconds / 60); + seconds = totalSeconds % 60; + timerElement.textContent = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; + + if (totalSeconds <= 0) { + clearInterval(timerInterval); + alert("Time's UP"); + resetGrid(); + } else { + totalSeconds--; + } +} + +timerInterval = setInterval(updateTimer, 1000); // Update the timer every second + // Call gridReset to attach the event listener to the resetButton gridReset();