Progress Check (90%): Final Project: Hopping Ginger Bread Man

Disclaimer: the title is a little deceiving – I’m not 90% done (more like 60%) yet, but I’ll hopefully get there by the end of this week!

My initial outline of completing this project was finishing the physical constructing part (the Arduino) and then moving onto the coding (p5.js), but I ended up jumping between both of them instead.

Since my first very rough brainstorm post about my gingerbread man game, I’ve made a lot of adjustments, additions, and progress in general. In this post, I will report my progress by dividing it into two: the p5.js part and the Arduino part.

P5.js:

The game (only the coding part) that I have so far can be shown here.

For the coding part of my game, I consulted my good ol’ friend Daniel Shiffman’s “Chrome Dinosaur Game” tutorial that I found on his website (here’s the link). Thankfully, his tutorial didn’t encompass any groundbreaking new skills that I had no idea about, so it was mostly for me to review and refresh my memory because it’s been a while since I have coded games on p5.js. I also was able to get access to these two links (https://www.jsdelivr.com/?docs=gh and https://github.com/bmoren/p5.collide2D#colliderectrect), from which I got directory listing and learned about the function “collideRectRect” respectively. One thing that was particularly interesting/new for me was constructing the chimneys as obstacles and also animating the gingerbread man; it was fun to set up a movement for both the chimneys (along the x axis) and the gingerbread man (along the y axis), and control the level of jump, gravity, etc. I also couldn’t really find any chimney illustrations that fitted my vision, so I ended up drawing them and uploading the pictures myself.

I’d say my code highlights are adding animation/movement to the chimneys, which can be shown below:

class Chimney1 {
  constructor(){
    this.r = 120;
    this.x = width;
    this.y = height - this.r;
  }
  
  move(){
    this.x -= 3;
  }
  
  show(){
    image(chimney1Img, this.x, this.y, this.r, this.r);
  }
}

…and also constructing the collision between the gingerbread man and the chimneys, as shown below:

hits(chimneys) {
return collideRectRect(this.x, this.y, this.r, this.r, chimneys.x+20, chimneys.y, chimneys.r, chimneys.r);
}

These were some of the struggles I’ve faced with p5.js:

Adjusting the “collideRectRect()” function – it was hard to get the perfect measurement of both the chimneys and the gingerbread man’s image boundaries and set it so that the unnecessary empty spaces that surrounds the actual illustrations acted as the “collision points,” thus making it hard for the user to aim the gingerbread man’s jumping.
Constantly shifting + playing around with the “jump” function of the gingerbread man, as well as gravity.

Arduino:

Here are some sources that I’ve used to aid my process of making a physical game controller with Arduino:

link 1

link 2

Work I still have left to do:

Although I’m mostly done with the coding part, these questions still remain in my mind: