Merge pull request #1072 from Aditi22Bansal/main

Solved #1071
ChromeGaming · Jul 21, 2024 · 9b18d2e · 9b18d2e
2 parents 9575bee + c75dbd8
commit 9b18d2e
Show file tree

Hide file tree

Showing 3 changed files with 161 additions and 0 deletions.
diff --git a/MultiPlayer - Games/Capture the flag/index.html b/MultiPlayer - Games/Capture the flag/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multiplayer Capture the Flag</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Capture the Flag</h1>
+    <div id="game-board">
+        <div class="cell" data-x="0" data-y="0"></div>
+        <div class="cell" data-x="1" data-y="0"></div>
+        <div class="cell" data-x="2" data-y="0"></div>
+        <div class="cell" data-x="3" data-y="0"></div>
+        <div class="cell" data-x="4" data-y="0"></div>
+        <div class="cell" data-x="0" data-y="1"></div>
+        <div class="cell" data-x="1" data-y="1"></div>
+        <div class="cell" data-x="2" data-y="1"></div>
+        <div class="cell" data-x="3" data-y="1"></div>
+        <div class="cell" data-x="4" data-y="1"></div>
+        <div class="cell" data-x="0" data-y="2"></div>
+        <div class="cell" data-x="1" data-y="2"></div>
+        <div class="cell" data-x="2" data-y="2"></div>
+        <div class="cell" data-x="3" data-y="2"></div>
+        <div class="cell" data-x="4" data-y="2"></div>
+        <div class="cell" data-x="0" data-y="3"></div>
+        <div class="cell" data-x="1" data-y="3"></div>
+        <div class="cell" data-x="2" data-y="3"></div>
+        <div class="cell" data-x="3" data-y="3"></div>
+        <div class="cell" data-x="4" data-y="3"></div>
+        <div class="cell" data-x="0" data-y="4"></div>
+        <div class="cell" data-x="1" data-y="4"></div>
+        <div class="cell" data-x="2" data-y="4"></div>
+        <div class="cell" data-x="3" data-y="4"></div>
+        <div class="cell" data-x="4" data-y="4"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/MultiPlayer - Games/Capture the flag/script.js 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();
diff --git a/MultiPlayer - Games/Capture the flag/styles.css 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;
+}