New Page

let alien, obstacles = [], cows = [], score = 0, gameOver = false, difficulty = 0, bgX = 0;
let emailInput, usernameInput, submitButton;

function setup() {
  createCanvas(600, 500);
  alien = new Alien();
  generateObstacle();
  
  // Create email input
  emailInput = createInput('Email');
  emailInput.position(width / 2 - 100, 410);
  emailInput.size(200, 20);
  emailInput.hide();
  
  // Create username input
  usernameInput = createInput('Username');
  usernameInput.position(width / 2 - 100, 440);
  usernameInput.size(200, 20);
  usernameInput.hide();
  
  // Create submit button
  submitButton = createButton('Submit');
  submitButton.position(width / 2 - 50, 470);
  submitButton.size(100, 30);
  submitButton.hide();
  submitButton.mousePressed(submitForm);
}

class Alien {
  constructor() {
    this.x = width / 2;
    this.y = height / 2 - 50; // Starts within game area (y=0 to y=400)
    this.vy = 0;
    this.gravity = 0.5;
    this.flapping = false;
    this.flapTime = 0;
  }

  flap() {
    this.vy = -10;
    this.flapping = true;
    this.flapTime = 0;
  }

  update() {
    this.vy += this.gravity;
    this.y += this.vy;
    if (this.flapping) {
      this.flapTime++;
      if (this.flapTime > 5) this.flapping = false;
    }
    // Check collision with game area boundaries (y=0 to y=400)
    if (this.y + 25 > 400 || this.y - 25 < 0) {
      endGame();
    }
  }

  draw() {
    push();
    translate(this.x, this.y);
    let angle = map(this.vy, -10, 10, PI / 4, -PI / 4);
    rotate(angle);
    
    // Draw head
    fill('green');
    ellipse(0, 0, 30, 50);
    
    // Draw eyes
    fill('white');
    ellipse(-5, -10, 10, 10);
    ellipse(5, -10, 10, 10);
    
    // Draw pupils
    fill('black');
    ellipse(-5, -10, 4, 4);
    ellipse(5, -10, 4, 4);
    
    // Draw ship
    fill('red');
    triangle(-15, 10, 15, 10, 0, 30);
    pop();
  }
}

class Obstacle {
  constructor(x, topHeight, bottomHeight) {
    this.x = x;
    this.topHeight = topHeight;
    this.bottomHeight = bottomHeight;
    this.width = 50;
    this.speed = 5 + difficulty;
    this.passed = false;
    this.buildingColor = color(random(100, 150)); // Vary building color
  }

  update() {
    this.x -= this.speed;
    if (!this.passed && this.x + this.width < alien.x - 25) {
      this.passed = true;
      score += 1;
    }
  }

  draw() {
    // Draw top skyscraper
    fill(this.buildingColor);
    rect(this.x, 0, this.width, this.topHeight);
    // Draw shadow for depth
    fill(color(max(0, this.buildingColor.levels[0] - 50)));
    rect(this.x + this.width - 5, 0, 5, this.topHeight);
    
    // Draw bottom skyscraper
    fill(this.buildingColor);
    rect(this.x, 400 - this.bottomHeight, this.width, this.bottomHeight);
    // Draw shadow for depth
    fill(color(max(0, this.buildingColor.levels[0] - 50)));
    rect(this.x + this.width - 5, 400 - this.bottomHeight, 5, this.bottomHeight);
  }

  collidesWith(alien) {
    let sl = alien.x - 25;
    let sr = alien.x + 25;
    let st = alien.y - 25;
    let sb = alien.y + 25;
    if (sl < this.x + this.width && sr > this.x && sb > 0 && st < this.topHeight) return true;
    if (sl < this.x + this.width && sr > this.x && st < 400 && sb > 400 - this.bottomHeight) return true;
    return false;
  }
}

