Feat : Add Tug of war game

ChromeGaming · Jul 29, 2024 · 89273a5 · 89273a5
1 parent 059442b
commit 89273a5
Show file tree

Hide file tree

Showing 4 changed files with 221 additions and 3 deletions.
diff --git a/MultiPlayer - Games/Tug of war/index.html b/MultiPlayer - Games/Tug of war/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tug of War Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <div class="scoreboard">
+            <div id="player1-score" class="score">Player 1: 0</div>
+            <div id="player2-score" class="score">Player 2: 0</div>
+        </div>
+        <div class="game-area">
+            <div id="rope" class="rope"></div>
+            <div id="marker" class="marker"></div>
+        </div>
+        <div class="instructions">
+            <p>Player 1: Press "A"</p>
+            <p>Player 2: Press "L"</p>
+        </div>
+        <div id="result" class="result"></div>
+        <button id="start-btn" class="btn">Start Game</button>
+        <button id="reset-btn" class="btn">Reset Game</button>
+        <div id="countdown" class="countdown"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/MultiPlayer - Games/Tug of war/script.js b/MultiPlayer - Games/Tug of war/script.js
@@ -0,0 +1,80 @@
+let player1Score = 0;
+let player2Score = 0;
+const winningScore = 10;
+const scoreIncrement = 1;
+const marker = document.getElementById('marker');
+const result = document.getElementById('result');
+const startBtn = document.getElementById('start-btn');
+const resetBtn = document.getElementById('reset-btn');
+const countdownEl = document.getElementById('countdown');
+let gameStarted = false;
+
+document.addEventListener('keydown', function(event) {
+    if (gameStarted) {
+        if (event.key === 'a' || event.key === 'A') {
+            player1Score += scoreIncrement;
+            updateMarker();
+        } else if (event.key === 'l' || event.key === 'L') {
+            player2Score += scoreIncrement;
+            updateMarker();
+        }
+    }
+});
+
+startBtn.addEventListener('click', function() {
+    startGame();
+});
+
+resetBtn.addEventListener('click', function() {
+    resetGame();
+});
+
+function startGame() {
+    startBtn.disabled = true;
+    resetBtn.disabled = true;
+    let countdown = 5;
+    countdownEl.style.display = 'block';
+    countdownEl.textContent = countdown;
+
+    const countdownInterval = setInterval(() => {
+        countdown--;
+        countdownEl.textContent = countdown;
+        if (countdown <= 0) {
+            clearInterval(countdownInterval);
+            countdownEl.style.display = 'none';
+            gameStarted = true;
+            startBtn.disabled = true;
+            resetBtn.disabled = false;
+        }
+    }, 1000);
+}
+
+function updateMarker() {
+    const totalScore = player1Score + player2Score;
+    const player1Ratio = player1Score / totalScore;
+    const newLeftPosition = 50 - (player1Ratio * 50) + (player2Score / totalScore * 50);
+    marker.style.left = `${newLeftPosition}%`;
+
+    document.getElementById('player1-score').textContent = `Player 1: ${player1Score}`;
+    document.getElementById('player2-score').textContent = `Player 2: ${player2Score}`;
+
+    if (player1Score >= winningScore) {
+        endGame('Player 1');
+    } else if (player2Score >= winningScore) {
+        endGame('Player 2');
+    }
+}
+
+function endGame(winner) {
+    result.textContent = `Congratulations ${winner}, you win!`;
+    result.style.display = 'block';
+    gameStarted = false;
+    startBtn.disabled = false;
+    resetBtn.disabled = true;
+}
+
+function resetGame() {
+    window.location.reload();
+}
+
+updateMarker();
diff --git a/MultiPlayer - Games/Tug of war/styles.css b/MultiPlayer - Games/Tug of war/styles.css
@@ -0,0 +1,108 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
+    margin: 0;
+}
+
+.container {
+    text-align: center;
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    max-width: 500px;
+    width: 100%;
+}
+
+.scoreboard {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.score {
+    font-size: 1.2em;
+    font-weight: bold;
+}
+
+.game-area {
+    position: relative;
+    height: 100px;
+    background: #fff3e0;
+    border: 2px solid #e0e0e0;
+    border-radius: 10px;
+    margin-bottom: 20px;
+}
+
+.rope {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 300px;
+    height: 5px;
+    background: #d32f2f;
+    transform: translate(-50%, -50%);
+}
+
+.marker {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    background: #1976d2;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.instructions {
+    font-size: 1em;
+    margin-bottom: 20px;
+}
+
+.result {
+    font-size: 1.5em;
+    font-weight: bold;
+    color: #388e3c;
+    display: none;
+}
+
+.btn {
+    padding: 10px 20px;
+    margin: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: #1976d2;
+    color: white;
+    cursor: pointer;
+    font-size: 1em;
+}
+
+.btn:hover {
+    background-color: #0d47a1;
+}
+
+.countdown {
+    font-size: 2em;
+    color: #d32f2f;
+    margin-top: 20px;
+    display: none;
+}
+
+@media (max-width: 600px) {
+    .game-area {
+        height: 80px;
+    }
+
+    .rope {
+        width: 200px;
+    }
+
+    .instructions p {
+        font-size: 0.9em;
+    }
+}
diff --git a/README.md b/README.md
@@ -260,9 +260,9 @@ ________________________________________________________________________________
 |  202   | [Doodling_Game](.SinglePlayer%20-%20Games/Doodling_Game) |
 |  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) |
-
+|  205  | [Maze_Game](.SinglePlayer%20-%20Games/Maze_Game) |
+|  206  | [Bomber_Game](.SinglePlayer%20-%20Games/Bomber_Game) |
+|  207 | [Tug of War ](.SinglePlayer%20-%20Games/Tug_of_war) |
 </div>
 
 <div>