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.