Merge pull request #4645 from muskan42/slider_puzzle

Added sliding game
kunjgit · Jun 22, 2024 · 1a590bf · 1a590bf
2 parents 2887c0e + 73e594d
commit 1a590bf
Show file tree

Hide file tree

Showing 6 changed files with 421 additions and 2 deletions.
diff --git a/Games/Sliding_puzzle/Readme.md b/Games/Sliding_puzzle/Readme.md
@@ -0,0 +1,23 @@
+## Sliding Puzzle
+
+Sliding Puzzle is a single-player puzzle game. The goal of the game is to rearrange the numbered tiles in order from 1 to 15, with the empty space being the last tile.  You can move the tiles by swiping in the direction of the empty space. 
+
+The game keeps track of your score and time. The score is incremented every time you move a tile. The timer starts when you begin a new game and stops when you solve the puzzle.
+
+### How to Play
+
+1. Tap "New Game" to start a new game.
+2. Click a tile to make it move in the direction of the empty space.
+3. Continue swiping tiles until the puzzle is solved (numbers are in order from 1 to 15).
+
+###  Tips
+
+* Plan your moves ahead of time.
+* Try to work on getting the corner pieces in place first.
+* There are many different ways to solve the puzzle. Experiment and find what works best for you.
+
+I hope you enjoy playing Sliding Puzzle!
+
+Here's an image of the game window.
+
+![Screenshot 2024-06-21 005055](https://github.com/kunjgit/GameZone/assets/141642724/fc66d8b7-1f5a-4a1e-a0d9-d6ea0d5d7fcf)
diff --git a/Games/Sliding_puzzle/index.html b/Games/Sliding_puzzle/index.html
@@ -0,0 +1,52 @@
+<!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" />
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+
+    <div class="container">
+      <div id="alert"></div>
+      <div class="board">
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+        <div class="square"></div>
+      </div>
+      <div class="tileContainer"></div>
+    </div>
+    <div class="elementContainer">
+      <div class="title">
+        <h1>Sliding Puzzle</h1>
+      </div>
+      <div class="moveElementContainer">
+        <div id="moveLabel">Score</div>
+        <div id="moveElement">0</div>
+        <div id="timerLabel">Time</div>
+        <div id="timer">0</div>
+      </div>
+      <div>
+        <button class="newGame" onclick="startNewGame()">New Game</button>
+      </div>
+    </div>
+
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/Games/Sliding_puzzle/main.js b/Games/Sliding_puzzle/main.js
@@ -0,0 +1,178 @@
+let board =[];
+let moves =0;
+let seconds=0;
+let tileContainer = document.querySelector(".tileContainer");
+let moveElement = document.getElementById("moveElement");
+let timerElement = document.getElementById("timer");
+let intervalId;
+const alert = document.getElementById("alert");
+
+createBoard();
+fillBoard();
+
+function createBoard() {
+  for(let i=0;i<4;i++) {
+    let row=[];
+    for(let j=0;j<4;j++) {
+      row.push(0);
+    }
+    board.push(row);
+  }
+}
+
+function fillBoard() {
+  let numbers = Array.from({length:15},(_,i)=>i+1);
+  numbers.push(null);
+  let emptyIndex = numbers.length-1;
+  for (let i=0;i<1000;i++) {
+    let swapIndex = getRandomValidMove(emptyIndex);
+    [numbers[emptyIndex],numbers[swapIndex]] = [numbers[swapIndex],numbers[emptyIndex]] ;
+    emptyIndex = swapIndex;
+  }
+  let index = 0;
+  for (let y=3;y>=0;y--) {
+    for (let x=0;x<4;x++) {
+      if(index<numbers.length) {
+        if(numbers[index]!==null) {
+          addTileAt(x,y,numbers[index]);
+        }
+        index++;
+      }
+    }
+  }
+}
+
+function getRandomValidMove(emptyIndex) {
+  let validMoves = [];
+  let x = emptyIndex%4;
+  let y = Math.floor(emptyIndex/4);
+
+  if(x>0) validMoves.push(emptyIndex-1);
+  if(x<3) validMoves.push(emptyIndex+1);
+  if(y>0) validMoves.push(emptyIndex-4);
+  if(y<3) validMoves.push(emptyIndex+4);
+
+  return validMoves[Math.floor(Math.random()*validMoves.length)];
+}
+
+function addTileAt(x,y,value) {
+  board[x][y] = value;
+  addTileToPage(x,y,board[x][y]);
+}
+
+function addTileToPage(row,column,value) {
+  let tile = document.createElement("div");
+  tile.classList.add(
+    "tile",
+    "row"+(row+1),
+    "column"+(column+1),
+    "value"+value
+  );
+  tile.innerHTML = value;
+  tileContainer.appendChild(tile);
+}
+
+function startNewGame() {
+  alert.style.display = "none";
+  tileContainer.innerHTML = "";
+  moveElement.innerHTML =0;
+  timerElement.innerHTML = 0;
+  board = [];
+  moves = 0;
+  seconds = 0;
+  createBoard();
+  fillBoard();
+  window.onload = addClickEventToTiles();
+  stopTimer();
+}
+
+function startTimer() {
+  intervalId = setInterval(function(){
+    seconds++;
+    timerElement.innerHTML = seconds;
+  },1000);
+}
+
+function stopTimer() {
+  clearInterval(intervalId);
+}
+
+window.onload = addClickEventToTiles();
+
+function addClickEventToTiles() {
+  let tiles = document.querySelectorAll(".tile");
+  tiles.forEach(function(tile){
+      tile.addEventListener("click",onTileClick);
+  });
+}
+
+function onTileClick(event) {
+  if(moves ==0)
+    startTimer();
+  let [row,column] = getRowAndColumn(event.target);
+  moveTiles(row-1,column-1);
+  let gameOver = isGameOver();
+  if(gameOver){
+    showAlert();
+    stopTimer();
+  }
+}
+
+function getRowAndColumn(element) {
+  let classes = element.classList;
+  let row,column;
+  for (let i=0;i<classes.length;i++) {
+    if(classes[i].startsWith("row")) {
+      row = parseInt(classes[i].slice(3));
+    } else if (classes[i].startsWith("column")) {
+      column = parseInt(classes[i].slice(6));
+    }
+  }
+  return [row,column];
+}
+
+function moveTiles(x,y) {
+  let directions = [[0,-1],[0,1],[-1,0],[1,0]];
+
+  for(let i=0;i<directions.length;i++) {
+    let newX = x + directions[i][0];
+    let newY = y + directions[i][1];
+
+    if(newX>=0 && newX<4 && newY>=0 && newY<4 && board[newX][newY]=== 0) {
+      board[newX][newY] = board[x][y];
+      board[x][y] = 0;
+      let tileClass = ".row"+(x+1)+".column"+(y+1);
+      let tile = document.querySelector(tileClass);
+      moveTileOnPage(newX,newY,tile);
+      moves++;
+      moveElement.innerHTML = moves;
+      break;
+    }
+  }
+}
+
+function moveTileOnPage(row,column,tile) {
+  let classes = Array.from(tile.classList);
+  classes.forEach((className)=>{
+    if(className.startsWith("row") || className.startsWith("column")) {
+      tile.classList.remove(className);
+    }
+  });
+  tile.classList.add("row"+(row+1),"column"+(column+1));
+}
+
+function isGameOver() {
+  for(let i=0;i<15;i++) {
+    if(board[3-Math.floor(i/4)][i%4]!== i+1) {
+      return false;
+    }
+  }
+  return board[0][3]===0;
+}
+
+function showAlert() {
+  alert.innerHTML = '<div>You won!</div> <button class="newGame"onclick="startNewGame()">New game</button>';
+  alert.style.display = "flex";
+  alert.style.flexDirection = "column";
+  stopTimer();
+}