diff --git a/README.md b/README.md index eb082bc2..0aacec62 100644 --- a/README.md +++ b/README.md @@ -261,6 +261,7 @@ ________________________________________________________________________________ | 203 | [Duck_Hunt_Game](.SinglePlayer%20-%20Games/Duck_Hunt_Game) | | 204 | [Breakout_Game](.SinglePlayer%20-%20Games/BreakOut_Game) | | 205 | [Breakout_Game](.SinglePlayer%20-%20Games/Maze_Game) | +| 206 | [Breakout_Game](.SinglePlayer%20-%20Games/Bomber_Game) | diff --git a/SinglePlayer - Games/Bomber game/index.html b/SinglePlayer - Games/Bomber game/index.html new file mode 100644 index 00000000..7eec127e --- /dev/null +++ b/SinglePlayer - Games/Bomber game/index.html @@ -0,0 +1,20 @@ + + + + + + Bomberman Game + + + +
+
+

Bomberman Game

+
Score: 0
+
+
+ +
+ + + diff --git a/SinglePlayer - Games/Bomber game/script.js b/SinglePlayer - Games/Bomber game/script.js new file mode 100644 index 00000000..333b6442 --- /dev/null +++ b/SinglePlayer - Games/Bomber game/script.js @@ -0,0 +1,93 @@ +const gameBoard = document.getElementById('game-board'); +const scoreElement = document.getElementById('score'); +const resetButton = document.getElementById('reset-button'); + +const boardSize = 10; +const playerPosition = { x: 0, y: 0 }; +let score = 0; + +function createBoard() { + gameBoard.innerHTML = ''; + for (let i = 0; i < boardSize; i++) { + for (let j = 0; j < boardSize; j++) { + const cell = document.createElement('div'); + cell.classList.add('grid-cell'); + cell.dataset.x = j; + cell.dataset.y = i; + gameBoard.appendChild(cell); + } + } + placePlayer(); +} + +function placePlayer() { + const playerCell = document.querySelector(`.grid-cell[data-x='${playerPosition.x}'][data-y='${playerPosition.y}']`); + const player = document.createElement('div'); + player.classList.add('player'); + playerCell.appendChild(player); +} + +function movePlayer(dx, dy) { + const newX = playerPosition.x + dx; + const newY = playerPosition.y + dy; + if (newX >= 0 && newX < boardSize && newY >= 0 && newY < boardSize) { + playerPosition.x = newX; + playerPosition.y = newY; + createBoard(); + } +} + +function placeBomb() { + const bombCell = document.querySelector(`.grid-cell[data-x='${playerPosition.x}'][data-y='${playerPosition.y}']`); + const bomb = document.createElement('div'); + bomb.classList.add('bomb'); + bombCell.appendChild(bomb); + setTimeout(() => explodeBomb(bombCell), 2000); +} + +function explodeBomb(cell) { + const bomb = cell.querySelector('.bomb'); + if (bomb) { + bomb.remove(); + cell.classList.add('explosion'); + setTimeout(() => { + cell.classList.remove('explosion'); + score += 10; + updateScore(); + }, 500); + } +} + +function updateScore() { + scoreElement.textContent = score; +} + +document.addEventListener('keydown', (e) => { + switch (e.key) { + case 'ArrowUp': + movePlayer(0, -1); + break; + case 'ArrowDown': + movePlayer(0, 1); + break; + case 'ArrowLeft': + movePlayer(-1, 0); + break; + case 'ArrowRight': + movePlayer(1, 0); + break; + case ' ': + placeBomb(); + break; + } +}); + +resetButton.addEventListener('click', () => { + score = 0; + updateScore(); + playerPosition.x = 0; + playerPosition.y = 0; + createBoard(); +}); + +createBoard(); diff --git a/SinglePlayer - Games/Bomber game/styles.css b/SinglePlayer - Games/Bomber game/styles.css new file mode 100644 index 00000000..332f6b8e --- /dev/null +++ b/SinglePlayer - Games/Bomber game/styles.css @@ -0,0 +1,88 @@ +body { + margin: 40; + padding: 20; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: #222; + font-family: Arial, sans-serif; + color: #fff; + } + + .game-container { + text-align: center; + } + + .game-header { + margin-bottom: 0px; + } + + .score-board { + font-size: 1.5em; + } + + .game-board { + display: grid; + grid-template-columns: repeat(10, 50px); + grid-template-rows: repeat(10, 50px); + gap: 5px; + margin: 0 auto; + } + + .grid-cell { + width: 50px; + height: 50px; + background: #444; + border: 2px solid #666; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + position: relative; + } + + .player { + width: 80%; + height: 80%; + background: #4caf50; + border-radius: 50%; + } + + .bomb { + width: 80%; + height: 80%; + background: #f44336; + border-radius: 50%; + position: absolute; + top: 10%; + left: 10%; + } + + .explosion { + width: 100%; + height: 100%; + background: orange; + } + + .obstacle { + width: 100%; + height: 100%; + background: #888; + } + + .reset-button { + margin-top: 20px; + padding: 10px 20px; + background: #4caf50; + border: none; + border-radius: 5px; + color: #fff; + cursor: pointer; + font-size: 1em; + } + + .reset-button:hover { + background: #45a049; + } + \ No newline at end of file