Merge pull request #2642 from Meetjain1/mj-patch1

Feat : Added New game
Sulagna-Dutta-Roy · Aug 10, 2024 · 7082c4c · 7082c4c
2 parents d7b51f7 + 034fcce
commit 7082c4c
Show file tree

Hide file tree

Showing 3 changed files with 201 additions and 0 deletions.
diff --git a/Demolition Game/index.html b/Demolition Game/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Demolition Game</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="game-container">
+    <header class="game-header">
+      <h1>Demolition Game</h1>
+      <div class="score-board">Your Score: <span id="score">0</span></div>
+    </header>
+    <div id="game-board" class="game-board"></div>
+    <button id="reset-button" class="reset-button">Reset Game</button>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Demolition Game/script.js 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
@@ -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;
+  }
+