Midterm Project (Game): Save the Snail – Introduction to Interactive Media

For the midterm project, I created a game in p5js called ‘Save the Snail’, which can be played directly inside the browser. Just hit Space and start playing! To play click and hold down on the mouse (any of the buttons) to move the snail. It’s pretty intuitive (I think) and one should easily get the hang of it after trying it out a couple times.

The idea:

The hardest part about making the game was coming up with an idea. I wanted the game to be simple, easy-to-play and kind of original. Apparently whatever I wanted to create had been implemented in one way or other. So I decided to not be too hung up on creating something totally new. I came up with this game idea where you had to ‘save’ an object from getting hit by obstacles.

The code:

The code for this game involves a lot of functions. I felt more comfortable using functions instead of classes so that’s what I went with. There are three main elements in the game:

The frog
The snail
The rocks

I think the most important function in the code is the rockhit() function because it determines the end of the game. Here’s the code snippet:

function rockhit() {
  let temp = 0.5 * (snail_dia + rock_dia) - 2;
  let distance;

  for (let i = 0; i < rocksnum; i++) {
    distance = dist(xpoint, ypoint, rockposX[i], rockposY[i]);
    if (distance < temp) {
      return true;
    }
  }
  return false;
}

This function returns true if any of the rocks hit the snail. It checks this by iterating through a for loop.

To make the game interesting, I added difficulty levels to it. Again, I wanted to keep things extremely simple and easy-to-understand, so I added only two levels of difficulty: Easy and Hard. The difference the difficulty levels make is in the number of rocks that fall from above. I achieved this by simply adding an if condition to my code and changing the numrocks variable if the user chooses the hard level. Here’s the code for the interface that prompts the user to choose a level:

function chooseLevel() {
  imageMode(CENTER);
    image(banner, width / 2, height / 2, 400, 300);
    fill(207, 185, 151);
    textFont(myFont);
    textSize(40);
    stroke(139, 69, 19);
    strokeWeight(5);
    textAlign(CENTER, CENTER);
    text("Choose difficulty level", 0, height / 2 - 85, width);
    textSize(35);
    text(
      "EASY (hit UP ARROW)\nHARD (hit DOWN ARROW)",
      0,
      height / 2 + 2,
      width
    );
    imageMode(CORNER);
}

The if condition that increases the number of rocks:

function draw() {
  clear();
  background(bg);
  if (mode == 0) {
    welcomeScreen();
  }
  if (mode == 1) {
    chooseLevel()
  }
  if (mode == 2) {
    gamePlay();
  }
  if (mode == 3) {
    rocksnum = 30;
    gamePlay();
  }
}

To keep track of the score, I used a counter which just keeps on incrementing as time passes. A noLoop() statement stops the increment as soon as the game is over.

So that is how my midterm project turned out! It’s a simple game but I created it regardless because it’s something I would enjoy playing.

Things that could be improved:

The game could be made better by adding levels progressively after certain score thresholds. The graphics could have been

Leave a Reply Cancel reply