Merge pull request #123 from Omar-Nabil/sudoku

Sudoku_Game
shrey141102 · Dec 11, 2023 · e86096f · e86096f
2 parents 99d7d11 + 7ea7269
commit e86096f
Show file tree

Hide file tree

Showing 8 changed files with 1,307 additions and 0 deletions.
diff --git a/Sudoku Game/.vscode/settings.json b/Sudoku Game/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/Sudoku Game/bozhin-karaivanov-yqcWOAHH1Rs-unsplash.jpg b/Sudoku Game/bozhin-karaivanov-yqcWOAHH1Rs-unsplash.jpg
diff --git a/Sudoku Game/index.html b/Sudoku Game/index.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" href="./logo.png" type="image/icon type">
+  <title>Play Free Sudoku online - solve web sudoku puzzles</title>
+  <link rel="stylesheet" href="style.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+
+  <script src="sudoku.js"></script>
+</head>
+
+<body>
+  <div class="container">
+    <div id="gameBoard">
+      <!--9th Rank ---->
+      <div class="square top left"></div>
+      <div class="square top"></div>
+      <div class="square top right"></div>
+      <div class="square top"></div>
+      <div class="square top"></div>
+      <div class="square top right"></div>
+      <div class="square top"></div>
+      <div class="square top"></div>
+      <div class="square right top"></div>
+      <!--8th Rank ---->
+      <div class="square left"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <div class="square"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <div class="square"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <!--7th Rank ---->
+      <div class="square left bottom"></div>
+      <div class="square bottom"></div>
+      <div class="square right bottom"></div>
+      <div class="square bottom"></div>
+      <div class="square bottom"></div>
+      <div class="square right bottom"></div>
+      <div class="square bottom"></div>
+      <div class="square bottom"></div>
+      <div class="square right bottom"></div>
+      <!--6th Rank ---->
+      <div class="square left"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <div class="square"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <div class="square"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <!--5th Rank ---->
+      <div class="square left"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <div class="square"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <div class="square"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <!--4th Rank ---->
+      <div class="square left bottom"></div>
+      <div class="square bottom"></div>
+      <div class="square right bottom"></div>
+      <div class="square bottom"></div>
+      <div class="square bottom"></div>
+      <div class="square right bottom"></div>
+      <div class="square bottom"></div>
+      <div class="square bottom"></div>
+      <div class="square right bottom"></div>
+      <!--3th Rank ---->
+      <div class="square left"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <div class="square"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <div class="square"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <!--2th Rank ---->
+      <div class="square left"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <div class="square"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <div class="square"></div>
+      <div class="square"></div>
+      <div class="square right"></div>
+      <!--1th Rank ---->
+      <div class="square bottom left"></div>
+      <div class="square bottom"></div>
+      <div class="square bottom right"></div>
+      <div class="square bottom"></div>
+      <div class="square bottom"></div>
+      <div class="square bottom right"></div>
+      <div class="square bottom"></div>
+      <div class="square bottom"></div>
+      <div class="square bottom right"></div>
+    </div>
+    <div class="buttonContainer">
+      <div>
+        <span>Mistake</span>
+        <span id="mistakes">0/3</span>
+        <span>Hints:</span>
+        <span id="hint">3/3</span>
+      </div>
+      <div>
+        <button id="eraseButton" title="Erase"><i class="fas fa-eraser"></i></button>
+        <button id="hintButton" title="Erase"><i class="fas fa-circle-info"></i></button>
+      </div>
+      <div class="numbers">
+        <button class="number">1</button>
+        <button class="number">2</button>
+        <button class="number">3</button>
+        <button class="number">4</button>
+        <button class="number">5</button>
+        <button class="number">6</button>
+        <button class="number">7</button>
+        <button class="number">8</button>
+        <button class="number">9</button>
+      </div>
+      <div>
+        <button id="newGameButton">New Game</button>
+        <button id="solveButton">Solve</button>
+        <select id="difficulty">
+          <option value="easy">Easy</option>
+          <option value="medium">Medium</option>
+          <option value="hard">Hard</option>
+          <option value="insane">Insane</option>
+          <option value="inhuman">Inhuman</option>
+        </select>
+
+      </div>
+    </div>
+  </div>
+  <div id="alert"></div>
+
+  <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/Sudoku Game/logo.png b/Sudoku Game/logo.png
diff --git a/Sudoku Game/main.js b/Sudoku Game/main.js
@@ -0,0 +1,171 @@
+const gameBoard = document.getElementById("gameBoard");
+const squares = document.getElementsByClassName("square");
+const numbers = document.getElementsByClassName("number");
+const solveButton = document.getElementById("solveButton");
+const newGameButton = document.getElementById("newGameButton");
+const eraseButton = document.getElementById("eraseButton");
+const hintButton = document.getElementById("hintButton");
+const hints = document.getElementById("hint");
+const mistakeElement = document.getElementById("mistakes");
+let mistake =0;
+let hintNumber =3;
+
+let level = difficulty.value;
+let board = sudoku.generate(level,false);
+let solvedString = sudoku.solve(board);
+let sudokuString = board;
+let sudokuBoard = stringToArray(sudokuString);
+let sudokuSolved = stringToArray(solvedString);
+
+setupBoard();
+fillBoard(sudokuBoard);
+
+
+function setupBoard() {
+  for (let i=0;i<squares.length;i++){
+    let row = 9 - Math.floor(i/9);
+    let column = (i%9)+1;
+    let id= row*10+column;
+    squares[i].setAttribute("id",id);
+    squares[i].addEventListener("click",onSquareClick);  
+  }
+  for(let i=0;i<numbers.length;i++){
+    let id=i+1;
+    numbers[i].setAttribute("id",id);
+    numbers[i].addEventListener("click",onNumberClick);  
+  }
+}
+function onSquareClick(){
+  let activeSquares = document.querySelectorAll(".active");
+  if(activeSquares.length===1 && this.classList.contains("active")) {
+    this.classList.toggle("active");
+    return;
+  }
+  activeSquares.forEach((square)=>square.classList.remove("active"));
+  this.classList.add("active");
+}
+
+function fillBoard(board) {
+  for (let i=0;i<squares.length;i++) {
+    let row = 9-Math.floor(i/9);
+    let column = (i%9)+1;
+    let id= row*10+column;
+    let square = document.getElementById(id);
+    if(board[row-1][column-1]!=0)square.classList.add("filled");
+      square.innerHTML = board[row-1][column-1]==0 ? "" : board[row-1][column-1];
+  }
+}
+function stringToArray(sudokuString) {
+   let board = [];
+   let row = [];
+   for (let i=0;i<sudokuString.length;i++) {
+    if(sudokuString[i]===".") {
+      row.push(0);
+    } else {
+      row.push(parseInt(sudokuString[i]));
+    }
+    if(row.length===9) {
+      board.push(row);
+      row=[];
+    }
+
+   }
+   return board;
+}
+function onNumberClick() {
+  let activeSquare = document.querySelector(".active");
+  if(activeSquare.classList.contains("filled")) return;
+  if(!activeSquare || activeSquare.classList.contains("filled")) return;
+  activeSquare.innerHTML = this.innerHTML;
+  let userInput = parseInt(this.innerHTML);
+  let row = parseInt(activeSquare.id.charAt(0));
+  let column = parseInt(activeSquare.id.charAt(1));
+
+  let isCorrect = userInput == sudokuSolved[row-1][column-1];
+  activeSquare.classList.remove(isCorrect ? "filled" : "true");
+  activeSquare.classList.add(isCorrect ? "filled" : "false");
+
+  if(isCorrect) {
+    activeSquare.classList.add("true");
+    let filledSquares = document.getElementsByClassName("filled");
+    if(filledSquares.length==81)
+      endGame("Bravo! Sudoku Conquered!","green");
+    return;
+  }
+  mistake++;mistakeElement.innerHTML=mistake+"/3";
+  if(mistake==3) endGame("Game Over! 3 Strikes,Try Again!","darkred");
+}
+
+function endGame(message,color){
+    for (let i=0;i<squares.length;i++) {
+      squares[i].removeEventListener("click",onSquareClick);
+    }
+    let activeSquares = document.querySelectorAll(".active");
+    activeSquares.forEach((square)=>square.classList.remove("active"));
+    showAlert(message,color);
+}
+eraseButton.addEventListener("click",function(){
+  let activeSquare = document.querySelector(".active");
+  if(activeSquare==null)return;
+  activeSquare.classList.remove("active");
+  if(activeSquare.classList.contains("filled")) return;
+  activeSquare.innerHTML="";
+});
+
+hintButton.addEventListener ("click",function(){
+  if(hintNumber==0) {
+    showAlert("Oops! You've used all your hints.");
+    return;
+  }
+  let activeSquare = document.querySelector(".active");
+  activeSquare.classList.remove("active");
+  if(activeSquare.classList.contains("filled")) return;
+  let row = parseInt(activeSquare.id.charAt(0));
+  let column = parseInt(activeSquare.id.charAt(1));
+  activeSquare.innerHTML = sudokuSolved[row-1][column-1];
+  activeSquare.classList.add("filled");
+  activeSquare.classList.add("true");
+  hintNumber--;
+  hints.innerHTML = hintNumber+"/3";
+});
+solveButton.addEventListener("click",function(){
+  resetBoard();
+  fillBoard(sudokuSolved);
+});
+newGameButton.addEventListener("click",function(){
+  resetBoard();
+  level = difficulty.value;
+  board = sudoku.generate(level,false);
+  sudokuString = board;
+  solvedString = sudoku.solve(board);
+  sudokuBoard = stringToArray(sudokuString);
+  sudokuSolved = stringToArray(solvedString);
+  setupBoard();
+  fillBoard(sudokuBoard);
+  mistake = 0;
+  mistakeElement.innerHTML = "0/3";
+  hintNumber =3;
+  hints.innerHTML = "3/3";
+});
+
+function resetBoard() {
+  for(let i=0;i<squares.length;i++) {
+    squares[i].classList.remove("filled");
+    squares[i].classList.remove("false");
+    squares[i].classList.remove("active");
+    squares[i].classList.remove("true");
+  }
+}
+
+
+function showAlert(message, color) {
+  const alert = document.getElementById("alert");
+  alert.innerHTML = message;
+  alert.style.display = "block";
+  alert.style.color = color;
+  gameBoard.style.opacity = 0.5;
+  setTimeout(function () {
+    alert.style.display = "none";
+    gameBoard.style.opacity = 1;
+  }, 3000);
+}