Midterm – Progress Check

Concept

The current idea that I have for my midterm game is a recreation of a minigame from Mario Party named Goomba Spotting. In the game, players are tasked with accurately tallying the number of Goombas (mushroom-shaped creatures from the Mario series) that run across the screen. The Goombas run at varying speeds and overlap each other to make it difficult to count them. The hope is that I will be able to reproduce these mechanics and effects in p5js!

Progress As of Now

My main focus has been on replicating the main mechanic of the game—namely, the Goombas and their “walking” behavior. After much trial and error, I’ve managed to figure out a way to make things work. Crucial to this process was how I created this class specifically for the Goombas:

//Create Class for Goombas
class Goomba {
  constructor(){
    this.xPos = 0;
    this.yPos = 492;
    this.xSpeed = random(5, 10);
    this.ySpeed = 0;
    this.check = false;
  }
  //Used to "Stall" Each Goomba to Make Them Come Out in Order
  stall(order){
    if(frameCount % (30 * order) == 0){
      this.check = true;
    }
  }
  //Changes Goomba's Position Based on Speed
  move(){
    if(this.check == true){
      this.xPos += this.xSpeed;
      this.yPos += this.ySpeed;
    }
  }
  //Draws Goomba
  draw(){
    image(photo, this.xPos, this.yPos, 60, 70);
  }
  //Constantly Randomizes Goomba Speeds
  random(){
    if(frameCount % 20 == 0){
      this.xSpeed = random(0, 15);
    }
  }
}

This class then works in tandem with an array and a for() loop in the setup() function to generate a random number of Goomba objects—their appearances and movements on the screen are then facilitated through another for() loop in the draw() function:

//State Variables
let goomba = [];
let randI;

function setup() {
  //Generate Random Number for # of Goombas
  randI = random(15, 30);
  randI = Math.round(randI);
  //Generate Multiple Values in Array for Multiple Goombas
  for (let i = 0; i < randI; i++){
    goomba[i] = new Goomba();
  }
}

function draw(){
  //Functions for Each Goomba
  for (let i = 0; i < randI; i++){
    goomba[i].stall(i + 1);
    goomba[i].draw();
    goomba[i].move();
    goomba[i].random();
  }
}

And now, the Goombas in motion:

Moving Forward

I’m glad that I was able to figure out how to make a major component of my game work! There’s obviously a lot more left to do, ranging from creating the start/end screens and implementing the Goomba-tallying system—but my success so far gives me hope that I will be able to make my concept come to life! Here goes.