From c25508fab111a924f3419b2b6e73c377865d3eb4 Mon Sep 17 00:00:00 2001 From: Meet Jain Date: Fri, 9 Aug 2024 09:29:09 +0530 Subject: [PATCH] Added Demolition Game --- Demolition Game/index.html | 20 ++++++++ Demolition Game/script.js | 93 ++++++++++++++++++++++++++++++++++++++ Demolition Game/styles.css | 88 ++++++++++++++++++++++++++++++++++++ 3 files changed, 201 insertions(+) create mode 100644 Demolition Game/index.html create mode 100644 Demolition Game/script.js create mode 100644 Demolition Game/styles.css diff --git a/Demolition Game/index.html b/Demolition Game/index.html new file mode 100644 index 00000000..c2f511d5 --- /dev/null +++ b/Demolition Game/index.html @@ -0,0 +1,20 @@ + + + + + + Demolition Game + + + +
+
+

Demolition Game

+
Your Score: 0
+
+
+ +
+ + + diff --git a/Demolition Game/script.js b/Demolition Game/script.js new file mode 100644 index 00000000..333b6442 --- /dev/null +++ b/Demolition 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/Demolition Game/styles.css b/Demolition Game/styles.css new file mode 100644 index 00000000..406c8d42 --- /dev/null +++ b/Demolition Game/styles.css @@ -0,0 +1,88 @@ +body { + margin: 40; + padding: 20; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: #dedde4; + font-family: Arial, sans-serif; + color: #2518e0; + } + + .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: #ece7e7; + border: 2px solid #e01212; + 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: #1416a0; + } + + .reset-button { + margin-top: 20px; + padding: 10px 20px; + background: #0f12dd; + border: none; + border-radius: 5px; + color: #fff; + cursor: pointer; + font-size: 1em; + } + + .reset-button:hover { + background: #0d0e0d; + } + \ No newline at end of file