forked from ChromeGaming/GameSphere
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
8 changed files
with
304 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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!🥳 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.