closes ChromeGaming#1101

Created jigsaw sudoku game
its-kritika · Aug 10, 2024 · c325ec0 · c325ec0
1 parent 507cc3a
commit c325ec0
Show file tree

Hide file tree

Showing 8 changed files with 304 additions and 0 deletions.
diff --git 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) |
 
 
 </div>

diff --git a/SinglePlayer - Games/Banner - image/jigsaw-sudoku.png b/SinglePlayer - Games/Banner - image/jigsaw-sudoku.png
diff --git a/SinglePlayer - Games/Jigsaw_Sudoku_Game/README.md 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!🥳
diff --git a/SinglePlayer - Games/Jigsaw_Sudoku_Game/index.html b/SinglePlayer - 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/SinglePlayer - Games/Jigsaw_Sudoku_Game/script.js 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
@@ -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
@@ -10212,6 +10212,50 @@ <h4 class = "text-white uppercase game-card-title">Break the Blocks</h4>
         </div>
     </div>
 </div>
+<!--card end--> 
+
+<!-- ------------- -->
+<!--  Arkanoid Game  -->
+<!-- ------------- -->
+<div class = "game-card">
+    <div class = "game-card-top img-fit-cover">
+        <img src = "../assets/images/jigsaw-sudoku.png" alt = "">
+        <div class = "ratings-count">
+            41
+            <img src = "../assets/icons/star-black.svg" alt = "" class = "ms-2">
+        </div>
+    </div>
+    <div class = "game-card-bottom">
+        <div class = "flex flex-col sm:flex-row justify-between items-start flex-wrap">
+            <div class = "py-1">
+                <h4 class = "text-white uppercase game-card-title">Break the Blocks</h4>
+                <p class = "para-text">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.
+                </div>
+            <div class = "star-rating mt-2 sm:mt-0 py-1">
+                <img src = "../assets/icons/star-green.svg">
+                <img src = "../assets/icons/star-green.svg">
+                <img src = "../assets/icons/star-green.svg">
+                <img src = "../assets/icons/star-green.svg">
+                <img src = "../assets/icons/star-green-half.svg">
+            </div>
+        </div>
+        <div class = "block-wrap flex justify-between items-end">
+            <div class = "details-group">
+                <div class = "flex items-center">
+                    <p class = "font-semibold">Release Date: &nbsp;</p>
+                    <p>10.08.2024</p>
+                </div>
+                <div class = "flex items-center">
+                    <p class = "font-semibold">Updated: &nbsp;</p>
+                    <p>Action | Desktop</p>
+                </div>
+            </div>
+            <div class = "flex flex-col items-end justify-between">
+                <a target="_blank" href = "/SinglePlayer - Games/Jigsaw_Sudoku_Game/index.html" class = "btn-primary uppercase">Play Now</a>
+            </div>
+        </div>
+    </div>
+</div>
 <!--card end--> 
             </div>
         </div>

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