diff --git a/Games/StickTheSticker/README.md b/Games/StickTheSticker/README.md new file mode 100644 index 0000000000..9d9ec3cb40 --- /dev/null +++ b/Games/StickTheSticker/README.md @@ -0,0 +1,32 @@ +# **Stick the Sticker!** + +--- + +
+ +## **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. +
+ +## **Screenshots 📸** + +
+Game Page + + + +
+ + + diff --git a/Games/StickTheSticker/assets/1.png b/Games/StickTheSticker/assets/1.png new file mode 100644 index 0000000000..ed5cc9e70a Binary files /dev/null and b/Games/StickTheSticker/assets/1.png differ diff --git a/Games/StickTheSticker/assets/2.png b/Games/StickTheSticker/assets/2.png new file mode 100644 index 0000000000..50cfb52be8 Binary files /dev/null and b/Games/StickTheSticker/assets/2.png differ diff --git a/Games/StickTheSticker/index.html b/Games/StickTheSticker/index.html new file mode 100644 index 0000000000..5c091070fb --- /dev/null +++ b/Games/StickTheSticker/index.html @@ -0,0 +1,22 @@ + + + + Puzzle Game + + + + +
+ +

Stick The Sticker

+
+
+ + +
+ + + + + + diff --git a/Games/StickTheSticker/puzzle1/p11.png b/Games/StickTheSticker/puzzle1/p11.png new file mode 100644 index 0000000000..30201b8c36 Binary files /dev/null and b/Games/StickTheSticker/puzzle1/p11.png differ diff --git a/Games/StickTheSticker/puzzle1/p12.png b/Games/StickTheSticker/puzzle1/p12.png new file mode 100644 index 0000000000..8134198ebe Binary files /dev/null and b/Games/StickTheSticker/puzzle1/p12.png differ diff --git a/Games/StickTheSticker/puzzle1/p13.png b/Games/StickTheSticker/puzzle1/p13.png new file mode 100644 index 0000000000..5fbc1577bb Binary files /dev/null and b/Games/StickTheSticker/puzzle1/p13.png differ diff --git a/Games/StickTheSticker/puzzle1/p14.png b/Games/StickTheSticker/puzzle1/p14.png new file mode 100644 index 0000000000..4cde71028e Binary files /dev/null and b/Games/StickTheSticker/puzzle1/p14.png differ diff --git a/Games/StickTheSticker/puzzle2/p21.png b/Games/StickTheSticker/puzzle2/p21.png new file mode 100644 index 0000000000..3d74fce05a Binary files /dev/null and b/Games/StickTheSticker/puzzle2/p21.png differ diff --git a/Games/StickTheSticker/puzzle2/p22.png b/Games/StickTheSticker/puzzle2/p22.png new file mode 100644 index 0000000000..a85a46de1f Binary files /dev/null and b/Games/StickTheSticker/puzzle2/p22.png differ diff --git a/Games/StickTheSticker/puzzle2/p23.png b/Games/StickTheSticker/puzzle2/p23.png new file mode 100644 index 0000000000..1825911312 Binary files /dev/null and b/Games/StickTheSticker/puzzle2/p23.png differ diff --git a/Games/StickTheSticker/puzzle2/p24.png b/Games/StickTheSticker/puzzle2/p24.png new file mode 100644 index 0000000000..8b416e2e66 Binary files /dev/null and b/Games/StickTheSticker/puzzle2/p24.png differ diff --git a/Games/StickTheSticker/puzzle3/p31.png b/Games/StickTheSticker/puzzle3/p31.png new file mode 100644 index 0000000000..5caaddb6fa Binary files /dev/null and b/Games/StickTheSticker/puzzle3/p31.png differ diff --git a/Games/StickTheSticker/puzzle3/p32.png b/Games/StickTheSticker/puzzle3/p32.png new file mode 100644 index 0000000000..5b94f7335d Binary files /dev/null and b/Games/StickTheSticker/puzzle3/p32.png differ diff --git a/Games/StickTheSticker/puzzle3/p33.png b/Games/StickTheSticker/puzzle3/p33.png new file mode 100644 index 0000000000..091d5ff39b Binary files /dev/null and b/Games/StickTheSticker/puzzle3/p33.png differ diff --git a/Games/StickTheSticker/puzzle3/p34.png b/Games/StickTheSticker/puzzle3/p34.png new file mode 100644 index 0000000000..89623555c6 Binary files /dev/null and b/Games/StickTheSticker/puzzle3/p34.png differ diff --git a/Games/StickTheSticker/puzzle4/p41.png b/Games/StickTheSticker/puzzle4/p41.png new file mode 100644 index 0000000000..63efcfedef Binary files /dev/null and b/Games/StickTheSticker/puzzle4/p41.png differ diff --git a/Games/StickTheSticker/puzzle4/p42.png b/Games/StickTheSticker/puzzle4/p42.png new file mode 100644 index 0000000000..eaa64bfb51 Binary files /dev/null and b/Games/StickTheSticker/puzzle4/p42.png differ diff --git a/Games/StickTheSticker/puzzle4/p43.png b/Games/StickTheSticker/puzzle4/p43.png new file mode 100644 index 0000000000..629baa4650 Binary files /dev/null and b/Games/StickTheSticker/puzzle4/p43.png differ diff --git a/Games/StickTheSticker/puzzle4/p44.png b/Games/StickTheSticker/puzzle4/p44.png new file mode 100644 index 0000000000..5c55241224 Binary files /dev/null and b/Games/StickTheSticker/puzzle4/p44.png differ diff --git a/Games/StickTheSticker/puzzle5/p51.png b/Games/StickTheSticker/puzzle5/p51.png new file mode 100644 index 0000000000..f8c4ca227e Binary files /dev/null and b/Games/StickTheSticker/puzzle5/p51.png differ diff --git a/Games/StickTheSticker/puzzle5/p52.png b/Games/StickTheSticker/puzzle5/p52.png new file mode 100644 index 0000000000..a40af34e4e Binary files /dev/null and b/Games/StickTheSticker/puzzle5/p52.png differ diff --git a/Games/StickTheSticker/puzzle5/p53.png b/Games/StickTheSticker/puzzle5/p53.png new file mode 100644 index 0000000000..20586c7914 Binary files /dev/null and b/Games/StickTheSticker/puzzle5/p53.png differ diff --git a/Games/StickTheSticker/puzzle5/p54.png b/Games/StickTheSticker/puzzle5/p54.png new file mode 100644 index 0000000000..771b27c6f7 Binary files /dev/null and b/Games/StickTheSticker/puzzle5/p54.png differ diff --git a/Games/StickTheSticker/puzzle6/p61.png b/Games/StickTheSticker/puzzle6/p61.png new file mode 100644 index 0000000000..a1274e1aa8 Binary files /dev/null and b/Games/StickTheSticker/puzzle6/p61.png differ diff --git a/Games/StickTheSticker/puzzle6/p62.png b/Games/StickTheSticker/puzzle6/p62.png new file mode 100644 index 0000000000..5e942d4617 Binary files /dev/null and b/Games/StickTheSticker/puzzle6/p62.png differ diff --git a/Games/StickTheSticker/puzzle6/p63.png b/Games/StickTheSticker/puzzle6/p63.png new file mode 100644 index 0000000000..edbbd3adfb Binary files /dev/null and b/Games/StickTheSticker/puzzle6/p63.png differ diff --git a/Games/StickTheSticker/puzzle6/p64.png b/Games/StickTheSticker/puzzle6/p64.png new file mode 100644 index 0000000000..e79040511d Binary files /dev/null and b/Games/StickTheSticker/puzzle6/p64.png differ diff --git a/Games/StickTheSticker/script.js b/Games/StickTheSticker/script.js new file mode 100644 index 0000000000..3412bf6da0 --- /dev/null +++ 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 new file mode 100644 index 0000000000..97ee3b7320 --- /dev/null +++ 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; + } + \ No newline at end of file diff --git a/README.md b/README.md index 63addb5e81..5cb4dda143 100644 --- a/README.md +++ b/README.md @@ -417,8 +417,7 @@ Also join the discord server for GameZone and start collaborating with others | 300 | [reaction_teaser](https://github.com/kunjgit/GameZone/pull/2134/files)| | 301 | [Scribble](https://github.com/kunjgit/GameZone/tree/main/Games/Scribble)| | 302 | [Brain Burst Game](https://github.com/kunjgit/GameZone/tree/main/Games/Brain_Burst_Game)| - - +| 303 | [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 new file mode 100644 index 0000000000..ed5cc9e70a Binary files /dev/null and b/assets/images/Stick_The_Sticker.png differ diff --git a/assets/images/Stick_The_Sticker.webp b/assets/images/Stick_The_Sticker.webp new file mode 100644 index 0000000000..ed5cc9e70a Binary files /dev/null and b/assets/images/Stick_The_Sticker.webp differ