Assignment 9: Balls and Bars

This week, our prompt was to make a game or an art piece using functions and object-oriented programming. I decided to make a simple game involving a bar and a ball — my very first game made with code!

The rules of the game are simple: Use the mouse to move the blue bar and do not let the red ball fall below your bar. If you do, the screen flashes white, indicating that you lost the game. If you want to challenge yourself, you can also hit the spacebar to increase your speed, as many times as you want. Here’s a screen recording of me playing the game:

As you can see, the ball speeds up a bit in the middle because I hit the spacebar a couple of times. The white flashes as soon as I miss the ball, but the game then continues on as before.

Coding this was relatively simple, and I’m grateful to Nahil and Aaron for helping me with the logic. I definitely feel like I understand how to use classes better now, and it has helped me compartmentalize and un-complicate my code.

In the future, I would hope to fix a couple small bugs that exist in the code:
1. The code goes a little crazy when the ball hits the corner of the bar: the white flashes and the movement of the ball interlace with each other, creating confusion about whether the player has lost the game or not.
2. The white flashes get faster and faster as the ball gains in speed. I would work on getting the flashes to be of the same time length regardless of how fast the ball was moving.

Here is the code I used for this game:

//The first tab
Ball redball;
Bar bluebar;

void setup() 
 size(640, 480);
 // Set the starting position of the shape
 bluebar = new Bar(0, 0, 255);
 redball = new Ball(255, 0, 0, bluebar);

void draw() 
 //redball.display ();

void keyPressed (){ //if spacebar is pressed, speed increases
 if (key ==' '){

//The second tab: Ball

class Ball{

 int rad; // Width of the shape
 float xpos, ypos; // Starting position of shape 
 float xspeed; // Speed of the shape
 float yspeed; // Speed of the shape
 int xdirection; // Left or Right
 int ydirection; 
 int red, green, blue; //color of shape
 boolean gameOver = false;
 boolean timer = false;
 long time;
 Bar mybar; //this is referenceing bluebar

 Ball(int r, int g, int b, Bar mybar_) {
 rad = 30;
 xpos = width/2;
 ypos = height/2;
 xspeed = 5;
 yspeed = 4.3;
 xdirection = 1;
 ydirection = 1;
 red =r;
 green = g;
 blue = b; 
 mybar = mybar_;

 void move (){
 xpos = xpos + ( xspeed * xdirection );
 ypos = ypos + ( yspeed * ydirection );
 // Test to see if the shape exceeds the boundaries of the screen
 // If it does, reverse its direction by multiplying by -1
 if (xpos > width-rad || xpos < rad) {
 xdirection *= -1;
 if (ypos > height-rad || ypos < rad) {
 ydirection *= -1;
 // let's check for collision
 if (ypos+rad > mybar.y) {
 if(xpos-rad > mybar.x && xpos+rad < mybar.x + mybar.w) {
 ydirection *= -1;
 } else {
 gameOver = true; //game over makes the ball black
 //println("ball in below bar");
 if (gameOver == false) {
 } else {
 void display (int opacity){
 ellipse(xpos, ypos, rad, rad); // Draw the shape
 void restartTimer(){
 if (gameOver==true){
 if (timer==false){
 if (millis()+1000>time){
 rect(0, 0, width, height);

//The third tab: Bar

class Bar{
 int w;
 int h;
 int red, green, blue;
 float x, y;
 Bar(int r, int g, int b){
 red = r;
 green = g;
 blue = b;//color
 w = 160;//size
 h = 40;
 x = pmouseX;
 y = height - 100;//position
 void display (){
 x = pmouseX;
 y = height - 50;
 fill(red, green, blue);
 rect(x, y, w, h);//draw shape