diff --git a/Games/Gobblet/README.md b/Games/Gobblet/README.md new file mode 100644 index 0000000000..7f05f5dfd7 --- /dev/null +++ b/Games/Gobblet/README.md @@ -0,0 +1,42 @@ +# Gobblet + +## Description 📃 +Gobblet is a strategic board game where players take +turns placing their pieces on a 5x5 grid. Each player has 3 pieces +of each four different sizes (that makes 12 pieces total), and the objective +is to align five pieces of their color in a row either horizontally, +vertically, or diagonally. Pieces can be placed on top of smaller pieces, +and if a larger piece is moved, the smaller piece underneath it becomes +visible again. + +## Functionalities 🎮 +- **Piece Placement**: Players can select a piece and place it on the board. Pieces can only be placed on empty cells or on top of smaller pieces. +- **Piece Movement**: Players can move their pieces already on the board to another cell. +- **Stacking**: Pieces can stack on top of each other. If the top piece is moved, the piece underneath becomes visible again. +- **Win Condition**: The game checks for a winning condition when five pieces of the same player align in a row. +- **Score Keeping**: The game keeps track of the score, awarding points for each win. +- **Restart Game**: Players can restart the game while keeping the current score. +- **Reset Score**: Players can reset the scores to zero. + +## How to play? 🕹ī¸ +1. **Select a Piece**: Click on one of your available pieces to select it. +2. **Place or Move a Piece**: Click on an empty cell or on top of a smaller piece on the board to place the selected piece. You can also move pieces already on the board. +3. **Win the Game**: Align five of your pieces in a row either horizontally, vertically, or diagonally to win the game and score a point. +4. **Restart or Reset**: Use the "Restart Game" button to start a new game or "Reset Score" to reset the scores to zero. + +## Screenshots 📸 +### Initial Screen +![Initial Screen](images/Gobblet.png) + +### The Board +![Piece Selection](images/GobbletBoard.png) + +### Gameplay +![Piece Selection](images/GobbletGamePlay.png) + +### Winning Condition +![Winning Condition](images/GobbletWin.png) + +### Settings +![Settings](images/GobbletSettings.png) + diff --git a/Games/Gobblet/images/Gobblet.png b/Games/Gobblet/images/Gobblet.png new file mode 100644 index 0000000000..889a303e4a Binary files /dev/null and b/Games/Gobblet/images/Gobblet.png differ diff --git a/Games/Gobblet/images/GobbletBoard.png b/Games/Gobblet/images/GobbletBoard.png new file mode 100644 index 0000000000..ec6be23d50 Binary files /dev/null and b/Games/Gobblet/images/GobbletBoard.png differ diff --git a/Games/Gobblet/images/GobbletGamePlay.png b/Games/Gobblet/images/GobbletGamePlay.png new file mode 100644 index 0000000000..d6567048d4 Binary files /dev/null and b/Games/Gobblet/images/GobbletGamePlay.png differ diff --git a/Games/Gobblet/images/GobbletSettings.png b/Games/Gobblet/images/GobbletSettings.png new file mode 100644 index 0000000000..fdd276e375 Binary files /dev/null and b/Games/Gobblet/images/GobbletSettings.png differ diff --git a/Games/Gobblet/images/GobbletWin.png b/Games/Gobblet/images/GobbletWin.png new file mode 100644 index 0000000000..1c3a2ff8e0 Binary files /dev/null and b/Games/Gobblet/images/GobbletWin.png differ diff --git a/Games/Gobblet/index.html b/Games/Gobblet/index.html new file mode 100644 index 0000000000..5539cf3930 --- /dev/null +++ b/Games/Gobblet/index.html @@ -0,0 +1,74 @@ + + + + + + + Gobblet + + + +
+
+

Welcome to Gobblet!

+ +
+
+ +
+

Gobblet

+
+
+
+
+
+
+
+

Player Red Score: 0

+

Player Blue Score: 0

