Stick The Sticker Game

In this game there are several stickers given in various pieces. The pieces can be shuffled to form a meaningful sticker.
Tharun-nennavath · Jun 28, 2023 · e67b5fc · e67b5fc
1 parent d4d1c55
commit e67b5fc
Show file tree

Hide file tree

Showing 33 changed files with 220 additions and 0 deletions.
diff --git a/Games/StickTheSticker/README.md b/Games/StickTheSticker/README.md
@@ -0,0 +1,32 @@
+# **Stick the Sticker!** 
+
+---
+
+<br>
+
+## **Description 📃**
+
+This is a fun game to stick the puzzle pieces of the sticker together. You have to use the shuffle button to shuffle the sticker pieces until it makes an object. While playing you will see many patterns in which the puzzle pieces can be arranged. There are several puzzles to enjoy.
+
+## **Functionalities 🎮**
+- The puzzles are in the form of the stickers.
+- The shuffle button shuffles the pieces.
+- The arrow button open different puzzles.
+
+## **How to play? 🕹️**
+- Click on the shuffle button to shuffle the puzzle pieces.
+- Stop clicking the button, when the sticker takes a form.
+- Use the side arrows to play various puzzles.
+<br>
+
+## **Screenshots 📸**
+
+<br>
+<b>Game Page</b>
+<img src = "assets/1.png">
+<img src = "assets/2.png">
+
+<br>
+
+
+
diff --git a/Games/StickTheSticker/assets/1.png b/Games/StickTheSticker/assets/1.png
diff --git a/Games/StickTheSticker/assets/2.png b/Games/StickTheSticker/assets/2.png
diff --git a/Games/StickTheSticker/index.html b/Games/StickTheSticker/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Puzzle Game</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <button class="button1" id="btn1"><</button>  
+    <div class="container">
+
+        <h1 class="title">Stick The Sticker</h1>
+        <div id="puzzle-container"></div>
+        <div class="button"><button id="shuffle-btn">Shuffle</button></div>
+
+
+    </div>
+    <button class="button2" id="btn2">></button>
+
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/StickTheSticker/puzzle1/p11.png b/Games/StickTheSticker/puzzle1/p11.png
diff --git a/Games/StickTheSticker/puzzle1/p12.png b/Games/StickTheSticker/puzzle1/p12.png
diff --git a/Games/StickTheSticker/puzzle1/p13.png b/Games/StickTheSticker/puzzle1/p13.png
diff --git a/Games/StickTheSticker/puzzle1/p14.png b/Games/StickTheSticker/puzzle1/p14.png
diff --git a/Games/StickTheSticker/puzzle2/p21.png b/Games/StickTheSticker/puzzle2/p21.png
diff --git a/Games/StickTheSticker/puzzle2/p22.png b/Games/StickTheSticker/puzzle2/p22.png
diff --git a/Games/StickTheSticker/puzzle2/p23.png b/Games/StickTheSticker/puzzle2/p23.png
diff --git a/Games/StickTheSticker/puzzle2/p24.png b/Games/StickTheSticker/puzzle2/p24.png
diff --git a/Games/StickTheSticker/puzzle3/p31.png b/Games/StickTheSticker/puzzle3/p31.png
diff --git a/Games/StickTheSticker/puzzle3/p32.png b/Games/StickTheSticker/puzzle3/p32.png
diff --git a/Games/StickTheSticker/puzzle3/p33.png b/Games/StickTheSticker/puzzle3/p33.png
diff --git a/Games/StickTheSticker/puzzle3/p34.png b/Games/StickTheSticker/puzzle3/p34.png
diff --git a/Games/StickTheSticker/puzzle4/p41.png b/Games/StickTheSticker/puzzle4/p41.png
diff --git a/Games/StickTheSticker/puzzle4/p42.png b/Games/StickTheSticker/puzzle4/p42.png
diff --git a/Games/StickTheSticker/puzzle4/p43.png b/Games/StickTheSticker/puzzle4/p43.png
diff --git a/Games/StickTheSticker/puzzle4/p44.png b/Games/StickTheSticker/puzzle4/p44.png
diff --git a/Games/StickTheSticker/puzzle5/p51.png b/Games/StickTheSticker/puzzle5/p51.png
diff --git a/Games/StickTheSticker/puzzle5/p52.png b/Games/StickTheSticker/puzzle5/p52.png
diff --git a/Games/StickTheSticker/puzzle5/p53.png b/Games/StickTheSticker/puzzle5/p53.png
diff --git a/Games/StickTheSticker/puzzle5/p54.png b/Games/StickTheSticker/puzzle5/p54.png
diff --git a/Games/StickTheSticker/puzzle6/p61.png b/Games/StickTheSticker/puzzle6/p61.png
diff --git a/Games/StickTheSticker/puzzle6/p62.png b/Games/StickTheSticker/puzzle6/p62.png
diff --git a/Games/StickTheSticker/puzzle6/p63.png b/Games/StickTheSticker/puzzle6/p63.png
diff --git a/Games/StickTheSticker/puzzle6/p64.png b/Games/StickTheSticker/puzzle6/p64.png
diff --git a/Games/StickTheSticker/script.js b/Games/StickTheSticker/script.js
@@ -0,0 +1,101 @@
+// Puzzle data
+var puzzles = [
+    {
+        folderPath: 'puzzle1',
+        pieces: ['p12.png', 'p11.png', 'p13.png', 'p14.png']
+    },
+    {
+        folderPath: 'puzzle2',
+        pieces: ['p21.png', 'p22.png', 'p23.png', 'p24.png']
+    },
+    {
+        folderPath: 'puzzle3',
+        pieces: ['p31.png', 'p32.png', 'p33.png', 'p34.png']
+    },
+    {
+        folderPath: 'puzzle4',
+        pieces: ['p41.png', 'p42.png', 'p43.png', 'p44.png']
+    },
+    {
+        folderPath: 'puzzle5',
+        pieces: ['p51.png', 'p52.png', 'p53.png', 'p54.png']
+    },
+    {
+        folderPath: 'puzzle6',
+        pieces: ['p61.png', 'p62.png', 'p63.png', 'p64.png']
+    },
+
+    // Add more puzzles as needed...
+];
+
+// Set the number of turns before resetting positions
+var turnsBeforeReset = 4;
+var currentTurn = 0;
+
+// Get puzzle container element
+var puzzleContainer = document.getElementById('puzzle-container');
+
+// Current puzzle index
+var currentPuzzleIndex = 0;
+
+// Initialize the puzzle game
+createPuzzleGame(puzzles[currentPuzzleIndex]);
+
+// Handle shuffle button click
+var shuffleBtn = document.getElementById('shuffle-btn');
+shuffleBtn.addEventListener('click', function () {
+    createPuzzleGame(puzzles[currentPuzzleIndex]);
+});
+
+// Handle button1 click
+var button1 = document.getElementById('btn1');
+button1.addEventListener('click', function () {
+    currentPuzzleIndex--;
+    if (currentPuzzleIndex < 0) {
+        currentPuzzleIndex = puzzles.length - 1;
+    }
+    createPuzzleGame(puzzles[currentPuzzleIndex]);
+});
+
+// Handle button2 click
+var button2 = document.getElementById('btn2');
+button2.addEventListener('click', function () {
+    currentPuzzleIndex++;
+    if (currentPuzzleIndex >= puzzles.length) {
+        currentPuzzleIndex = 0;
+    }
+    createPuzzleGame(puzzles[currentPuzzleIndex]);
+});
+
+// Create the puzzle game
+function createPuzzleGame(puzzle) {
+    puzzleContainer.innerHTML = '';
+
+    // Shuffle the puzzle pieces
+    var shuffledPieces = shuffleArray(puzzle.pieces);
+
+    // Create puzzle piece stickers
+    for (var i = 0; i < shuffledPieces.length; i++) {
+        var piece = document.createElement('div');
+        piece.classList.add('puzzle-piece');
+        piece.style.backgroundImage = `url('${puzzle.folderPath}/${shuffledPieces[i]}')`;
+        puzzleContainer.appendChild(piece);
+    }
+}
+
+// Shuffle the puzzle pieces randomly or reset positions
+function shuffleArray(array) {
+    if (currentTurn >= turnsBeforeReset) {
+        currentTurn = 0;
+        return array; // Return the original array order
+    } else {
+        currentTurn++;
+        for (var i = array.length - 1; i > 0; i--) {
+            var j = Math.floor(Math.random() * (i + 1));
+            var temp = array[i];
+            array[i] = array[j];
+            array[j] = temp;
+        }
+        return array;
+    }
+}
diff --git a/Games/StickTheSticker/style.css b/Games/StickTheSticker/style.css
@@ -0,0 +1,64 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #8a5bcc;
+  }
+
+  .title{
+    height: fit-content;
+    justify-content: center;
+    margin-left: 4rem;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    font-size: 40px;
+  }
+
+  #puzzle-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+    width: 500px;
+    height: 500px;
+    /* border: 2px solid #ccc; */
+    padding: 10px;
+    background-color: #8a5bcc;
+    position: relative;
+  }
+
+  .puzzle-piece {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #8a5bcc;
+    /* font-size: 24px; */
+    font-weight: bold;
+  }
+
+  #shuffle-btn {
+    background-color: #000000;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    font-size: 25px;
+    font-weight: bold;
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .button{
+    margin: 2rem;
+  }
+
+  .button1, .button2{
+    margin-left: 0%;
+    background: inherit;
+    font-size: 7rem;
+    border: none;
+    padding: 2rem;
+  }
+
diff --git a/README.md b/README.md
@@ -382,6 +382,7 @@ Also join the discord server for GameZone and start collaborating with others
 | 277 | [Cosmic_Coin_Blaster](https://github.com/kunjgit/GameZone/tree/main/Games/Cosmic_Coin_Blaster)|
 | 278 | [Circus Charly](https://github.com/kunjgit/GameZone/tree/main/Games/Circus_Charly)|
 | 279 | [Pikachu_Volleyball](https://github.com/kunjgit/GameZone/tree/main/Games/Pikachu_Volleyball)|
+| 280 | [StickTheSticker](https://github.com/kunjgit/GameZone/tree/main/Games/StickTheSticker) |
 
 
 

diff --git a/assets/images/Stick_The_Sticker.png b/assets/images/Stick_The_Sticker.png
diff --git a/assets/images/Stick_The_Sticker.webp b/assets/images/Stick_The_Sticker.webp