My Sketch

let gameState = 'menu';

let startButton, settingsButton, creditsButton, backButton;

let playerX, playerY, playerSpeed;

let spaceRocks = [];

let keys = {}; // Track pressed keys

let explosionFrames = 0;

let explosionX = 0;

let explosionY = 0;

​

function setup() {

  createCanvas(800, 600);

  textAlign(CENTER, CENTER);

  textFont('Georgia');

​

  // Menu Buttons

  startButton = createButton('Start');

  startButton.position(width / 2 - 40, height / 2 + 140);

  startButton.style('font-size', '20px');

  startButton.mousePressed(() => {

    gameState = 'playing';

    startGame();

  });

​

  settingsButton = createButton('Settings');

  settingsButton.position(width / 2 - 40, height / 2 + 180);

  settingsButton.style('font-size', '20px');

  settingsButton.mousePressed(() => {

    gameState = 'settings';

    updateUI();

  });

​

  creditsButton = createButton('Credits');

  creditsButton.position(width / 2 - 40, height / 2 + 220);

  creditsButton.style('font-size', '20px');

  creditsButton.mousePressed(() => {

    gameState = 'credits';

    updateUI();

  });

​

  backButton = createButton('Back');

  backButton.position(20, 20);

  backButton.style('font-size', '20px');

  backButton.mousePressed(() => {

    gameState = 'menu';

    updateUI();

  });

  backButton.hide();

​

  updateUI();

}

​

function updateUI() {

  if (gameState === 'menu') {

    startButton.show();

    settingsButton.show();

    creditsButton.show();

    backButton.hide();

  } else {

    startButton.hide();

    settingsButton.hide();

    creditsButton.hide();

    backButton.show();

  }

}

​

function startGame() {

  playerX = width / 2;

  playerY = height - 50;

  playerSpeed = 5;

  spaceRocks = [];

  explosionFrames = 0;

  for (let i = 0; i < 5; i++) {

    spaceRocks.push({

      x: random(50, width - 50),

      y: random(-500, -50),

      speed: random(2, 5),

      size: random(30, 50),

    });

  }

  updateUI();

}

​

function draw() {

  background(20);

  drawStars();

  if (gameState === 'menu') {

    drawMenu();

  } else if (gameState === 'playing') {

    drawGame();

    movePlayer();

    checkCollisions();

  } else if (gameState === 'settings') {

    drawSettingsUI();

  } else if (gameState === 'credits') {

    drawCreditsUI();

  } else if (gameState === 'gameOver') {

    drawExplosion();

  }

}

​

function drawMenu() {

  fill(255);

  textSize(48);

  text('Nebula Quest', width / 2, height / 2 - 200);

  textSize(24);

  text('An interstellar adventure awaits...', width / 2, height / 2 + 100);

  drawSpaceship(width / 2, height / 2 - 50, 3);

}

​

function drawSettingsUI() {

  fill(255);

  textSize(36);

  text('Settings', width / 2, height / 2);

}

​

function drawCreditsUI() {

  fill(255);

  textSize(36);

  text('Credits', width / 2, height / 2);

  textSize(18);

  text('Developed by Boray', width / 2, height / 2 + 40);

}

​

function drawGame() {

  drawSpaceship(playerX, playerY, 2);

  handleAsteroids();

}

​

function drawSpaceship(x, y, s) {

  push();

  translate(x, y);

  scale(s);

  noStroke();

  fill(200);

  beginShape();

  vertex(0, -20);

  vertex(10, 10);

  vertex(5, 20);

  vertex(-5, 20);

  vertex(-10, 10);

  endShape(CLOSE);

  fill(100, 200, 255);

  ellipse(0, -5, 10, 10);

  // Flames at the bottom

  fill(255, 100, 0);

  let flameSize = 15 + sin(frameCount * 0.2) * 5;

  triangle(-5, 20, 5, 20, 0, 20 + flameSize);

  pop();

}

​

function movePlayer() {

  if (keys[LEFT_ARROW]) playerX = max(30, playerX - playerSpeed);

  if (keys[RIGHT_ARROW]) playerX = min(width - 30, playerX + playerSpeed);

  if (keys[UP_ARROW]) playerY = max(30, playerY - playerSpeed);

  if (keys[DOWN_ARROW]) playerY = min(height - 30, playerY + playerSpeed);

}

​

function keyPressed() {

  keys[keyCode] = true;

}

​

function keyReleased() {

  keys[keyCode] = false;

}

​

function handleAsteroids() {

  for (let rock of spaceRocks) {

    fill(139, 69, 19);

    rect(rock.x, rock.y, rock.size, rock.size);

    rock.y += rock.speed;

    if (rock.y > height) {

      rock.y = random(-500, -50);

      rock.x = random(50, width - 50);

    }

  }

}

​

function checkCollisions() {

  for (let rock of spaceRocks) {

    if (dist(playerX, playerY, rock.x, rock.y) < rock.size / 2 + 15) {

      gameState = 'gameOver';

      explosionX = playerX;

      explosionY = playerY;

      explosionFrames = 30;

    }

  }

}

​

function drawExplosion() {

  if (explosionFrames > 0) {

    fill(255, random(100, 255), 0);

    ellipse(explosionX, explosionY, 50 + random(-10, 10), 50 + random(-10, 10));

    explosionFrames--;

  } else {

    gameState = 'menu';

    updateUI();

  }

}

​

function drawStars() {

  fill(255);

  for (let i = 0; i < 50; i++) {

    ellipse(random(width), random(height), 2, 2);

  }

}

​