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.
