Assignment 3: Om Nom Nom

When I was brainstorming for an idea for this week’s assignment, I hit a brick wall. It’s like writer’s block but a coding edition. When I stumble across such obstacles, I disengage my mind and play mindless games. Consequently, I switched my PC on and clicked straight onto the Pac-Man icon. There I was, looking at my little yellow circle eating smaller circles, when it clicked, “I can just make my own game”.

Hence I was inspired to make “Om Nom Nom”, same concept and idea, with a few malfunctions.

While playing the game felt fairly easy, coding it was immensely hard. Trying to fix the Pac-Man’s mouth was starting to be a great challenge but I eventually came around it. But a code I’m particularly proud of is making the character follow the cursor wherever it goes, and setting the “food”, the dots, in a loop to be displayed and disappear when the Pac-Man eats it.

let pacMan;
let dots = [];

function setup() {
  createCanvas(400, 400);
  pacMan = new PacMan();
  
  //creating initial dots, food for pacman, and putting them into an array
  for (let i = 0; i < 10; i++) {
    dots.push(new Dot());
  }
}

function draw() {
  background(0);

  //updating pacman's position based on mouse cursor's coordinates on the screen
  pacMan.update(mouseX, mouseY);
  
  //displaying pacman
  pacMan.display();

  //running a loop to display the dots
  for (let i = 0; i < dots.length; i++) {
    dots[i].display();

    //this checks when pacman touches the dots
    if (pacMan.eats(dots[i])) {
      dots.splice(i, 1); //remove dot
      dots.push(new Dot()); //add a new dot
    }
  }
}

//defining our pacman through class
class PacMan {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
    this.radius = 20;
    this.angleStart = 0;
    this.angleEnd = 0;
    this.angleIncrement = 0.05;
    this.direction = 1; 
    // 1 for opening, -1 for closing
    this.speed = 2;
  }

  display() {
    fill(255, 255, 0);
    arc(
      this.x,
      this.y,
      this.radius * 2,
      this.radius * 2,
      PI * this.angleStart,
      PI * this.angleEnd,
      PIE
    );

    //changing the angle to make look like pacman is opening and closing his mouth
    this.angleStart += this.angleIncrement * this.direction;
    this.angleEnd = this.angleIncrement * -this.direction;

    //change direction when the mouth is fully open or closed
    if (this.angleEnd <= 0 || this.angleStart >= 1) {
      this.direction *= -1;
    }
  }

  update(targetX, targetY) {
    //adjusting pacman's position towards the mouse cursor
    let angle = atan2(targetY - this.y, targetX - this.x);
    this.x += cos(angle) * this.speed;
    this.y += sin(angle) * this.speed;
  }

  eats(dot) {
    let d = dist(this.x, this.y, dot.x, dot.y);
    if (d < this.radius + dot.radius) {
      return true;
    }
    return false;
  }
}

A part I think I could improve on is changing the direction of the Pac-Man’s mouth towards wherever the cursor is so that it’s mouth opens and closes towards the food it eats. Additionally, I’d like to add another code which makes the game a maze, the character has to go through it under a time limit, and the walls are a different colour so when the Pac-Man touches the wall, the game restarts.