Add files via upload

Jithendranath8 · Mar 11, 2024 · 2817374 · 2817374
1 parent e68e6c8
commit 2817374
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sliding Puzzle</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Sliding Puzzle Game</h1>
+    <div class="grid">
+    </div>
+    <button>New Game</button>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/original-image.png b/original-image.png
diff --git a/script.js b/script.js
@@ -0,0 +1,85 @@
+const imgPos = [
+    'top left',
+    'top center',
+    'top right',
+    'center left',
+    'center center',
+    'center right',
+    'bottom left',
+    'bottom center',
+]
+let grid = [
+    0,1,2,
+    3,4,5,
+    6,7,8
+]
+
+
+
+
+const newGame = () => {
+    let seq = [0,1,2,3,4,5,6,7,8];
+    grid = [];
+    for (let i=0;i<9;i++) {
+        const cur = seq.splice(Math.random()*seq.length, 1);
+        grid.push(cur[0]);
+    }
+}
+
+
+const shift = (idx) => {
+    if (grid[idx-1] == 8) {
+        grid[idx-1] = grid[idx];
+        grid[idx] = 8;
+    } else if (grid[idx+1] == 8) {
+        grid[idx+1] = grid[idx];
+        grid[idx] = 8;
+    } else if (grid[idx+3] == 8) {
+        grid[idx+3]=grid[idx];
+        grid[idx] =8;
+    }else if (grid[idx-3] == 8) {
+        grid[idx-3]=grid[idx];
+        grid[idx] =8;
+    }
+    display();
+}
+
+const checkWin = () => {
+    for (let i=0;i<9;i++) {
+        if (grid[i]!=i) {
+            return false;
+        }
+    }
+    return true;
+}
+
+const display = () => {
+    let gridDiv = document.querySelector('.grid').cloneNode(false);
+    for (let i=0;i<9;i++) {
+        const cell = document.createElement('div')
+        cell.classList.add('.cell');
+        if (grid[i]!=8) {
+            cell.style.backgroundPosition = imgPos[grid[i]];
+            cell.style.backgroundImage = 'url("https://d3dyfaf3iutrxo.cloudfront.net/general/upload/9999541de1b34295a6c3322e95e2fea7.webp")';
+            cell.style.cursor = 'pointer';
+            cell.addEventListener('click', ()=>shift(i));
+        }
+        gridDiv.appendChild(cell);
+    }
+    document.querySelector('.grid').replaceWith(gridDiv);
+    setTimeout(() => {
+        if (checkWin()) {
+            alert("Congratulations! You solved the puzzle! Click on New Game to continue playing !!");
+        }
+    }, 10);
+}
+newGame();
+display();
+
+
+
+
+document.querySelector('button').addEventListener('click', ()=>{
+    newGame();
+    display();
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,34 @@
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    background-color: #f3f3f3;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+    grid-template-rows: 180px 180px 180px;
+    justify-content: center;
+    background-color: white;
+    gap: 2px;
+}
+
+
+.cell {
+    width: 100px;
+    height: 100px;
+    cursor: pointer;
+}
+
+button {
+    padding: 10px;
+    margin-top: 20px;
+    outline: none;
+    border: none;
+    background-color: #4caf50;
+    border-radius: 5px;
+    color: white;
+}