Closes kunjgit#5061

Created jigsaw sudoku game
its-kritika · Aug 10, 2024 · cb37efb · cb37efb
1 parent 260979e
commit cb37efb
Show file tree

Hide file tree

Showing 6 changed files with 263 additions and 0 deletions.
diff --git a/Games/Jigsaw_Sudoku_Game/README.md b/Games/Jigsaw_Sudoku_Game/README.md
@@ -0,0 +1,24 @@
+## 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.
+
+# Functionality
+- **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.
+
+## Files
+- `index.html`: The main HTML file that sets up the structure of the game.
+- `styles.css`: The CSS file that styles the game.
+- `script.js`: The JavaScript file that contains the game logic.
diff --git a/Games/Jigsaw_Sudoku_Game/index.html b/Games/Jigsaw_Sudoku_Game/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jigsaw Sudoku</title>
+    <link rel = 'stylesheet' href = 'style.css'>
+    </head>
+<body>
+    <div class = 'sudoku-container'>
+        <div id="sudoku-board"></div>
+        <div class = 'flex'>
+            <button onclick="checkSolution()" class= 'check'>Check</button>
+            <button onclick="solve()" class="solve">Solve</button>
+            <button onclick="reset()" class="reset">Reset</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Jigsaw_Sudoku_Game/script.js b/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/Games/Jigsaw_Sudoku_Game/style.css b/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/README.md b/README.md
@@ -1727,6 +1727,7 @@ This repository also provides one such platforms where contributers come over an
 |[Tower_Building_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Building_Game)|
 |[Cross_Road_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Cross_Road_Game)|
 |[The_Mystery_Adventure_game](https://github.com/kunjgit/GameZone/tree/main/Games/The_Mystery_Adventure_Game)|
+|[Jigsaw_Sudoku_game](https://github.com/kunjgit/GameZone/tree/main/Games/Jigsaw_Sudoku_Game)|
 
 
  </center>

diff --git a/assets/images/jigsaw-sudoku-game.png b/assets/images/jigsaw-sudoku-game.png