From ede4ba699bdd63394166202a9c78c1a618e87ef8 Mon Sep 17 00:00:00 2001 From: Aditi Bansal <142652964+Aditi22Bansal@users.noreply.github.com> Date: Sun, 21 Jul 2024 10:43:31 +0530 Subject: [PATCH 1/3] Create index.html --- .../Capture the flag/index.html | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 MultiPlayer - Games/Capture the flag/index.html diff --git a/MultiPlayer - Games/Capture the flag/index.html b/MultiPlayer - Games/Capture the flag/index.html new file mode 100644 index 00000000..547c36fd --- /dev/null +++ b/MultiPlayer - Games/Capture the flag/index.html @@ -0,0 +1,40 @@ + + + + + + Multiplayer Capture the Flag + + + +

Capture the Flag

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + From a4faec2ff40e1d1e11d885f2df5ee572bf5fe136 Mon Sep 17 00:00:00 2001 From: Aditi Bansal <142652964+Aditi22Bansal@users.noreply.github.com> Date: Sun, 21 Jul 2024 10:43:53 +0530 Subject: [PATCH 2/3] Create styles.css --- .../Capture the flag/styles.css | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 MultiPlayer - Games/Capture the flag/styles.css diff --git a/MultiPlayer - Games/Capture the flag/styles.css b/MultiPlayer - Games/Capture the flag/styles.css new file mode 100644 index 00000000..f79c39e8 --- /dev/null +++ b/MultiPlayer - Games/Capture the flag/styles.css @@ -0,0 +1,43 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + margin: 0; + padding: 0; +} + +h1 { + margin-top: 20px; +} + +#game-board { + display: grid; + grid-template-columns: repeat(5, 50px); + grid-template-rows: repeat(5, 50px); + gap: 5px; + justify-content: center; + margin-top: 20px; +} + +.cell { + width: 50px; + height: 50px; + background-color: lightgray; + border: 1px solid #000; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + cursor: pointer; +} + +.player1 { + background-color: lightblue; +} + +.player2 { + background-color: lightcoral; +} + +.flag1, .flag2 { + font-weight: bold; +} From c75dbd8840554985e6621e56ee26fcffb700e91b Mon Sep 17 00:00:00 2001 From: Aditi Bansal <142652964+Aditi22Bansal@users.noreply.github.com> Date: Sun, 21 Jul 2024 10:44:11 +0530 Subject: [PATCH 3/3] Create script.js --- .../Capture the flag/script.js | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 MultiPlayer - Games/Capture the flag/script.js diff --git a/MultiPlayer - Games/Capture the flag/script.js b/MultiPlayer - Games/Capture the flag/script.js new file mode 100644 index 00000000..832b5a6e --- /dev/null +++ b/MultiPlayer - Games/Capture the flag/script.js @@ -0,0 +1,78 @@ +const gameBoard = document.getElementById('game-board'); +const cells = gameBoard.querySelectorAll('.cell'); + +let player1 = { x: 0, y: 0, symbol: '1' }; +let player2 = { x: 4, y: 4, symbol: '2' }; +let flag1 = { x: 0, y: 4, symbol: 'F1' }; +let flag2 = { x: 4, y: 0, symbol: 'F2' }; + +let currentPlayer = player1; + +function render() { + cells.forEach(cell => { + cell.textContent = ''; + cell.classList.remove('player1', 'player2', 'flag1', 'flag2'); + }); + + const player1Cell = gameBoard.querySelector(`[data-x='${player1.x}'][data-y='${player1.y}']`); + const player2Cell = gameBoard.querySelector(`[data-x='${player2.x}'][data-y='${player2.y}']`); + const flag1Cell = gameBoard.querySelector(`[data-x='${flag1.x}'][data-y='${flag1.y}']`); + const flag2Cell = gameBoard.querySelector(`[data-x='${flag2.x}'][data-y='${flag2.y}']`); + + player1Cell.textContent = player1.symbol; + player1Cell.classList.add('player1'); + player2Cell.textContent = player2.symbol; + player2Cell.classList.add('player2'); + flag1Cell.textContent = flag1.symbol; + flag1Cell.classList.add('flag1'); + flag2Cell.textContent = flag2.symbol; + flag2Cell.classList.add('flag2'); +} + +function movePlayer(player, direction) { + switch (direction) { + case 'up': + if (player.y > 0) player.y--; + break; + case 'down': + if (player.y < 4) player.y++; + break; + case 'left': + if (player.x > 0) player.x--; + break; + case 'right': + if (player.x < 4) player.x++; + break; + } + + if (player.x === flag1.x && player.y === flag1.y) { + alert('Player 2 wins!'); + resetGame(); + } else if (player.x === flag2.x && player.y === flag2.y) { + alert('Player 1 wins!'); + resetGame(); + } + + currentPlayer = currentPlayer === player1 ? player2 : player1; + render(); +} + +function handleCellClick(event) { + const x = parseInt(event.target.getAttribute('data-x')); + const y = parseInt(event.target.getAttribute('data-y')); + + if (currentPlayer.x === x && currentPlayer.y === y) { + const direction = prompt('Enter direction (up, down, left, right):'); + movePlayer(currentPlayer, direction); + } +} + +function resetGame() { + player1 = { x: 0, y: 0, symbol: '1' }; + player2 = { x: 4, y: 4, symbol: '2' }; + currentPlayer = player1; + render(); +} + +cells.forEach(cell => cell.addEventListener('click', handleCellClick)); +render();