diff --git a/README.md b/README.md index 407c6853..77723ec3 100644 --- a/README.md +++ b/README.md @@ -279,6 +279,7 @@ ________________________________________________________________________________ | 216 | [Arkanoid_Game](.SinglePlayer%20-%20Games/Arkanoid_Game) | | 217 | [Brick_Breaker_Game](.SinglePlayer%20-%20Games/Brick_Breaker_Game) | | 218 | [Bash_Mole_Game](.SinglePlayer%20-%20Games/Bash_Mole_Game) | +| 220 | [Jigsaw_Sudoku_Game](.SinglePlayer%20-%20Games/Jigsaw_Sudoku_Game) | diff --git a/SinglePlayer - Games/Banner - image/jigsaw-sudoku.png b/SinglePlayer - Games/Banner - image/jigsaw-sudoku.png new file mode 100644 index 00000000..a0852512 Binary files /dev/null and b/SinglePlayer - Games/Banner - image/jigsaw-sudoku.png differ diff --git a/SinglePlayer - Games/Jigsaw_Sudoku_Game/README.md b/SinglePlayer - Games/Jigsaw_Sudoku_Game/README.md new file mode 100644 index 00000000..0bd9eb4c --- /dev/null +++ b/SinglePlayer - Games/Jigsaw_Sudoku_Game/README.md @@ -0,0 +1,21 @@ +## Jigsaw Sudoku Game + +# Description +Jigsaw Sudoku is an enhanced version of the classic Sudoku puzzle game. Unlike standard Sudoku, Jigsaw Sudoku features irregularly shaped regions instead of the traditional 3x3 blocks. This variation adds an extra layer of challenge and excitement to the game. + +# Features +- **Irregular Regions:** Play with Sudoku grids where regions have irregular shapes but still contain exactly 9 cells. +- **Interactive Interface:** User-friendly interface to play and solve puzzles. +- **Validation:** Check if the filled puzzle is solved correctly. +- **Solve Function:** Automatically fill in the solution if needed. + +# Usage +- Open the game by opening index.html in a web browser. +- The Sudoku grid is displayed with irregularly shaped regions. Each cell in the grid can contain a number from 1 to 9. +- Click on a cell in the grid to activate it. +- Type a number from 1 to 9 into the cell. +- Click the **Check** button to validate the current entries in the grid. +- Click the **Solve** button to automatically fill in the cells with the correct solution. +- Click the **Reset** button to clear all entries and start fresh. + +# Enjoy Playing!🥳 \ No newline at end of file diff --git a/SinglePlayer - Games/Jigsaw_Sudoku_Game/index.html b/SinglePlayer - Games/Jigsaw_Sudoku_Game/index.html new file mode 100644 index 00000000..e33d4ace --- /dev/null +++ b/SinglePlayer - Games/Jigsaw_Sudoku_Game/index.html @@ -0,0 +1,20 @@ + + + + + + Jigsaw Sudoku + + + +
+
+
+ + + +
+
+ + + diff --git a/SinglePlayer - Games/Jigsaw_Sudoku_Game/script.js b/SinglePlayer - Games/Jigsaw_Sudoku_Game/script.js new file mode 100644 index 00000000..2a198324 --- /dev/null +++ b/SinglePlayer - Games/Jigsaw_Sudoku_Game/script.js @@ -0,0 +1,136 @@ +const initialBoard = [ + [0, 9, 5, 8, 4, 0, 0, 7, 3], + [0, 0, 0, 3, 0, 0, 0, 9, 0], + [0, 0, 0, 0, 0, 1, 0, 2, 5], + [0, 4, 0, 0, 9, 0, 5, 0, 0], + [0, 0, 0, 5, 0, 0, 4, 0, 0], + [0, 0, 0, 0, 3, 5, 0, 0, 0], + [0, 0, 4, 0, 0, 3, 0, 0, 0], + [2, 1, 6, 0, 0, 0, 0, 5, 8], + [9, 3, 0, 2, 5, 0, 1, 0, 0] +]; + +const solutionBoard = [ + [1, 9, 5, 8, 4, 2, 6, 7, 3], + [6, 5, 2, 3, 1, 7, 8, 9, 4], + [3, 8, 9, 4, 6, 1, 7, 2, 5], + [7, 4, 1, 6, 9, 8, 5, 3, 2], + [8, 7, 3, 5, 2, 9, 4, 6, 1], + [4, 2, 7, 1, 3, 5, 9, 8, 6], + [5, 6, 4, 7, 8, 3, 2, 1, 9], + [2, 1, 6, 9, 7, 4, 3, 5, 8], + [9, 3, 8, 2, 5, 6, 1, 4, 7] +]; + +const regions = [ + [1, 2, 2, 2, 2, 2, 3, 3, 3], + [1, 1, 1, 2, 2, 2, 3, 3, 3], + [1, 1, 1, 5, 2, 7, 7, 7, 3], + [4, 1, 5, 5, 5, 5, 7, 7, 3], + [4, 1, 5, 5, 6, 6, 7, 7, 3], + [4, 5, 5, 6, 6, 6, 7, 7, 8], + [4, 6, 6, 6, 6, 8, 8, 8, 8], + [4, 4, 4, 9, 9, 9, 9, 8, 8], + [4, 4, 9, 9, 9, 9, 9, 8, 8] +]; + +function createBoard() { + const boardElement = document.getElementById('sudoku-board'); + boardElement.innerHTML = ''; + + for (let i = 0; i < 9; i++) { + for (let j = 0; j < 9; j++) { + const cell = document.createElement('div'); + cell.className = 'cell'; + + // Add region class based on the regions array + const regionClass = 'region' + regions[i][j]; + cell.classList.add(regionClass); + + // Add border attributes where needed + if (j === 0 || regions[i][j] !== regions[i][j - 1]) { + cell.setAttribute('data-border-left', ''); + } + if (j === 8 || regions[i][j] !== regions[i][j + 1]) { + cell.setAttribute('data-border-right', ''); + } + if (i === 0 || regions[i][j] !== regions[i - 1][j]) { + cell.setAttribute('data-border-top', ''); + } + if (i === 8 || regions[i][j] !== regions[i + 1][j]) { + cell.setAttribute('data-border-bottom', ''); + } + + // Create input element + const input = document.createElement('input'); + input.type = 'text'; + input.maxLength = 1; + input.oninput = function() { + this.value = this.value.replace(/[^1-9]/g, ''); + }; + + // Set initial value and disable if needed + if (initialBoard[i][j] !== 0) { + input.value = initialBoard[i][j]; + input.disabled = true; + } + + cell.appendChild(input); + boardElement.appendChild(cell); + } + } +} + +function checkSolution() { + const cells = document.querySelectorAll('.cell input'); + let isCorrect = true; + + cells.forEach((cell, index) => { + const row = Math.floor(index / 9); + const col = index % 9; + + const inputValue = parseInt(cell.value) || 0 + + if (inputValue !== solutionBoard[row][col] && inputValue !== 0) { + isCorrect = false + } + }); + if (isCorrect) { + alert('Go ahead!'); + } + else { + alert('Some cells are incorrect. Keep trying!'); + } +} + +function solve(){ + const cells = document.querySelectorAll('.cell input'); + + cells.forEach((cell, index) => { + const row = Math.floor(index / 9); + const col = index % 9; + + const initialValue = initialBoard[row][col]; + // Set the value from solutionBoard if the cell is empty + if (initialValue === 0) { + cell.value = solutionBoard[row][col]; + } + }); +} + +function reset(){ + const cells = document.querySelectorAll('.cell input'); + + cells.forEach((cell, index) => { + const row = Math.floor(index / 9); + const col = index % 9; + + const initialValue = initialBoard[row][col]; + // Set the value from solutionBoard if the cell is empty + if (initialValue === 0) { + cell.value = '' + } + }); +} + +createBoard(); diff --git a/SinglePlayer - Games/Jigsaw_Sudoku_Game/style.css b/SinglePlayer - Games/Jigsaw_Sudoku_Game/style.css new file mode 100644 index 00000000..77dd615b --- /dev/null +++ b/SinglePlayer - Games/Jigsaw_Sudoku_Game/style.css @@ -0,0 +1,82 @@ +body{ + background-color: aliceblue; +} +.sudoku-container { + display: flex; + justify-content: center; + align-items: center; + height: 95vh; + width: 95vw; + flex-direction: column; + +} +#sudoku-board { + display: grid; + grid-template-columns: repeat(9, 40px); + grid-template-rows: repeat(9, 40px); + gap: 0; + margin: 20px; +} + +.cell { + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + width: 40px; + height: 40px; +} + +.cell input { + width: 100%; + height: 100%; + text-align: center; + border: none; + font-size: 20px; + background-color: transparent; +} +.flex{ + flex-direction: row; +} +.check, .reset, .solve{ + width: 70px; + height: 40px; + cursor: pointer; + border-radius: 4px; + color: rgb(231, 231, 231); + border: none; + font-size: 14px; +} +.check, .reset{ + background-color: rgb(211, 138, 1); +} +.solve{ + background-color: rgb(1, 149, 1); + margin: 0 10px; +} +.solve:hover{ + background-color: green; +} +.check:hover, .reset:hover{ + background-color: rgb(175, 115, 3); +} +input:disabled { + color: purple; +} + +/* Define borders for irregular regions */ +.region1 { border: 2px solid #000; background-color: #a1ddf3; } +.region2 { border: 2px solid #000; background-color: #679bb8; } +.region3 { border: 2px solid #000; background-color: #3fb4df; } +.region4 { border: 2px solid #000; background-color: #3789a7; } +.region5 { border: 2px solid #000; background-color: #3196bb; } +.region6 { border: 2px solid #000; background-color: #77daf8; } +.region7 { border: 2px solid #000; background-color: #3fa0e6; } +.region8 { border: 2px solid #000; background-color: #4094b2; } +.region9 { border: 2px solid #000; background-color: #52cefc; } + +/* Manually define borders to separate regions */ +.cell[data-border-left] { border-left: 2px solid #000; } +.cell[data-border-right] { border-right: 2px solid #000; } +.cell[data-border-top] { border-top: 2px solid #000; } +.cell[data-border-bottom] { border-bottom: 2px solid #000; } diff --git a/additionalpage/game.html b/additionalpage/game.html index 0c6b522e..a218b96b 100644 --- a/additionalpage/game.html +++ b/additionalpage/game.html @@ -10212,6 +10212,50 @@

Break the Blocks

+ + + + + +
+
+ +
+ 41 + +
+
+
+
+
+

Break the Blocks

+

Jigsaw Sudoku is an enhanced version of the classic Sudoku puzzle game. Unlike standard Sudoku, Jigsaw Sudoku features irregularly shaped regions instead of the traditional 3x3 blocks. This variation adds an extra layer of challenge and excitement to the game. +

+
+ + + + + +
+
+
+
+
+

Release Date:  

+

10.08.2024

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
diff --git a/assets/images/jigsaw-sudoku.png b/assets/images/jigsaw-sudoku.png new file mode 100644 index 00000000..a0852512 Binary files /dev/null and b/assets/images/jigsaw-sudoku.png differ