thinkswell · PBJI · Oct 12, 2023 · Oct 12, 2023
diff --git a/SildePuzzle/kohi9noor/Assets/1.jpg b/SildePuzzle/kohi9noor/Assets/1.jpg
diff --git a/SildePuzzle/kohi9noor/Assets/10.jpg b/SildePuzzle/kohi9noor/Assets/10.jpg
diff --git a/SildePuzzle/kohi9noor/Assets/2.jpg b/SildePuzzle/kohi9noor/Assets/2.jpg
diff --git a/SildePuzzle/kohi9noor/Assets/3.jpg b/SildePuzzle/kohi9noor/Assets/3.jpg
diff --git a/SildePuzzle/kohi9noor/Assets/4.jpg b/SildePuzzle/kohi9noor/Assets/4.jpg
diff --git a/SildePuzzle/kohi9noor/Assets/5.jpg b/SildePuzzle/kohi9noor/Assets/5.jpg
diff --git a/SildePuzzle/kohi9noor/Assets/6.jpg b/SildePuzzle/kohi9noor/Assets/6.jpg
diff --git a/SildePuzzle/kohi9noor/Assets/7.jpg b/SildePuzzle/kohi9noor/Assets/7.jpg
diff --git a/SildePuzzle/kohi9noor/Assets/8.jpg b/SildePuzzle/kohi9noor/Assets/8.jpg
diff --git a/SildePuzzle/kohi9noor/Assets/9.jpg b/SildePuzzle/kohi9noor/Assets/9.jpg
diff --git a/SildePuzzle/kohi9noor/Assets/logo.png b/SildePuzzle/kohi9noor/Assets/logo.png
diff --git a/SildePuzzle/kohi9noor/index.html b/SildePuzzle/kohi9noor/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>Silde-Puzzle</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <body>
+        <img src="./Assets/logo.png" alt="./logo" id="title">
+        <div id="board"></div>
+        <h1>Turns: <span id="turns">0</span></h1>
+        <script src="./script.js"></script>
+    </body>
+</body>
+</html>
diff --git a/SildePuzzle/kohi9noor/script.js b/SildePuzzle/kohi9noor/script.js
@@ -0,0 +1,88 @@
+var rows = 3;
+var columns = 3;
+
+var currTile;
+var otherTile; //blank tile
+
+var turns = 0;
+
+// var imgOrder = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+var imgOrder = ["4", "2", "8", "5", "1", "6", "7", "9", "3"];
+
+window.onload = function() {
+    for (let r=0; r < rows; r++) {
+        for (let c=0; c < columns; c++) {
+
+            //<img id="0-0" src="1.jpg">
+            let tile = document.createElement("img");
+            tile.id = r.toString() + "-" + c.toString();
+            tile.src = "./Assets/" + imgOrder.shift() + ".jpg";
+
+            //DRAG FUNCTIONALITY
+            tile.addEventListener("dragstart", dragStart);  //click an image to drag
+            tile.addEventListener("dragover", dragOver);    //moving image around while clicked
+            tile.addEventListener("dragenter", dragEnter);  //dragging image onto another one
+            tile.addEventListener("dragleave", dragLeave);  //dragged image leaving anohter image
+            tile.addEventListener("drop", dragDrop);        //drag an image over another image, drop the image
+            tile.addEventListener("dragend", dragEnd);      //after drag drop, swap the two tiles
+
+            document.getElementById("board").append(tile);
+
+        }
+    }
+}
+
+function dragStart() {
+    currTile = this; //this refers to the img tile being dragged
+}
+
+function dragOver(e) {
+    e.preventDefault();
+}
+
+function dragEnter(e) {
+    e.preventDefault();
+}
+
+function dragLeave() {
+
+}
+
+function dragDrop() {
+    otherTile = this; //this refers to the img tile being dropped on
+}
+
+function dragEnd() {
+    if (!otherTile.src.includes("3.jpg")) {
+        return;
+    }
+
+    let currCoords = currTile.id.split("-"); //ex) "0-0" -> ["0", "0"]
+    let r = parseInt(currCoords[0]);
+    let c = parseInt(currCoords[1]);
+
+    let otherCoords = otherTile.id.split("-");
+    let r2 = parseInt(otherCoords[0]);
+    let c2 = parseInt(otherCoords[1]);
+
+    let moveLeft = r == r2 && c2 == c-1;
+    let moveRight = r == r2 && c2 == c+1;
+
+    let moveUp = c == c2 && r2 == r-1;
+    let moveDown = c == c2 && r2 == r+1;
+
+    let isAdjacent = moveLeft || moveRight || moveUp || moveDown;
+
+    if (isAdjacent) {
+        let currImg = currTile.src;
+        let otherImg = otherTile.src;
+
+        currTile.src = otherImg;
+        otherTile.src = currImg;
+
+        turns += 1;
+        document.getElementById("turns").innerText = turns;
+    }
+
+
+}
diff --git a/SildePuzzle/kohi9noor/style.css b/SildePuzzle/kohi9noor/style.css
@@ -0,0 +1,27 @@
+body{
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+    color: #0c67ae;
+}
+
+#title{
+    height: 150px;
+    width: 400px;
+}
+
+#board{
+    width: 360px;
+    height: 360px;
+    background-color: lightblue;
+    border: 10px solid #0c67ae;
+
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#board img{
+    width: 118px;
+    height: 118px;
+    border: 1px solid #0c67ae;
+}