HTML : <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rowdy Wrestling Game</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="game-container">
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <div id="ui-overlay">
      <div id="health-bars">
        <div class="health-bar-container">
          <div id="player-health" class="health-bar"></div>
        </div>
        <div class="health-bar-container">
          <div id="opponent-health" class="health-bar"></div>
        </div>
      </div>
      <div id="score">Score: 0</div>
    </div>
  </div>

  <!-- Scripts -->
  <script src="script.js"></script>
</body>
</html>                                          CSS : body {
  margin: 0;
  overflow: hidden;
  background-color: #222;
  font-family: Arial, sans-serif;
  color: #fff;
}

#game-container {
  position: relative;
  width: 800px;
  margin: 0 auto;
}

#gameCanvas {
  background-color: #444;
}

#ui-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 600px;
  pointer-events: none;
}

#health-bars {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.health-bar-container {
  width: 200px;
  height: 20px;
  background-color: #555;
  border: 2px solid #fff;
  position: relative;
}

.health-bar {
  height: 100%;
  background-color: green;
  width: 100%;
}

#score {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

#game-over-overlay, #start-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 600px;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#game-over-overlay.show, #start-screen.show {
  display: flex;
}                                           JAVASCRIPT : // Get canvas and context
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Game variables
let player, opponents, keys, score, gameOver, gameStarted;

// Initialize game
function init() {
  // Player properties
  player = {
    x: 100,
    y: 500,
    width: 40,
    height: 60,
    speed: 5,
    dx: 0,
    dy: 0,
    health: 100,
    maxHealth: 100,
    attacking: false,
    attackCooldown: false,
    color: 'blue',
  };

  // Opponents array
  opponents = [];
  spawnOpponent();

  // Game state
  keys = {};
  score = 0;
  gameOver = false;
  gameStarted = false;

  // Event listeners
  document.addEventListener('keydown', keyDownHandler);
  document.addEventListener('keyup', keyUpHandler);

  // Start game loop
  update();
}

// Key handlers
function keyDownHandler(e) {
  keys[e.key] = true;
  if (!gameStarted && e.key === 'Enter') {
    gameStarted = true;
  }
}

function keyUpHandler(e) {
  delete keys[e.key];
}

// Spawn a new opponent
function spawnOpponent() {
  const opponent = {
    x: canvas.width - 140,
    y: Math.random() * (canvas.height - 100) + 50,
    width: 40,
    height: 60,
    speed: 3 + Math.random() * 2,
    dx: 0,
    dy: 0,
    health: 100,
    maxHealth: 100,
    attacking: false,
    attackCooldown: false,
    color: 'red',
  };
  opponents.push(opponent);
}

// Update health bars
function updateHealthBars() {
  const playerHealthBar = document.getElementById('player-health');
  const opponentHealthBar = document.getElementById('opponent-health');

  playerHealthBar.style.width = (player.health / player.maxHealth) * 100 + '%';

  if (opponents[0]) {
    opponentHealthBar.style.width = (opponents[0].health / opponents[0].maxHealth) * 100 + '%';
  } else {
    opponentHealthBar.style.width = '0%';
  }
}

// Move player
function movePlayer() {
  if (keys['ArrowLeft'] && player.x > 0) {
    player.dx = -player.speed;
  } else if (keys['ArrowRight'] && player.x + player.width < canvas.width) {
    player.dx = player.speed;
  } else {
    player.dx = 0;
  }

  if (keys['ArrowUp'] && player.y > 0) {
    player.dy = -player.speed;
  } else if (keys['ArrowDown'] && player.y + player.height < canvas.height) {
    player.dy = player.speed;
  } else {
    player.dy = 0;
  }

  player.x += player.dx;
  player.y += player.dy;

  // Attack
  if (keys[' '] && !player.attackCooldown) {
    player.attacking = true;
    player.attackCooldown = true;
    setTimeout(() => {
      player.attacking = false;
    }, 200); // Attack duration
    setTimeout(() => {
      player.attackCooldown = false;
    }, 800); // Cooldown duration
  }
}

