JIT
Creating a fun 8-bit fighting game concept
Log in
@darrelcampbell
make a fun 8bit fighting game
DeepSeek V3

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

<project id="8bit-fighting-game" title="8-Bit Fighting Game"> <file path="index.html"> <!DOCTYPE html> <html> <head> <title>8-Bit Fighting Game</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="game-container"> <div class="health-bars"> <div class="health-bar" id="player1-health"> <div class="health-fill" id="player1-fill"></div> </div> <div class="health-bar" id="player2-health"> <div class="health-fill" id="player2-fill"></div> </div> </div> <div class="timer">60</div> <div class="game-screen"> <div class="character" id="player1"></div> <div class="character" id="player2"></div> </div> <div class="controls"> <p>Player 1: A (punch), S (kick), D (block)</p> <p>Player 2: Arrow Keys (Left: punch, Down: kick, Right: block)</p> </div> </div> <script src="game.js"></script> </body> </html> </file> <file path="style.css"> * { 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;
}
</file> <file path="game.js"> 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();
</file> </project>

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)*
Preview not available