+
+ + + + + + + + + + + +
+ + + + + + diff --git a/Games/Gobblet/mp3/BLACKPINK - Kill This Love Official Instrumental.mp3 b/Games/Gobblet/mp3/BLACKPINK - Kill This Love Official Instrumental.mp3 new file mode 100644 index 0000000000..c2a01baeb6 Binary files /dev/null and b/Games/Gobblet/mp3/BLACKPINK - Kill This Love Official Instrumental.mp3 differ diff --git a/Games/Gobblet/mp3/munch-sound-effect.mp3 b/Games/Gobblet/mp3/munch-sound-effect.mp3 new file mode 100644 index 0000000000..4ee54b40f1 Binary files /dev/null and b/Games/Gobblet/mp3/munch-sound-effect.mp3 differ diff --git a/Games/Gobblet/script.js b/Games/Gobblet/script.js new file mode 100644 index 0000000000..819dd54e64 --- /dev/null +++ b/Games/Gobblet/script.js @@ -0,0 +1,408 @@ +document.addEventListener("DOMContentLoaded", function() { + const startButton = document.getElementById('startButton'); + const startScreen = document.getElementById('startScreen'); + const board = document.getElementById("board"); + const player1Pieces = document.getElementById("player1-pieces"); + const player2Pieces = document.getElementById("player2-pieces"); + const message = document.getElementById("message"); + const winMessage = document.getElementById("winMessage"); + const score1 = document.getElementById("score1"); + const score2 = document.getElementById("score2"); + const restartGameButton = document.getElementById("restartGame"); + const resetScoreButton = document.getElementById("resetScore"); + const playButton = document.getElementById('playButton'); + const pauseButton = document.getElementById('pauseButton'); + const backgroundMusic = document.getElementById('backgroundMusic'); + const stackSound = document.getElementById('stackSound'); + const autoDim = document.getElementById('autoDim'); + const musicVolume = document.getElementById('musicVolume'); + const effectVolume = document.getElementById('effectVolume'); + const settingsIcon = document.getElementById('settingsIcon'); + const closeButton = document.querySelector('.close'); + + //Player that always begins is Red + let currentPlayer = 1; + //Player 1 is Red + let colorPlayer = "Red"; + //At the beginning no pieces are selected + let selectedPiece = null; + let boardState = new Array(25).fill(null).map(() => []); + let autoDimEnabled = true; + //Variable to control the game state + let gameOver = false; + + //Handle failed attempt to automatically play music on document load + backgroundMusic.play().catch(error => { + console.error("Error!, Automatic playing of the backgroundmusic!", error); + }); + + //Start button for the game + startButton.addEventListener('click', function() { + startScreen.style.display = 'none'; + backgroundMusic.play(); + }); + + //Initialize each cell on the board + for (let i = 0; i < 25; i++) { + let cell = document.createElement("div"); + cell.className = "cell"; + cell.dataset.index = i; + board.appendChild(cell); + //Set up click event listeners + cell.addEventListener('click', function() { + //Prevent interaction if the game is over + if (gameOver) return; + + if (selectedPiece && parseInt(selectedPiece.dataset.player) === currentPlayer && canPlacePiece(cell)) { + placePiece(cell, parseInt(cell.dataset.index)); + } else if (!selectedPiece && cell.querySelector('.piece') && parseInt(cell.querySelector('.piece').dataset.player) === currentPlayer) { + selectPiece(cell.querySelector('.piece'), parseInt(cell.dataset.index)); + } else if (!selectedPiece && boardState[i].length > 0 && parseInt(boardState[i][boardState[i].length - 1].dataset.player) === currentPlayer) { + selectPiece(boardState[i][boardState[i].length - 1], i); + } + }); + } + + //Initialize pieces for both player + function initializePieces() { + [player1Pieces, player2Pieces].forEach((container, index) => { + //Clear previous pieces + container.innerHTML = ''; + const player = index + 1; + [4, 3, 2, 1].forEach(size => { + for (let i = 0; i < 3; i++) { + let piece = document.createElement("div"); + piece.className = `piece piece${size}`; + piece.dataset.size = size; + piece.dataset.player = player; + container.appendChild(piece); + //Attach event listener for selecting pieces + piece.addEventListener('click', function() { + if (parseInt(piece.dataset.player) === currentPlayer && !piece.classList.contains('used')) { + selectPiece(piece); + } + }); + } + }); + }); + } + + //Select or deselect a piece when clicked + function selectPiece(piece, index) { + if (selectedPiece === piece) { + piece.classList.remove('selected'); + selectedPiece = null; + message.textContent = `Player ${colorPlayer}: Select a piece to play or move.`; + return; + } + if (selectedPiece) { + selectedPiece.classList.remove('selected'); + } + + selectedPiece = piece; + selectedPiece.classList.add('selected'); + message.textContent = `Player ${colorPlayer}: Click on the board to place or move it.`; + } + + //Determine if a piece can be placed on a specific cell + function canPlacePiece(cell) { + const topPiece = cell.querySelector('.piece'); + return (!topPiece || (parseInt(selectedPiece.dataset.size) > parseInt(topPiece.dataset.size) && parseInt(selectedPiece.dataset.player) !== parseInt(topPiece.dataset.player))) && !selectedPiece.classList.contains('used'); + } + + //Remove a piece from the pool when it has been placed on the board + function removePieceFromPool(selectedPiece) { + selectedPiece.classList.add('used'); + selectedPiece.style.display = 'none'; + } + + //Place a piece on a cell + function placePiece(cell, index) { + if (selectedPiece.parentNode.classList.contains('cell')) { + removePieceFromCell(selectedPiece.parentNode); + } + + const newPiece = createNewPiece(index); + addPieceToCell(newPiece, cell, index); + removePieceFromPool(selectedPiece); + + selectedPiece = null; + document.querySelectorAll('.selected').forEach(p => p.classList.remove('selected')); + + //check if placing the piece leads to a win + if (checkWin(currentPlayer)) { + gameOver = true; + message.textContent = `Player ${colorPlayer} wins!`; + document.getElementById('winMessage').textContent = `Player ${colorPlayer} wins!`; + showModal(); + updateScore(); + // setTimeout(() => alert(`Player ${colorPlayer} wins!`), 100); + } else { + switchPlayer(); + } + } + + function showModal() { + const modal = document.getElementById('winModal'); + modal.style.display = 'block'; + const closeBtn = modal.querySelector('.close'); + closeBtn.onclick = function() { + modal.style.display = 'none'; + }; + } + + //Remove a piece from a cell when another piece is placed on top of it + function removePieceFromCell(cell) { + const originalIndex = parseInt(selectedPiece.parentNode.dataset.index); + const stack = boardState[originalIndex]; + const removedPiece = stack.pop(); + if (stack.length > 0) { + const underlyingPiece = stack[stack.length - 1]; + const cellUnderlying = document.querySelector(`[data-index="${originalIndex}"]`); + //Clear the cell + cellUnderlying.innerHTML = ''; + //Add the bottom piece back to the cell + cellUnderlying.appendChild(underlyingPiece.cloneNode(true)); + } else { + //Clear the cell + cell.innerHTML = ''; + //Update the board state to indicate the cell is empty + boardState[originalIndex] = []; + } + + checkWinAfterMove(); + } + + function checkWinAfterMove() { + if (checkWin(1)) { + gameOver = true; + winMessage.textContent = `Player Red wins!`; + showModal(); + updateScoreStcks(); + } else if (checkWin(2)) { + gameOver = true; + winMessage.textContent = `Player Blue wins!`; + showModal(); + updateScoreStcks(); + } + } + + function updateScoreStcks() { + if (currentPlayer === 1) { + score2.textContent = parseInt(score2.textContent) + 1; + } else { + score1.textContent = parseInt(score1.textContent) + 1; + } + } + + //Create a new piece based on the selected piece's properties + function createNewPiece(index) { + const newPiece = selectedPiece.cloneNode(true); + newPiece.dataset.index = index; + return newPiece; + } + + //Add a piece to a cell + update the board state + function addPieceToCell(piece, cell, index) { + const topPiece = cell.querySelector('.piece'); + if (topPiece) { + const stack = boardState[index]; + stack.push(piece); + cell.appendChild(piece); + + //Play a sound when a piece is placed on top of another piece + playStackSound(); + } else { + //Clear the cell + cell.innerHTML = ''; + cell.appendChild(piece); + //Update the board state to include the new piece + boardState[index] = [piece]; + } + } + + //Check if the current player has won the game + function checkWin(player) { + const lines = [ + [0, 1, 2, 3, 4], [5, 6, 7, 8, 9], [10, 11, 12, 13, 14], + [15, 16, 17, 18, 19], [20, 21, 22, 23, 24], + [0, 5, 10, 15, 20], [1, 6, 11, 16, 21], [2, 7, 12, 17, 22], + [3, 8, 13, 18, 23], [4, 9, 14, 19, 24], + [0, 6, 12, 18, 24], [4, 8, 12, 16, 20] + ]; + + return lines.some(line => { + let consecutiveCount = 0; + for (let i = 0; i < line.length; i++) { + const index = line[i]; + const cell = document.querySelector(`.cell[data-index="${index}"]`); + const topPiece = cell.querySelector('.piece:last-child'); + if (topPiece && parseInt(topPiece.dataset.player) === player) { + consecutiveCount++; + if (consecutiveCount === 5) { + //Player wins if they have five consecutive pieces + return true; + } + } else { + consecutiveCount = 0; + } + } + //Return false if no winning line is found + return false; + }); + } + + //Update the score for the current player + function updateScore() { + if (currentPlayer === 1) { + score1.textContent = parseInt(score1.textContent) + 1; + } else { + score2.textContent = parseInt(score2.textContent) + 1; + } + } + + //Switch the current player + function switchPlayer() { + currentPlayer = currentPlayer === 1 ? 2 : 1; + if (currentPlayer == 1) { + colorPlayer = "Red"; + } else { + colorPlayer = "Blue"; + } + //Deselect any selected piece + selectedPiece = null; + document.querySelectorAll('.selected').forEach(p => p.classList.remove('selected')); + message.textContent = `Player ${colorPlayer}: Select a piece to play or move.`; + } + + //Reset the game to its initial state + function resetGame() { + boardState.fill(null).map(() => ({ size: 0, player: null })); + document.querySelectorAll('.cell').forEach(cell => cell.innerHTML = ''); + document.querySelectorAll('.piece').forEach(piece => { + //Restore visibility for new game + piece.style.display = ''; + piece.classList.remove('used'); + piece.classList.remove('selected'); + }); + + gameOver = false; + //Hide the modal on game reset + document.getElementById('winModal').style.display = 'none'; + //Reinitialize pieces + initializePieces(); + currentPlayer = 1; + message.textContent = `Player Red begins.`; + } + + //Reset the score for both players to zero + function resetScore() { + score1.textContent = '0'; + score2.textContent = '0'; + } + + settingsIcon.addEventListener('click', function() { + document.getElementById('settingsModal').style.display = 'block'; + }); + + closeButton.addEventListener('click', function() { + document.getElementById('settingsModal').style.display = 'none'; + }); + + window.onclick = function(event) { + const modal = document.getElementById('settingsModal'); + if (event.target == modal) { + modal.style.display = 'none'; + } + }; + + const backgroundMusicController = (function() { + const musicElement = document.getElementById('backgroundMusic'); + + function play() { + musicElement.play(); + } + + function pause() { + musicElement.pause(); + } + + function setVolume(volumeLevel) { + musicElement.volume = volumeLevel; + } + + return { + play: play, + pause: pause, + setVolume: setVolume + }; + })(); + + function updateMusicVolume(volume) { + backgroundMusic.volume = volume; + } + + function updateEffectVolume(volume) { + stackSound.volume = volume; + } + + function toggleAutoDim(enabled) { + autoDimEnabled = enabled; + } + + function adjustMusicVolumeForStackSound() { + if (!autoDimEnabled) return; + + const originalVolume = backgroundMusic.volume; + //Dim the music to 50% of the original volume when the stack sound plays + backgroundMusic.volume *= 0.5; + stackSound.play(); + + stackSound.onended = function() { + //Restore the original music volume when the stack sound ends + backgroundMusic.volume = originalVolume; + }; + } + + function playStackSound() { + if (autoDimEnabled) { + adjustMusicVolumeForStackSound(); + stackSound.play(); + } else { + //Play the stack sound when a piece is placed on top of another + stackSound.play(); + } + } + + //Set the initial message when the document is loaded + message.textContent = `Player Red begins.`; + //Attach event listener to the restart game button + restartGameButton.addEventListener('click', resetGame); + //Attach event listener to the reset score button + resetScoreButton.addEventListener('click', resetScore); + playButton.addEventListener('click', function() { + //Play the background music when the play button is clicked + backgroundMusicController.play(); + }); + pauseButton.addEventListener('click', function() { + //Pause the background music when the pause button is clicked + backgroundMusicController.pause(); + }); + autoDim.addEventListener('change', function() { + //Toggle the auto dim feature based on the checkbox state + toggleAutoDim(this.checked); + }); + + musicVolume.addEventListener('input', function() { + //Update the music volume as the music volume slider changes + updateMusicVolume(this.value); + }); + + effectVolume.addEventListener('input', function() { + //Update the effect volume as the effect volume slider changes + updateEffectVolume(this.value); + }); + + //Initialize the pieces for both players when the document is loaded + initializePieces(); +}); diff --git a/Games/Gobblet/style.css b/Games/Gobblet/style.css new file mode 100644 index 0000000000..78dada0253 --- /dev/null +++ b/Games/Gobblet/style.css @@ -0,0 +1,242 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: rgb(26, 26, 26); + font-family: Arial, sans-serif; +} + +.start-screen { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.start-content { + text-align: center; + color: white; + padding: 20px; + border-radius: 10px; + background: #333; +} + +#startButton { + padding: 10px 20px; + font-size: 20px; + color: #fff; + background-color: #007BFF; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +#startButton:hover { + background-color: #0056b3; +} + +.container { + text-align: center; + background-color: white; + padding: 40px; + border-radius: 20px; +} + +h1 { + color: #FF6347; + text-align: center; + font-size: 3em; + text-transform: uppercase; + text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1); + margin: 20px; + +} + +.game-area { + display: flex; + justify-content: center; + align-items: center; +} + +.pieces { + display: flex; + flex-direction: column; + gap: 5px; + margin-left: 20px; +} + +#board { + display: grid; + grid-template-columns: repeat(5, 80px); + grid-template-rows: repeat(5, 80px); + gap: 5px; + margin: 20px; +} + +.cell { + width: 80px; + height: 80px; + background-color: rgb(221, 177, 255); + border-radius: 50%; + border: 2px solid rgb(179, 80, 255); + display: flex; + justify-content: center; + align-items: center; + position: relative; + margin: 10px; + overflow: hidden; +} + +.cell::before { + content: ''; + position: absolute; + top: 10px; + left: 10px; + right: 10px; + bottom: 10px; + border-radius: 50%; +} + +.cell .piece { + position: absolute; + display: flex; + justify-content: center; + align-items: center; +} + +.piece1 { + width: 20px; + height: 20px; + background-color: #ffc8c8; + border-radius: 50%; + border: 3px solid #5ccd00; +} + +.piece2 { + width: 30px; + height: 30px; + background-color: #fd8282; + border-radius: 50%; + border: 3px solid #5ccd00; +} + +.piece3 { + width: 40px; + height: 40px; + background-color: #c43232; + border-radius: 50%; + border: 3px solid #5ccd00; +} + +.piece4 { + width: 50px; + height: 50px; + background-color: #8d0000; + border-radius: 50%; + border: 3px solid #5ccd00; +} + +.piece[data-player="2"].piece1 { + background-color: #ADD8E6; +} + +.piece[data-player="2"].piece2 { + background-color: #87CEEB; +} + +.piece[data-player="2"].piece3 { + background-color: #4682B4; +} + +.piece[data-player="2"].piece4 { + background-color: #0000CD; +} + + +.piece.selected { + border: 3px solid gold; +} + +#message { + margin: 20px 0; + font-size: 1.5em; +} + +#restartGame, +#resetScore, +#playButton, +#pauseButton { + padding: 10px 20px; + font-size: 1em; + cursor: pointer; + margin: 10px; + border-radius: 10px; +} + +#restartGame:hover, +#resetScore:hover, +#playButton:hover, +#pauseButton:hover { + background-color: #dbdbdb; + border: 2px solid gold; +} + +.iconHover:hover { + color: #ff0000; +} + +#scoreboard { + margin: 20px 0; + font-size: 1.2em; +} + +.modal { + display: none; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(39, 39, 39, 0.4); +} + +.modal-content { + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 3px solid red; + border-radius: 20px; + width: 50%; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: red; + text-decoration: none; + cursor: pointer; +} + +/* Keyframes voor de wiggle animatie */ +@keyframes wiggle { + 0%, 100% { + transform: rotate(-1deg) scaleX(-1); + } + 50% { + transform: rotate(1deg) scaleX(-1); + } +} diff --git a/README.md b/README.md index 3b5ae64418..9beae2b51a 100644 --- a/README.md +++ b/README.md @@ -108,8 +108,9 @@ This repository also provides one such platforms where contributers come over an | Game | Game | Game | Game | Game | -| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | + | [Master Typing](https://github.com/kunjgit/GameZone/tree/main/Games/Master_Typing) | [Treasure Hunt](https://github.com/Antiquely3059/GameZone/tree/main/Games/Treasure%20Hunt) | [Virtual Pet](https://github.com/Antiquely3059/GameZone/tree/main/Games/Virtual_Pet) | [MazeRunner](https://github.com/kunjgit/GameZone/tree/main/Games/MazeRunner) | [Ping_Pong_Singleplayer](https://github.com/kunjgit/GameZone/tree/main/Games/Ping_Pong_Singleplayer) | | + | [Tilting Maze](https://github.com/kunjgit/GameZone/tree/main/Games/Tilting_Maze) | [Simon Game Challenge](https://github.com/kunjgit/GameZone/tree/main/Games/Simon_Game_Challenge) | [Snake Game](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Game) | [Dino Runner Game](https://github.com/kunjgit/GameZone/tree/main/Games/Dino_Runner_Game) | | [Whack a Mole](https://github.com/kunjgit/GameZone/tree/main/Games/Whack_a_Mole) | [Doraemon Jump](https://github.com/kunjgit/GameZone/tree/main/Games/Doraemon_Jump) | [Black Jack](https://github.com/kunjgit/GameZone/tree/main/Games/Black_Jack) | [Memory Game](https://github.com/kunjgit/GameZone/tree/main/Games/Memory_Game) | [Word Guessing Game](https://github.com/kunjgit/GameZone/tree/main/Games/Word_Guessing_Game) | | [Ludo Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ludo_Game) | [Piano Game](https://github.com/kunjgit/GameZone/tree/main/Games/Piano) | [Atari Breakout](https://github.com/kunjgit/GameZone/tree/main/Games/Atari_Breakout) | [Dinosaur Game](https://github.com/kunjgit/GameZone/tree/main/Games/Chrome_Dinosaur_Game) | [Guess The Colour by RGB Game](https://github.com/kunjgit/GameZone/tree/main/Games/Colour_Guessing_Game) | @@ -190,7 +191,7 @@ This repository also provides one such platforms where contributers come over an | [CSS Select](https://github.com/kunjgit/GameZone/tree/main/Games/CSS_Select) | [Squid](https://github.com/kunjgit/GameZone/tree/main/Games/Squid_Game) | [Flip Coin](https://github.com/kunjgit/GameZone/tree/main/Games/Flip_Coin) | [Witty Word Quest](https://github.com/kunjgit/GameZone/tree/main/Games/witty_word_quest) | [Typing Game](https://github.com/Ishan-77/GameZone/tree/main/Games/Typing_Game) | | [numeral-whiz](https://github.com/Ishan-77/GameZone/tree/main/Games/numeral-whiz) | [candy_match](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Match_Saga) | [Crossy_Road](https://github.com/tanujbordikar/GameZone/tree/Crossy_Road) | [HueHero](https://github.com/kunjgit/GameZone/tree/main/Games/HueHero) | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner) | | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon) | [Color_Blast](https://github.com/kunjgit/GameZone/tree/main/Games/Color_Blast) | -| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [Coloron](https://github.com/kunjgit/GameZone/tree/main/Games/Coloron). | +| [Maze_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Maze_Game) | [Coloron](https://github.com/kunjgit/GameZone/tree/main/Games/Coloron). | [Gobblet](https://github.com/kunjgit/GameZone/tree/main/Games/Gobblet) | | [Black_jackk](https://github.com/kunjgit/GameZone/tree/main/Games/Black_jackk) | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | | | | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder) | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who) | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon) | | diff --git a/assets/images/Gobblet.png b/assets/images/Gobblet.png new file mode 100644 index 0000000000..b48cf2f787 Binary files /dev/null and b/assets/images/Gobblet.png differ diff --git a/assets/images/Gobblet.webp b/assets/images/Gobblet.webp new file mode 100644 index 0000000000..f8e2b03dbf Binary files /dev/null and b/assets/images/Gobblet.webp differ