Assignment 6: Imitation is Flattery

For my midterm project, I decided to recycle one of my weekly assignment’s idea. Instead of starting from scratch and making a half-done game or experience, I chose to work and improve on my previous work, which is Om-Nom-Nom! Of course, I’ll rename it and give credit to the creator, Pac-man, which Toru Iwatani designed. Now, it’s my turn to ATTEMPT in recreating this masterpiece and giving the users a real experience of Pac-Man.

Now in Week 6, I learnt a lot in the JavaScript language, from adding sprites to create animation to enabling computer vision to detect our facial features. Nothing too complex, I decided to use basic sprites of the Pac-Man avatar I found on the internet. I also decided to use a maze image from the internet for my game, but then I realised it wasn’t as easy as I thought.

I ended up creating a home screen for the game, and separate code just for the game. I didn’t, in fact, use sprites and just ended up creating my own ghosts and pacman avatar using shapes.

This technically isn’t an original idea, and yes I used tons of sources ranging from YouTube videos to ChatGPT, but I learned a lot from this lesson. Such as, how to make the blinking power-ups and how they increase the score. That’s a part of the code I’m actually proud of here. I’m also very content with the “button” situation I created here, where instead of using the code actually creating buttons, I just created a shape with text on it, and if the mouse if clicked within that shape, the screen changes.

function homescreen() {
  image(homepage,0,-45,width,height+85)
  
  stroke("white")
  strokeWeight("5")
  fill("red")
  rect(255,78,360,62,30,30,30,30)
  fill("white")
  noStroke()
  textSize(60)
  textStyle(BOLD)
  textFont('Courier New');
  text("HOW TO",330,125)
  
  fill("black")
  rect(713,349,40)
  
  fill("blue")
  stroke("white")
  strokeWeight("5")
  rect(305,450,260,62,30,30,30,30)
  fill("white")
  noStroke()
  textSize(65)
  textStyle(BOLD)
  textFont('Courier New');
  text("PLAY",350,500)
  
}


function draw() {
  
   gamestate = homescreen();
  
  if (mouseX > 255 && mouseX < 615 && mouseY > 78 && mouseY < 140) 
  { 
    stroke("white")
    strokeWeight("5")
    fill("blue")
    rect(255,78,360,62,30,30,30,30)
    fill("green")
    noStroke()
    textSize(60)
    textStyle(BOLD)
    textFont('Courier New');
    text("HOW TO",330,125)
    
  }
   if (mouseX > 305 && mouseX < 565 && mouseY > 450 && mouseY < 512) 
  { 
    fill("red")
    stroke("white")
    strokeWeight("5")
    rect(305,450,260,62,30,30,30,30)
    fill("green")
    noStroke()
    textSize(65)
    textStyle(BOLD)
    textFont('Courier New');
    text("PLAY",350,500)
    
  } 
}


  function mouseClicked() //when the mouse is clicked 
{ 
  if (mouseX > 255 && mouseX < 615 && mouseY > 78 && mouseY < 140) 
  {
    gamestate = howTo();
  }
  
  if (mouseX > 305 && mouseX < 565 && mouseY > 450 && mouseY < 512) 
  {
    gamestate = drawMaze();
  }
}

Another part of my code I really like is how I made my pac-man actually change direction according to the key pressed. Such as, when I press the UP key, the character faces upward.

class Pacman {
  constructor(x, y, diameter) {
    this.x = x;
    this.y = y;
    this.d = diameter;
  }
  
  show() {
    fill(220, 220, 50);
    let theta = PI/3*sq(sin(thetaoff))
    if(speedY < 0) {
    arc(this.x, this.y, this.d, this.d, -theta - PI/6, theta + 7*PI/6); 
      } else if(speedY > 0) {
          arc(this.x, this.y, this.d, this.d, -7*PI/6 - theta, theta + PI/6);
      } else if(speedX < 0){
          arc(this.x, this.y, this.d, this.d, theta + PI, -theta + PI);
      } else if(speedX > 0){
          arc(this.x, this.y, this.d, this.d, theta, -theta);
      } else {
          if(dir == 0) {
            arc(this.x, this.y, this.d, this.d, -theta - PI/6, theta + 7*PI/6); 
          } else if(dir == 1) {
              arc(this.x, this.y, this.d, this.d, -7*PI/6 - theta, theta + PI/6);
          } else if(dir == 2){
              arc(this.x, this.y, this.d, this.d, theta + PI, -theta + PI);
          } else if(dir == 3){
              arc(this.x, this.y, this.d, this.d, theta, -theta);
          } else {
              arc(this.x, this.y, this.d, this.d, theta, -theta);
          }
      }
    thetaoff += 0.1;
  }
  
  move() {
    checkNeighbors(this.x, this.y, neighbors);
    if(this.y % w == 0 && this.x % w == 0) {
      if(neighbors[3] || neighbors[1]) {
        speedX = 0;   
      }
      if(neighbors[0] || neighbors[2]) {
        speedY = 0;   
      }
      if(dir == 2 && neighbors[3] == false){
        speedX = -w/10;
        speedY = 0;
      } 
      if(dir == 3 && neighbors[1] == false){
        speedX = w/10;
        speedY = 0;
      } 
      if(dir == 0 && neighbors[0] == false){
        speedY = -w/10;
        speedX = 0;
        } 
      if(dir == 1 && neighbors[2] == false) {
        speedY = w/10;
        speedX = 0;
      }
  }
      this.x += speedX;
      this.y += speedY;
    //looping the pacman through the canvas
    if(this.x < - w/2) {
      this.x = width + w/2;
    }
    if(this.x > width + w/2) {
      this.x = -w/2;
    }
    if(this.y < - w/2) {
      this.y = height + w/2;
    }
    if(this.y > height + w/2) {
      this.y = -w/2;
    }
  } 
}

A problem I ran into was integrating the sprites. I wasn’t sure how to use a loop, just like how we did with that one “walking” animation we did in class, hence I opted to use basic shapes like circles and used mathematical logic to get the proper shape and animation for the pacman and ghosts.

Overall, I think this a big improvement compared to the weekly assignment I submitted, but I do intend on improving this.