Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

closes #1101 #1123

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions SinglePlayer - Games/Jigsaw_Sudoku_Game/README.md
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!🥳
20 changes: 20 additions & 0 deletions SinglePlayer - Games/Jigsaw_Sudoku_Game/index.html
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>
136 changes: 136 additions & 0 deletions SinglePlayer - Games/Jigsaw_Sudoku_Game/script.js
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();
82 changes: 82 additions & 0 deletions SinglePlayer - Games/Jigsaw_Sudoku_Game/style.css
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; }
44 changes: 44 additions & 0 deletions additionalpage/game.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Binary file added assets/images/jigsaw-sudoku.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.