class Cow {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.speed = 5 + difficulty;
    this.angle = 0;
  }

  update() {
    this.x -= this.speed;
    this.angle += 0.1;
  }

  draw() {
    push();
    translate(this.x, this.y);
    rotate(this.angle);
    
    // Draw body
    fill('white');
    ellipse(0, 0, 20, 15);
    
    // Draw spots
    fill('black');
    ellipse(-5, 0, 4, 4);
    ellipse(5, 0, 4, 4);
    
    // Draw nose
    fill('pink');
    ellipse(0, 5, 4, 4);
    
    // Draw eyes
    stroke('black');
    line(-3, -3, -3, -5);
    line(3, -3, 3, -5);
    
    // Draw legs
    line(-5, 7, -5, 10);
    line(5, 7, 5, 10);
    pop();
  }

  isCollectedBy(alien) {
    return this.x > alien.x - 25 && this.x < alien.x + 25 && this.y > alien.y - 25 && this.y < alien.y + 25;
  }
}

function generateObstacle() {
  let x = width;
  let gap = max(100, 200 - difficulty * 5);
  let topHeight = random(50, 400 - gap - 50);
  let bottomHeight = 400 - topHeight - gap;
  obstacles.push(new Obstacle(x, topHeight, bottomHeight));
  let numCows = random(1, 3);
  for (let i = 0; i < numCows; i++) {
    let y = random(topHeight + 10, 400 - bottomHeight - 10);
    cows.push(new Cow(x, y));
  }
}

function drawCloud(x, y) {
  fill(255);
  noStroke();
  // Draw multiple ellipses to form a fluffy cloud
  ellipse(x, y, 60, 40);
  ellipse(x - 20, y + 10, 40, 30);
  ellipse(x + 20, y + 10, 40, 30);
  ellipse(x - 10, y - 10, 30, 20);
  ellipse(x + 10, y - 10, 30, 20);
}

function draw() {
  background(135, 206, 235); // Light blue sky
  
  // Draw clouds
  drawCloud(bgX + 100, 50);
  drawCloud(bgX + 200, 80);
  drawCloud(bgX + width + 100, 50);
  drawCloud(bgX + width + 200, 80);
  
  bgX -= 5 + difficulty;
  if (bgX <= -width) bgX = 0;

  if (!gameOver) {
    alien.update();
    alien.draw();
    difficulty += 0.01;

    for (let obs of obstacles) {
      obs.speed = 5 + difficulty;
      obs.update();
      obs.draw();
      if (obs.collidesWith(alien)) endGame();
      if (obs.x + obs.width < 0) {
        obstacles.splice(obstacles.indexOf(obs), 1);
        generateObstacle();
      }
    }

    for (let cow of cows) {
      cow.speed = 5 + difficulty;
      cow.update();
      cow.draw();
      if (cow.isCollectedBy(alien)) {
        score += 10;
        cows.splice(cows.indexOf(cow), 1);
      }
      if (cow.x < 0) cows.splice(cows.indexOf(cow), 1);
    }

    textSize(20);
    fill(0);
    text(`Score: ${score}`, 10, 30);
  } else {
    textAlign(CENTER, CENTER);
    textSize(30);
    fill(0);
    text("Game Over", width / 2, 200);
    text(`Score: ${score}`, width / 2, 230);
    
    // Display high scores centered at the bottom
    textSize(20);
    let highScore = localStorage.getItem('highScore') || 0;
    text(`Your High Score: ${highScore}`, width / 2, 420);
    text(`Global High Score: 1000`, width / 2, 450);
    
    // Show registration form
    emailInput.show();
    usernameInput.show();
    submitButton.show();
  }
}

function mousePressed() {
  if (!gameOver) {
    alien.flap();
  } else {
    // Restart the game when clicking anywhere on the canvas
    resetGame();
  }
}

function submitForm() {
  console.log(`Email: ${emailInput.value()}, Username: ${usernameInput.value()}`);
  // In a real application, this would send data to a server to forward to yarishdesigns@gmail.com
}

function endGame() {
  gameOver = true;
  let highScore = parseInt(localStorage.getItem('highScore')) || 0;
  if (score > highScore) {
    localStorage.setItem('highScore', score);
  }
}

function resetGame() {
  alien = new Alien();
  obstacles = [];
  cows = [];
  score = 0;
  difficulty = 0;
  gameOver = false;
  bgX = 0; // Reset background position
  generateObstacle();
  emailInput.hide();
  usernameInput.hide();
  submitButton.hide();
}