WWE Main Event: Modi Ji vs Rahul Gandhi

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WWE Main Event: Modi Ji vs Rahul Gandhi</title>
<style>
  body { margin: 0; background: #111; color: #fff; font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; }
  canvas { border: 4px solid #d4af37; border-radius: 8px; box-shadow: 0 0 30px rgba(255,0,0,0.4); background: #222; max-width: 95vw; }
  .controls { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
  button { padding: 12px 18px; font-size: 16px; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; background: #e63946; color: white; user-select: none; }
  button:active { transform: scale(0.95); background: #ff6b6b; }
  .special-btn { background: #f4a261; color: #000; }
</style>
</head>
<body>

<canvas id="game" width="800" height="450"></canvas>

<div class="controls">
  <button onmousedown="keys.left=true" onmouseup="keys.left=false" ontouchstart="keys.left=true" ontouchend="keys.left=false">⬅️ Left</button>
  <button onmousedown="keys.right=true" onmouseup="keys.right=false" ontouchstart="keys.right=true" ontouchend="keys.right=false">➡️ Right</button>
  <button onclick="attack('punch')">🥊 Punch (Z)</button>
  <button onclick="attack('kick')">🦵 Kick (X)</button>
  <button class="special-btn" onclick="attack('finisher')">⚡ FINISHER (C)</button>
  <button style="background:#2a9d8f" onclick="resetGame()">🔄 Restart</button>
</div>

<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

const keys = { left: false, right: false };
let gameOver = false;
let winnerText = "";
let hitEffect = { active: false, x: 0, y: 0, text: "", timer: 0 };

const p1 = { x: 180, y: 260, w: 60, h: 120, hp: 100, sp: 0, dir: 1, state: 'idle', timer: 0, name: "MODI JI", color: "#ff7b00" };
const p2 = { x: 560, y: 260, w: 60, h: 120, hp: 100, sp: 0, dir: -1, state: 'idle', timer: 0, name: "RAHUL GANDHI", color: "#ffffff" };

window.addEventListener('keydown', e => {
  if(e.key === 'ArrowLeft') keys.left = true;
  if(e.key === 'ArrowRight') keys.right = true;
  if(e.key.toLowerCase() === 'z') attack('punch');
  if(e.key.toLowerCase() === 'x') attack('kick');
  if(e.key.toLowerCase() === 'c') attack('finisher');
});
window.addEventListener('keyup', e => {
  if(e.key === 'ArrowLeft') keys.left = false;
  if(e.key === 'ArrowRight') keys.right = false;
});

function showHit(x, y, text) {
  hitEffect = { active: true, x, y, text, timer: 20 };
}

function attack(type) {
  if(gameOver || p1.timer > 0) return;
  let dist = Math.abs((p1.x + p1.w/2) - (p2.x + p2.w/2));
  
  if(type === 'finisher') {
    if(p1.sp < 100) return;
    p1.state = 'finisher'; p1.timer = 25; p1.sp = 0;
    if(dist < 130) {
      p2.hp = Math.max(0, p2.hp - 30);
      p2.x = Math.min(700, p2.x + 80);
      showHit(p2.x, p2.y, "💥 POWER SLAM! -30");
    }
  } else if(type === 'punch') {
    p1.state = 'punch'; p1.timer = 12;
    if(dist < 95) {
      p2.hp = Math.max(0, p2.hp - 8);
      p1.sp = Math.min(100, p1.sp + 20);
      p2.x = Math.min(700, p2.x + 20);
      showHit(p2.x, p2.y + 20, "POW! -8");
    }
  } else if(type === 'kick') {
    p1.state = 'kick'; p1.timer = 16;
    if(dist < 110) {
      p2.hp = Math.max(0, p2.hp - 12);
      p1.sp = Math.min(100, p1.sp + 25);
      p2.x = Math.min(700, p2.x + 35);
      showHit(p2.x, p2.y + 10, "BAM! -12");
    }
  }
  checkWin();
}

function aiUpdate() {
  if(gameOver) return;
  let dist = (p1.x) - (p2.x);
  if(Math.abs(dist) > 85) {
    p2.x += dist > 0 ? 2.2 : -2.2;
  } else if(p2.timer === 0 && Math.random() < 0.04) {
    p2.state = Math.random() > 0.5 ? 'punch' : 'kick';
    p2.timer = 15;
    let dmg = p2.state === 'punch' ? 7 : 11;
    p1.hp = Math.max(0, p1.hp - dmg);
    p1.x = Math.max(50, p1.x - 25);
    showHit(p1.x, p1.y + 20, "SMACK! -" + dmg);
    checkWin();
  }
}

function checkWin() {
  if(p1.hp <= 0) { gameOver = true; winnerText = "🏆 RAHUL GANDHI WINS BY KO!"; }
  if(p2.hp <= 0) { gameOver = true; winnerText = "🏆 MODI JI WINS BY KO!"; }
}

function resetGame() {
  p1.hp = 100; p1.sp = 0; p1.x = 180;
  p2.hp = 100; p2.sp = 0; p2.x = 560;
  gameOver = false; winnerText = "";
}

function drawFighter(f, isP1) {
  ctx.save();
  // Shadow
  ctx.fillStyle = "rgba(0,0,0,0.4)";
  ctx.beginPath(); ctx.ellipse(f.x + 30, f.y + 120, 35, 10, 0, 0, Math.PI*2); ctx.fill();

  // Legs
  ctx.fillStyle = isP1 ? "#eee" : "#1d3557";
  ctx.fillRect(f.x + 12, f.y + 75, 14, 45);
  let kickOffset = (f.state === 'kick') ? (isP1 ? 35 : -35) : 0;
  ctx.fillRect(f.x + 34 + kickOffset, f.y + (f.state === 'kick' ? 55 : 75), 14, 45);

  // Torso (Kurta/Jacket vs White T-Shirt)
  ctx.fillStyle = f.color;
  ctx.fillRect(f.x + 8, f.y + 30, 44, 50);

  // Head
  ctx.fillStyle = "#f1c27d";
  ctx.beginPath(); ctx.arc(f.x + 30, f.y + 15, 18, 0, Math.PI*2); ctx.fill();

  // Beard & Hair
  ctx.fillStyle = isP1 ? "#fff" : "#333";
  ctx.fillRect(f.x + 15, f.y + 18, 30, 14); // Beard
  ctx.fillRect(f.x + 14, f.y - 3, 32, 8);   // Hair

  // Punch Arm
  ctx.fillStyle = f.color;
  let armReach = (f.state === 'punch' || f.state === 'finisher') ? (isP1 ? 45 : -45) : 0;
  ctx.fillRect(f.x + 20 + armReach, f.y + 38, 28, 12);

  // Gloves
  ctx.fillStyle = "#e63946";
  ctx.beginPath(); ctx.arc(f.x + (isP1 ? 48 : 12) + armReach, f.y + 44, 9, 0, Math.PI*2); ctx.fill();
  ctx.restore();
}

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Crowd Background
  ctx.fillStyle = "#1a1a2e";
  ctx.fillRect(0, 0, 800, 320);
  for(let i=20; i<800; i+=35) {
    ctx.fillStyle = (i%70===0) ? "#444" : "#2b2d42";
    ctx.beginPath(); ctx.arc(i, 210 + (i%3)*15, 10, 0, Math.PI*2); ctx.fill();
  }

  // Ring Ropes & Posts
  ctx.fillStyle = "#111"; ctx.fillRect(30, 190, 18, 190); ctx.fillRect(752, 190, 18, 190);
  ['#e63946', '#ffffff', '#1d3557'].forEach((c, idx) => {
    ctx.strokeStyle = c; ctx.lineWidth = 5;
    ctx.beginPath(); ctx.moveTo(45, 220 + idx*38); ctx.lineTo(755, 220 + idx*38); ctx.stroke();
  });

  // Ring Mat
  ctx.fillStyle = "#ced4da";
  ctx.fillRect(30, 350, 740, 60);
  ctx.fillStyle = "#1d3557";
  ctx.fillRect(30, 400, 740, 50);
  ctx.fillStyle = "#ffd166"; ctx.font = "bold 20px Arial";
  ctx.fillText("WWE RAW - INDIA EDITION", 280, 430);

  // Movement
  if(!gameOver) {
    if(keys.left) p1.x = Math.max(55, p1.x - 4);
    if(keys.right) p1.x = Math.min(p2.x - 50, p1.x + 4);
  }
  if(p1.timer > 0) p1.timer--; else p1.state = 'idle';
  if(p2.timer > 0) p2.timer--; else p2.state = 'idle';

  aiUpdate();
  drawFighter(p1, true);
  drawFighter(p2, false);

  // HUD Health Bars
  ctx.fillStyle = "#333"; ctx.fillRect(40, 25, 300, 24); ctx.fillRect(460, 25, 300, 24);
  ctx.fillStyle = "#2ecc71"; ctx.fillRect(40, 25, p1.hp * 3, 24);
  ctx.fillStyle = "#e63946"; ctx.fillRect(460 + (100 - p2.hp)*3, 25, p2.hp * 3, 24);
  
  // Finisher Meter
  ctx.fillStyle = "#333"; ctx.fillRect(40, 55, 200, 12);
  ctx.fillStyle = "#f4a261"; ctx.fillRect(40, 55, p1.sp * 2, 12);

  ctx.fillStyle = "#fff"; ctx.font = "bold 16px Arial";
  ctx.fillText("MODI JI", 45, 20);
  ctx.fillText("RAHUL GANDHI", 630, 20);
  ctx.font = "12px Arial";
  ctx.fillText(p1.sp >= 100 ? "⚡ FINISHER READY! (Press C)" : "SPECIAL METER", 45, 82);

  // Hit Effect
  if(hitEffect.active) {
    ctx.fillStyle = "#ffbe0b"; ctx.font = "bold 22px Arial";
    ctx.fillText(hitEffect.text, hitEffect.x - 20, hitEffect.y - 20);
    hitEffect.timer--;
    if(hitEffect.timer <= 0) hitEffect.active = false;
  }

  // Winner Banner
  if(gameOver) {
    ctx.fillStyle = "rgba(0,0,0,0.75)";
    ctx.fillRect(0, 150, 800, 120);
    ctx.fillStyle = "#ffd166"; ctx.font = "bold 34px Arial";
    ctx.fillText(winnerText, 140, 220);
  }

  requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>