Sketch 2026-04-30 12:48

function setup() {
  createCanvas(950, 600);
  frameRate(60);
}

function draw() {
  if (gameActive) {
    updateGame();
    displayGame();
  }
}

function updateGame() {
  // Player 1 controls (WASD)
  if (key === 'w' && p1.onGround) p1.vy = -jumpPower;
  if (key === 'a') p1.vx = -moveSpeed;
  if (key === 'd') p1.vx = moveSpeed;
  if (key === ' ') p1.vy = -jumpPower;
  
  // Player 2 controls (Arrow keys)
  if (keyIsDown(UP_ARROW) && p2.onGround) p2.vy = -jumpPower;
  if (keyIsDown(LEFT_ARROW)) p2.vx = -moveSpeed;
  if (keyIsDown(RIGHT_ARROW)) p2.vx = moveSpeed;
  
  // Apply gravity
  p1.vy += gravity;
  p2.vy += gravity;
  
  // Update positions
  p1.x += p1.vx;
  p1.y += p1.vy;
  p2.x += p2.vx;
  p2.y += p2.vy;
  
  // Reset ground state
  p1.onGround = false;
  p2.onGround = false;
  
  // Boundary collisions
  if (p1.x < 25) p1.x = 25;
  if (p1.x > width - 25) p1.x = width - 25;
  if (p1.y > height - 50) {
    p1.y = height - 50;
    p1.onGround = true;
    p1.vy = 0;
  }
  
  if (p2.x < 25) p2.x = 25;
  if (p2.x > width - 25) p2.x = width - 25;
  if (p2.y > height - 50) {
    p2.y = height - 50;
    p2.onGround = true;
    p2.vy = 0;
  }
  
  // Collision detection between players
  let d = dist(p1.x, p1.y, p2.x, p2.y);
  if (d < 50 && !p1.hitCooldown) {
    p2.takeDamage(damage, p1.x);
    p1.hitCooldown = 10;
    createParticles(p2.x, p2.y, 8);
  }
  if (d < 50 && !p2.hitCooldown) {
    p1.takeDamage(damage, p2.x);
    p2.hitCooldown = 10;
    createParticles(p1.x, p1.y, 8);
  }
  
  // Cooldown timer
  if (p1.hitCooldown > 0) p1.hitCooldown--;
  if (p2.hitCooldown > 0) p2.hitCooldown--;
  
  // Update particles
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    if (particles[i].life <= 0) particles.splice(i, 1);
  }
  
  // Victory condition
  if (p1.hp <= 0) {
    declareWinner('P2');
    gameActive = false;
  }
  if (p2.hp <= 0) {
    declareWinner('P1');
    gameActive = false;
  }
}

function displayGame() {
  background(arenaColor);
  
  // Draw arena border
  stroke(255);
  strokeWeight(4);
  noFill();
  rect(10, 10, width - 20, height - 20);
  
  // Draw players
  p1.display();
  p2.display();
  
  // Draw particles
  for (let p of particles) {
    p.display();
  }
}

function createParticles(x, y, count) {
  for (let i = 0; i < count; i++) {
    let angle = random(TWO_PI);
    let speed = random(2, 6);
    let vx = cos(angle) * speed;
    let vy = sin(angle) * speed;
    particles.push(new Particle(x, y, vx, vy));
  }
}

function initArena(color, name) {
  arenaColor = color;
  p1 = new Player(100, height / 2, '#ff0000');
  p2 = new Player(width - 100, height / 2, '#0000ff');
  gameActive = true;
  particles = [];
  document.getElementById('menu').style.display = 'none';
  document.getElementById('stage-select').style.display = 'none';
  document.getElementById('ui').style.display = 'flex';
  document.getElementById('p1-tag').textContent = 'P1 ' + name;
  document.getElementById('p2-tag').textContent = 'P2 ' + name;
}

function declareWinner(player) {
  let quotes = {
    'P1': '"The strongest sorcerer..."',
    'P2': '"I am inevitable..."'
  };
  document.getElementById('win-text').textContent = player + ' HAS PREVAILED';
  document.getElementById('quote').textContent = quotes[player] || '"Victory."';
  document.getElementById('win-screen').style.display = 'flex';
}

function showStages() {
  document.getElementById('menu').style.display = 'none';
  document.getElementById('stage-select').style.display = 'flex';
}

class Player {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.vx = 0;
    this.vy = 0;
    this.color = color;
    this.hp = maxHealth;
    this.maxHealth = maxHealth;
    this.onGround = false;
    this.hitCooldown = 0;
    this.size = 30;
  }
  
  takeDamage(amount, hitFrom) {
    this.hp -= amount;
    this.flashTime = 10; // Flash effect duration
  }
  
  display() {
    if (this.flashTime > 0) {
      fill(255, 100, 100); // Light red flash
      this.flashTime--;
    } else {
      fill(this.color);
    }
    circle(this.x, this.y, this.size);
    
    // Draw outline
    stroke(this.color);
    strokeWeight(2);
    noFill();
    circle(this.x, this.y, this.size);
    
    // Update HP bar in HTML
    let hpPercent = (this.hp / this.maxHealth) * 100;
    if (this.color === '#ff0000') {
      document.getElementById('p1-hp').style.width = hpPercent + '%';
    } else {
      document.getElementById('p2-hp').style.width = hpPercent + '%';
    }
  }
}

class Particle {
  constructor(x, y, vx, vy) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.life = 30; // frames until death
    this.maxLife = 30;
  }
  
  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.vy += 0.2; // gravity on particles
    this.life--;
  }
  
  display() {
    let alpha = (this.life / this.maxLife) * 255; // Fade out
    fill(255, 0, 0, alpha);
    noStroke();
    circle(this.x, this.y, 5);
  }
}