Week 3: broken hearts game – Introduction to Interactive Media

Inspiration

I wanted to create an easy game to see how I can use all functions, arrays, and OOP we learned during the class. The first thing that came to my mind was the game “Breakout” (1976) by Steve Wozniak.

Image result for Breakout (video game)

Since Valentine’s day is coming, I decided to connect my game with it, and breaking hearts was the most logical thing for me. So my game is the little arrow is destroying hearts on the pink circles. Cute and relevant!

Process

My plan looked like this: create circles as a class > make them randomly move > add a player with an arrow as a class > detect collisions between circles and an arrow > add score > work with the design of the game.

Let me explain in detail every step I had with problems which have arisen and solutions I’ve found.

Classes and OOP

I have 3 classes in total: “Object” which is hearts player breaks, “Player,” and “Bullets” which is an arrow (the first idea was to use bullets, and I called all variables based on that). I used “getter” and “setter” functions to be able to use and manipulate class variables outside of the class.

Random movement

Circled I created in the Object class should move randomly, and making them do so was the first problem I faced making this game. When I’ve just changed the X and Y coordinates, they all moved in the same direction, even though they were allocated randomly on the canvas. The next thing I used was the direction variable, but I couldn’t find a way to randomly change its value between 1 and -1. To make this movement possible, I modified this code. I included variables such as speed, direction, position for both X and Y coordinates, and angle with the offset of the object. Using angle and its sine with cosine functions allowed me to do a random movement.

Collisions and Score

The next problem I had was making bullets “collide” with the objects aka circles. To do it I used an ArrayList of Object class objects (read about them here and here), so I used it for a loop every time I wanted to use a function with an array list.

for (int i=0; i<objects.size(); i++) {
    objects.get(i).RunProgram();
  }

Then, after the program detects collision (with if statement), it removes the object which collided and adds 1 point to the score variable.

for (int i=0; i<objects.size(); i++) {
    
  Object o = objects.get(i);
  if (dist(b.getBulletX(),  b.getBulletY(), o.getObjectPosX(), o.getObjectPosY()) <= b.getBulletRadius() + o.getObjectRadius()) {
    objects.remove(i);
    score++;
  }
  }

Design

As I said before, I decided to make this game in Valentine’s day theme, so I just added an image of the heart to the circles I had before and painted them different shades of pink. I also added a score in the upper left corner to make the interface look more friendly.

void DrawObject() {
    fill(objectColor);
    noStroke();
    circle(posX, posY, objectRadius*2);
    imageMode(CENTER);
    image(img, posX, posY, objectRadius*1.5, objectRadius*1.5);
  }

Result

Code

You can find code here: https://github.com/Alima2104/week-3

Leave a Reply Cancel reply