// Move opponents
function moveOpponents() {
  opponents.forEach((opponent, index) => {
    if (!opponent.attacking) {
      if (opponent.x < player.x && opponent.x + opponent.width < canvas.width) {
        opponent.dx = opponent.speed;
      } else if (opponent.x > player.x && opponent.x > 0) {
        opponent.dx = -opponent.speed;
      } else {
        opponent.dx = 0;
      }

      if (opponent.y < player.y && opponent.y + opponent.height < canvas.height) {
        opponent.dy = opponent.speed;
      } else if (opponent.y > player.y && opponent.y > 0) {
        opponent.dy = -opponent.speed;
      } else {
        opponent.dy = 0;
      }

      opponent.x += opponent.dx;
      opponent.y += opponent.dy;
    }

    // Attack if close enough
    if (checkCollision(opponent, player) && !opponent.attackCooldown) {
      opponent.attacking = true;
      opponent.attackCooldown = true;
      setTimeout(() => {
        opponent.attacking = false;
      }, 200); // Attack duration
      setTimeout(() => {
        opponent.attackCooldown = false;
      }, 1000); // Cooldown duration
    }

    // Handle opponent defeat
    if (opponent.health <= 0) {
      opponents.splice(index, 1);
      score += 10;
      spawnOpponent();
    }
  });
}

// Collision detection
function checkCollision(rect1, rect2) {
  return (
    rect1.x < rect2.x + rect2.width && 
    rect1.x + rect1.width > rect2.x && 
    rect1.y < rect2.y + rect2.height && 
    rect1.y + rect1.height > rect2.y
  );
}

// Handle attacks
function handleAttacks() {
  opponents.forEach((opponent) => {
    if (player.attacking && checkCollision(player, opponent)) {
      opponent.health -= 10;
    }

    if (opponent.attacking && checkCollision(opponent, player)) {
      player.health -= 10;
      if (player.health <= 0) {
        player.health = 0;
        gameOver = true;
      }
    }
  });
}

// Draw characters
function drawCharacter(character) {
  // Draw body
  ctx.fillStyle = character.color;
  ctx.fillRect(character.x, character.y, character.width, character.height);

  // Draw head
  ctx.fillStyle = 'yellow';
  ctx.fillRect(character.x + character.width / 4, character.y - character.height / 2, character.width / 2, character.height / 2);

  // Draw attack effect
  if (character.attacking) {
    ctx.fillStyle = 'rgba(255, 255, 0, 0.5)';
    ctx.fillRect(character.x - 10, character.y - 10, character.width + 20, character.height + 20);
  }
}

// Update game
function update() {
  if (gameStarted && !gameOver) {
    movePlayer();
    moveOpponents();
    handleAttacks();
    updateHealthBars();
  }
  draw();
  requestAnimationFrame(update);
}

// Draw game elements
function draw() {
  // Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw background
  ctx.fillStyle = '#333';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  if (!gameStarted) {
    // Draw start screen
    ctx.fillStyle = '#fff';
    ctx.font = '36px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('Press Enter to Start', canvas.width / 2, canvas.height / 2);
  } else if (gameOver) {
    // Draw game over screen
    ctx.fillStyle = 'rgba(0,0,0,0.7)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#fff';
    ctx.font = '48px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2 - 40);
    ctx.font = '36px Arial';
    ctx.fillText(`Score: ${score}`, canvas.width / 2, canvas.height / 2);
    ctx.font = '24px Arial';
    ctx.fillText('Press R to Restart', canvas.width / 2, canvas.height / 2 + 40);

    // Restart listener
    document.addEventListener('keydown', (e) => {
      if (e.key === 'r' || e.key === 'R') {
        init();
      }
    });
  } else {
    // Draw player
    drawCharacter(player);

    // Draw opponents
    opponents.forEach((opponent) => {
      drawCharacter(opponent);
    });

    // Update score
    document.getElementById('score').innerText = `Score: ${score}`;
  }
}

// Start the game
init();