adding user interface

Sound was also added.

​

By Carlos Brito

12/1/2024

​

background music:

​

https://pixabay.com/es/soundeffects/search/musica%20de%20navidad/

​

​

Santa Claus Sound Effect:

https://pixabay.com/es/sound-effects/search/eat/

​

​

*/

​

let x = 23;

let y = 342;

​

let player = Player();

let bird1, bird2;

let collisionRadius = 10;

let score = 0; //  counts the number of cooeaten

​

// set up game states

let gameState = 0;

// 0 is start menu

// 1 intructions menu

// 2 game

​

​

let charIdleSprite, charWalkSprite, charEatSprite;

let birdFlyingSprite, birdEatenSprite;

let startButtonImage, instructionsButtonImage;

let titleScreen, intructionsScreen;

let gameBackground;

​

let backgroundMusic, meowSound;

​

​

​

function preload() {

  charIdleSprite = loadImage("sprites/character_idle.gif");

  charWalkSprite = loadImage("sprites/character_walk.gif");

  charEatSprite = loadImage("sprites/character_eat.gif");

  birdFlyingSprite = loadImage("sprites/bird_flying.gif");

  birdEatenSprite = loadImage("sprites/bird_eaten.gif");

  gameBackground = loadImage("sprites/bg_2.png");

​

  startButtonImage = loadImage("ui/button_0.png");

  instructionsButtonImage =loadImage("ui/button_1.png");

  titleScreen = loadImage("ui/bg_0.png");

  instructionsScreen = loadImage("ui/bg_1.png");

  backgroundMusic = loadSound("audio/birdgamemusic_edit1.mp3");

  meowSound = loadSound("audio/Meow.mp3");

}

​

​

​

function setup() {

  createCanvas(480, 480);

  imageMode(CENTER);

​

  bird1 = Bird();

  bird2 = Bird();

​

  startButton = Button(266, 330, startButtonImage);

  instructionsButton = Button(200, 150, instructionsButtonImage);

​

  backgroundMusic.play();

  backgroundMusic.loop(true);

}

​

​

​

function draw() {

  background(220);

  if (gameState == 0) {

    startMenu();

  } else if (gameState == 1) {

    intructionsMenu();

  } else if (gameState == 2) {

    game();

  }

}

​

​

​

function startMenu() {

  image(titleScreen, width / 2, height / 2);

  startButton.display();

  instructionsButton.display();

  if (startButton.clicked()) {

    gameState = 2;

  }

​

  if (instructionsButton.clicked()) {

    gameState = 1;

  }

}

​

​

​

function intructionsMenu() {

  image(instructionsScreen, width / 2, height / 2);

  startButton.display();

  if (startButton.clicked()) {

    gameState = 2;

  }

}

​

​

​

function Button(x, y, img) {

  // x,y,img arguments are like let x = 0

​

  // width and height of image

  let w = 64;

  let h = 32;

​

  // button toggle

  let isClicked = false;

function display() {

    image(img, x, y);

    // draw text intead of a button

    // rectMode(CENTER);

    // fill('gold');

    // rect(x, y, 64, 32);

    // fill(0);

    // textAlign(CENTER, CENTER);

    // text(buttonText, x, y);

  }

​

  function clicked() {

    // mouse clicked

    // inside the button

    // didn't click on previous frame

    if (mouseIsPressed) {

      // rectangle collision detection

      if (

        mouseX > x - w / 2 &&

        mouseX < x + w / 2 &&

        mouseY > y - h / 2 &&

        mouseY < y + h / 2

      ) {

        if (!isClicked) {

          isClicked = true;

          return true;

        }

      }

    } else if (isClicked) {

      // after clicking and releasing, we can click again

      isClicked = false;

    }

    return false;

  }

​

  return { display, clicked };

​

​

}

​

​

​

function game (){

  image(gameBackground, width / 2, height / 2);

  player.move();

  player.display();

  bird1.move();

  bird1.display();

  bird2.move();

  bird2.display();

  // detect collision between bird1 and player

  let bird1Collide = detectCollision(player, bird1);

​

  // react to collision event

  if (bird1Collide && bird1.getStatus()) {

    player.eat();

    bird1.die();

    meowSound.play();

    score = score + 1;

  }

​

  // if player gets to 10, they win the game

  if (score >= 10) {

    gameState = 0;

    score = 0; // reset the score/game

    bird1.reset();

    bird2.reset();

  }

​

  // ui score display

  image(birdFlyingSprite, 420, 30);

  fill("red");

  textSize(36);

  textFont("Jacquarda Bastarda 9");

  text(score, 440, 38);

}

​

​

​

function Player() {

​

  let x = 200;

  let y = 377;

​

  let animationState = 0;

  // 0 is idle

  // 1 is walk

  // 2 is eat

​

  function move() {

    // if the player is not eating

    if (animationState != 2) {

      animationState = 0; // assume player is idle

    }

​

    if (keyIsDown(RIGHT_ARROW)) {

      x = x + 5;

      animationState = 1; // walk animation

    }

​

    if (keyIsDown(LEFT_ARROW)) {

      x = x - 5;

      animationState = 1; // walk animation

    }

  }

​

  function display() {

    if (animationState == 0) {

      image(charIdleSprite, x, y);

    } else if (animationState == 1) {

      image(charWalkSprite, x, y);

    } else if (animationState == 2) {

      image(charEatSprite, x, y);

    }

    // debugging the detection area

    // noFill();

    // circle(x, y, collisionRadius * 2);

  }

  function getPosition() {

    return { x, y };

  }

  function eat() {

    animationState = 2;

  }

​

  // makes member functions available to other parts of the program

    return{ move, display, getPosition, eat };

}

​

​

​

function Bird() {

  let x = random(0, width);

  let y = 0; // top of canvas

  let speed = random(2, 8);

  let isAlive = true;

​

  let animationState = 0;

  // 0 is idle/flying

  // 1 is eaten

​

  function move() {

    y = y + speed;

​

    if (y > height) {

      reset();

    }

  }

​

  function reset() {

    y = 0;

    x = random(0, width);

    speed = random(2, 8);

    animationState = 0;

    isAlive = true;

  }

​

  function display() {

    if (animationState == 0) {

      image(birdFlyingSprite, x, y);

    } else if (animationState == 1) {

      image(birdEatenSprite, x, y);

    }

  }

​

  function getPosition() {

    return { x, y };

  }

​

  function die() {

    animationState = 1;

    isAlive = false;

  }

​

  function getStatus() {

    return isAlive;

  }

​

  return { move, display, getPosition, die, getStatus, reset };

}

​

​

​

  function detectCollision(objA, objB) {

  let aPosition = objA.getPosition();

  let bPosition = objB.getPosition();

  let d = dist(aPosition.x, aPosition.y, bPosition.x,            bPosition.y);

  let isColliding = d < collisionRadius;

  return isColliding; // returns true or false

  }

​

// save an image of the canvas

function mousePressed() {

  save("scre.jpg");

}