8-Bit Fighting Game

> I'll help you create a fun 8-bit style fighting game using HTML, CSS, and JavaScript. Here's the complete implementation: 8-Bit Fighting Game

Player 1: A (punch), S (kick), D (block)

Player 2: Arrow Keys (Left: punch, Down: kick, Right: block)

* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #222; color: white; font-family: 'Press Start 2P', cursive; display: flex; justify-content: center; align-items: center; height: 100vh; } .game-container { width: 800px; height: 500px; position: relative; border: 4px solid white; overflow: hidden; background-color: #333; } .health-bars { display: flex; justify-content: space-between; padding: 20px; } .health-bar { width: 300px; height: 30px; border: 3px solid white; position: relative; } .health-fill { height: 100%; background-color: red; width: 100%; } .timer { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 30px; color: white; } .game-screen { width: 100%; height: 400px; position: relative; } .character { width: 100px; height: 150px; position: absolute; bottom: 0; background-color: blue; } #player1 { left: 200px; background-color: #3498db; } #player2 { right: 200px; background-color: #e74c3c; } .controls { text-align: center; padding: 10px; font-size: 12px; } const player1 = { element: document.getElementById('player1'), health: 100, position: 200, isAttacking: false, isBlocking: false }; const player2 = { element: document.getElementById('player2'), health: 100, position: 500, isAttacking: false, isBlocking: false }; const timerElement = document.querySelector('.timer'); const player1HealthFill = document.getElementById('player1-fill'); const player2HealthFill = document.getElementById('player2-fill'); let timer = 60; let gameInterval; function updateHealthBars() { player1HealthFill.style.width = `${player1.health}%`; player2HealthFill.style.width = `${player2.health}%`; } function checkGameOver() { if (player1.health <= 0 || player2.health <= 0 || timer <= 0) { clearInterval(gameInterval); const winner = player1.health > player2.health ? 'Player 1' : 'Player 2'; alert(`Game Over! ${winner} wins!`); } } function attack(attacker, defender) { if (defender.isBlocking) { return; } defender.health -= 10; updateHealthBars(); checkGameOver(); // Visual feedback defender.element.style.backgroundColor = 'yellow'; setTimeout(() => { defender.element.style.backgroundColor = attacker === player1 ? '#e74c3c' : '#3498db'; }, 200); } function startGame() { gameInterval = setInterval(() => { timer--; timerElement.textContent = timer; checkGameOver(); }, 1000); } document.addEventListener('keydown', (e) => { // Player 1 controls if (e.key === 'a') { player1.isAttacking = true; attack(player1, player2); } else if (e.key === 's') { player1.isAttacking = true; attack(player1, player2); } else if (e.key === 'd') { player1.isBlocking = true; player1.element.style.backgroundColor = '#2ecc71'; } // Player 2 controls if (e.key === 'ArrowLeft') { player2.isAttacking = true; attack(player2, player1); } else if (e.key === 'ArrowDown') { player2.isAttacking = true; attack(player2, player1); } else if (e.key === 'ArrowRight') { player2.isBlocking = true; player2.element.style.backgroundColor = '#2ecc71'; } }); document.addEventListener('keyup', (e) => { if (e.key === 'a' || e.key === 's') { player1.isAttacking = false; } else if (e.key === 'd') { player1.isBlocking = false; player1.element.style.backgroundColor = '#3498db'; } if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { player2.isAttacking = false; } else if (e.key === 'ArrowRight') { player2.isBlocking = false; player2.element.style.backgroundColor = '#e74c3c'; } }); startGame(); This creates a simple 8-bit style fighting game with: - Two players (blue and red) - Health bars and timer - Basic controls (punch, kick, block) - Simple attack mechanics - Game over condition when health reaches 0 or time runs out To play: - Player 1 uses A (punch), S (kick), D (block) - Player 2 uses Left Arrow (punch), Down Arrow (kick), Right Arrow (block)