Merge pull request kunjgit#4186 from dsyste20/Gobblet

Added [New game]: Gobblet kunjgit#3410
Maheshwari-Love · Jun 21, 2024 · b0201a3 · b0201a3
2 parents 30b35d7 + d56b785
commit b0201a3
Show file tree

Hide file tree

Showing 14 changed files with 769 additions and 2 deletions.
diff --git a/Games/Gobblet/README.md 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
diff --git a/Games/Gobblet/images/GobbletBoard.png b/Games/Gobblet/images/GobbletBoard.png
diff --git a/Games/Gobblet/images/GobbletGamePlay.png b/Games/Gobblet/images/GobbletGamePlay.png
diff --git a/Games/Gobblet/images/GobbletSettings.png b/Games/Gobblet/images/GobbletSettings.png
diff --git a/Games/Gobblet/images/GobbletWin.png b/Games/Gobblet/images/GobbletWin.png
diff --git a/Games/Gobblet/index.html b/Games/Gobblet/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gobblet</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="startScreen" class="start-screen">
+        <div class="start-content">
+            <h1>Welcome to Gobblet!</h1>
+            <button id="startButton">Play Game</button>
+        </div>
+    </div>
+
+    <div class="container">
+        <h1>Gobblet</h1>
+        <div class="game-area">
+            <div class="pieces" id="player1-pieces"></div>
+            <div id="board"></div>
+            <div class="pieces" id="player2-pieces"></div>
+        </div>
+        <div id="message"></div>
+        <div id="scoreboard">
+            <p>Player Red Score: <span id="score1">0</span></p>
+            <p>Player Blue Score: <span id="score2">0</span></p>
+        </div>
+        <button id="restartGame">Restart Game</button>
+        <button id="resetScore">Reset Score</button>
+
+        <!-- Instellingen Icon -->
+        <i class="fa-solid fa-gear iconHover" id="settingsIcon"></i>
+
+        <!-- Modal voor instellingen -->
+        <div id="settingsModal" class="modal">
+            <div class="modal-content">
+                <span class="close">&times;</span>
+                <h2>Audio-instellingen</h2>
+                <label for="musicVolume">Muziekvolume:</label>
+                <input type="range" id="musicVolume" min="0" max="1" step="0.01" value="1" onchange="updateMusicVolume(this.value)">
+
+                <label for="effectVolume">Effectvolume:</label>
+                <input type="range" id="effectVolume" min="0" max="1" step="0.01" value="1" onchange="updateEffectVolume(this.value)">
+
+                <label for="autoDim">Automatisch dimmen inschakelen:</label>
+                <input type="checkbox" id="autoDim" checked onchange="toggleAutoDim(this.checked)">
+
+                <button id="playButton">Play Music</button>
+                <button id="pauseButton">Stop Music</button>
+            </div>
+        </div>
+
+        <!-- Win Modal -->
+        <div id="winModal" class="modal">
+            <div class="modal-content">
+                <span class="close">&times;</span>
+                <h1 id="winMessage"></h1>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+    <audio id="backgroundMusic" loop>
+        <source src="mp3/BLACKPINK - Kill This Love Official Instrumental.mp3" type="audio/mp3">
+        Je browser ondersteunt geen audio.
+    </audio>  
+    <audio id="stackSound">
+        <source src="mp3/munch-sound-effect.mp3" type="audio/mp3">
+        Je browser ondersteunt geen audio.
+    </audio>
+</body>
+</html>
diff --git a/Games/Gobblet/mp3/BLACKPINK - Kill This Love Official Instrumental.mp3 b/Games/Gobblet/mp3/BLACKPINK - Kill This Love Official Instrumental.mp3
diff --git a/Games/Gobblet/mp3/munch-sound-effect.mp3 b/Games/Gobblet/mp3/munch-sound-effect.mp3