diff --git a/MultiPlayer - Games/Tug of war/index.html b/MultiPlayer - Games/Tug of war/index.html new file mode 100644 index 00000000..ca6bdb7b --- /dev/null +++ b/MultiPlayer - Games/Tug of war/index.html @@ -0,0 +1,30 @@ + + + + + + Tug of War Game + + + +
+
+
Player 1: 0
+
Player 2: 0
+
+
+
+
+
+
+

Player 1: Press "A"

+

Player 2: Press "L"

+
+
+ + +
+
+ + + diff --git a/MultiPlayer - Games/Tug of war/script.js b/MultiPlayer - Games/Tug of war/script.js new file mode 100644 index 00000000..b99cb226 --- /dev/null +++ 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 new file mode 100644 index 00000000..8d0a9bb3 --- /dev/null +++ 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 index 0aacec62..093c5773 100644 --- 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) |