Merge pull request kunjgit#4677 from shreyash3087/add/jigsaw-puzzle

Feat: Added Jigsaw Puzzle Game
TiwariRahul16 · Jul 6, 2024 · ff6af60 · ff6af60
2 parents 7b9d7f2 + 51bd3aa
commit ff6af60
Show file tree

Hide file tree

Showing 7 changed files with 1,383 additions and 0 deletions.
diff --git a/Games/Jigsaw_Puzzle/Readme.md b/Games/Jigsaw_Puzzle/Readme.md
@@ -0,0 +1,35 @@
+# Classic Jigsaw Puzzle Game
+
+Welcome to the Classic Jigsaw Puzzle Game! This game allows you to upload any image and transform it into a jigsaw puzzle with varying difficulty levels. Whether you're looking for a quick challenge or a more intricate puzzle to solve, this game provides an enjoyable and interactive experience.
+
+## Game Features
+
+- **Image Upload:** Upload your own images to create personalized puzzles.
+- **Piece Selection:** Choose from 12, 25, 50, 100, or 200 pieces for different difficulty levels.
+- **Interactive Gameplay:** Drag and drop pieces to solve the puzzle.
+- **User-Friendly Interface:** Designed for a smooth and enjoyable user experience.
+- **Responsive Design:** Compatible with different devices, ensuring a great experience on both desktop and mobile.
+
+## Rules
+
+1. **Objective:** The goal is to assemble the puzzle pieces to form the complete image.
+2. **Piece Selection:** Select the number of pieces you want for your puzzle. The more pieces, the more challenging the puzzle.
+3. **Gameplay:** Drag and drop the pieces to their correct positions. Pieces will snap into place when they are correctly aligned.
+
+## How to Play
+
+1. **Upload Image:** Click on the "Upload Image" button to select an image from your device.
+2. **Select Pieces:** Choose the number of pieces for your puzzle (12, 25, 50, 100, 200).
+3. **Start Puzzle:** The image will be broken into pieces, and you can start solving the puzzle by dragging and dropping the pieces.
+4. **Solving:** Arrange the pieces to form the complete image. Pieces will snap into place when correctly positioned.
+5. **Complete Puzzle:** Once all pieces are correctly placed, the puzzle is complete, and you can admire your work!
+
+## Screenshot 
+
+![image](/assets/images/Jigsaw_Puzzle_SS.png)
+
+## Enjoy the Game!
+
+We hope you have fun playing the Classic Jigsaw Puzzle Game. If you have any feedback or suggestions, feel free to share them with us. Happy puzzling!
+
+
diff --git a/Games/Jigsaw_Puzzle/index.html b/Games/Jigsaw_Puzzle/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id=forPuzzle></div>
+    <ul id="menu">
+      <li>&#x2630;</li>
+      <li>default image</li>
+      <li>load image</li>
+      <li>shape: <select id="shape">
+          <option value="1" selected>classic</option>
+          <option value="2">triangle</option>
+          <option value="3">round</option>
+          <option value="4">straight</option>
+        </select></li>
+      <li>12 pieces</li>
+      <li>25 pieces</li>
+      <li>50 pieces</li>
+      <li>100 pieces</li>
+      <li>200 pieces</li>
+    </ul>  
+    <script src="script.js"></script>
+</body>
+</html>