“Shoot the Balloons”

Game:

Concept
My game is a classic carnival game, where the player has to shoot as many balloons as they can in a given time. I put the time as 45 seconds but realized it was low and changed to 120 seconds.

Implementation
I created a balloon class for the balloons. Initialized an array and added 4×6 balloons (for loop) in it. Then used the run function to display them at their positions. For the shooting part, I had a distance variable that calculated the distance from the click to the position of the balloon, and if it’s in a certain range the balloon pops. For popping, I simply pop the balloon object from the array. I added burst sound effect when it pops and shoots effect when the mouse is pressed anywhere else. Also, added a timer and score display. In the end, there’s a game over screen with a score and instructions to restart.

Challenges
There were two main challenges. I wanted to have random colors of balloons. I was using a sprite sheet with 6 colors of balloons. However, shooting a balloon displayed, made the whole screen disappear. That was because when I was adding balloons in my array, it was basically the whole sheet and not one balloon and popping that means removing the whole screen? So, I changed my image with only one balloon.
Another challenge was restarting the game or having multiple screens. My code was in a certain fashion that it was difficult to implement the screens one after the other- it led to crashing/overlapping of screens. The restarting the game was difficult as well-later I figured out that simply used keypressed() to restart.

Reflection
Overall, it was a fun game to implement, and learned several techniques of typical games. While some things were challenging as mentioned above, I am glad I am done with it! yay

Inspiration:
So at first I wanted to create something similar to the game Crossy Road, but overtime my game started to look like the 2D version of Subway Surfers and I decided to go with it because I really liked how my game was turning out. My game is called City Run and has a retro, mafia theme.

Process:
I began my first iteration of my project with letting my character move forward, but I found it was impractical as the character would go off screen so I removed the upward direction. I later decided to use the up button as a Jump button as sometimes the 3 lanes would all be blocked at the same time. I was also trying to think of a way to entice players to keep playing my game so I decided to scrap my original idea of my game being time based to just being score based with a high score tracker that would incentivize the players to want to beat it.

Reflection:
Overall, I feel that my confidence with p5.js has been lifted drastically after this assignment. I have a better grasp of the language and I feel like I learnt a lot and can finally manipulate the language in order to create something I want. Previously it was a lot harder to create what I envisioned in my head due to my skill level. I really enjoyed this assignment and I hope you enjoy my game!

Inspiration

In elementary school I played a lot of Club Penguin. In the club penguin world, there was a mini game based on fishing, and I’d always play because it was the quickest way to receive in-game money. Unfortunately Club Penguin has shut down now, so I made my version of the game to fill the void.  Welcome to Fishing Simulator!

Game Implementation

1. I started by creating the fish class, and scolpted my game around it. I wanted to make them as random as possible, so each fish is given its own spawning location and speed. And each have their own boundaries, which after reaching, they will return back to their spawn location to start their journey again, until the user has caught them. The more fish the user catches, the higher their score is. I set the cap at 15 fishes, but this can be easily changed by varying the for loop containing the instantiation in the setup function. To my dissapointment, there was a lack of fish sprites online, so a png had to suffice.
2. I chose backgrounds that I thought fit the theme of the game, and incorporated a lively outdoor-sy game music.
3. Next I made the fishing line class. It was simple as it only constituants are a line and an arc shape. This is coupled with the catchFish() function to complete foundational game mechanics. In this function splice() is used to delete the fish objects that had been caught, by coming in contact with the fishing hook. At first I coded the fishing line to move according to mouseX and mouseY, but this made the game too easy, so I only allowed user to control the fishing line’s vertical movement. This way, users’ need to assess timings as well.
4.  Subsequently, I created the Boot class. This didn’t take long as it had similar movement properties to the Fish class. The only difference is that if the user catches a boot, the game is over. This is checked by the catchBoot() function.
5. With all this, the user is finally able to play the game with all the essential components incorporated. There are specific sound effects that play if the user catches any of the objects.
6. Finally, I integrated the start and restart screens and their corresponding buttons. With these, the user doesn’t have to rerun the code everytime he/she wants to play again.

As soon as we were introduced to the midterm assignment – i.e. make a game, I immediately knew that I wanted to make a game that involved a cat (I absolutely love cats). So I decided to make a game with the premise: “Oh no, my cat escaped into my brother’s room! Help me find him quick before my brother comes back from the bathroom!!” I would put a 1-2 minute timer, depending on how many items are in the space/how difficult it is to complete with trial and error.

The biggest struggle was trying to find an easy to understand code template for drag and drop an item within the canvas – once I figured that out with the help of the professor into making it a class, I was able to design the game how I wanted to. I tried making it look as much like a bedroom (with plausible decorations/furniture).

A discussion that I had with Jack when trying to get to instruct the game such that if the user clicks on the cat and it is not under any furniture/decoration, then change the screen to the winning screen. However, the drag and drop mechanism works like so:

There is a hidden small box where each item is placed onto and whenever the mouse hovers over this box, it switches from arrow cursor to hand cursor making it easy for the user to know when it is draggable. Each item has its own dimensions so only at the center of each item can it be dragged.

If I wanted the winning screen to only appear when the cat is not behind anything then it needs to not overlap with the box – considering that the box is small, this would not be feasible. In order for this idea to work, then the box would need to very specifically cover each item with all its curves, and have a specific box for each specific item since each item has their own dimensions. One small flaw of the game is that after the cat is clicked, even if it is behind an item, it would immediately change to the winning screen – so if the user were just clicking on random objects and not even dragging then they could win the game.

Nonetheless, after figuring out the main game screen and how to toggle between modes/screens (i.e. the instructions, actual game, winning the game and losing the game screens), I had to focus on how to integrate sound into the project. I needed to ask Jack for help in figuring out how to make my audio play only once, which led to making a hasPlayed variable. This variable and the timer is then reset every time the player returns to the main instructions screen.

It was important to me to have a timer on the screen – 1. to add suspense and stress 2. it is a fairly easy game, so I made the timer be 10 seconds. I had to figure out how to make the timer not flash as the countdown continued – but with a bit of changing a few variables here and there it all worked out.

Overall I am very proud and cannot believe I just made an entire game!! I cannot believe I kept at it and tried to understand each line of code one by one in order to make what I envisioned in my head happen. I’ve learnt so much and want to make more!

*sounds don’t work while embedded!*

Here it is:

Concept:

I originally had this idea in thinking about OOP and continued to work on it since. Wild Wild Taxi is a game that I have played for the majority of my life, even now, most of my friends know how much I enjoy the game. Unfortunately, as I mentioned before because Flashplayer is no longer available I have decided to recreate the game so be able to enjoy the game in some way now.

In the actual design of the game, in all of the different versions of the game, there has been a different theme, from basic car driving, to what I wanted to look like the highways of Abu Dhabi, to what is now the streets of New York. Looking at the game now, it just is nice to look at than before and feels more like a game.

Implementation:

To be able to actually recreate the game I knew there would have to be different states, or screens of the game, which I’ll call START, INSTRUCTION, GAME, GAME OVER. In each of these pages there were different components, the first two START and INSTRUCTION, are images I created based on the taxi theme and using the key pressed function to move onto the next mode. Once on the GAME mode, you can use the left and right arrows to move from lane to lane within the set boundaries that are the lanes. In the GAME mode, you don’t lose unless you click the left or right arrow, which in a way isn’t very accurate of a game, but I appreciate games that don’t make me lose when I am not playing since I often tend to multitask, but in the future, this could be a pause mode so that the entire game pauses. Once you crash into a car, from any of the four corners, the game is then over and you can restart the game, and continue where you left off. With all of this, there is a sound that is in the background that adds to the effect of the chaos or the “Wild Wild” component.

Challenges:

In envisioning the game, I didn’t realize all the different components that went into creating a game. In the end, there were two main challenges, first, while there is sound, the sound I originally wanted was to play an ignition sound during the START and INSTRUCTION phase, then a sound of cars driving in the GAME phase, and finally a crash sound when the cars crash and the game is over. As it is now, is also okay, but I think having the sound as feedback to the actions of the player adds to the interaction between the game and the player. While I was able to overcome this challenge, I didn’t realize the about of thinking that would go into making the game end when the cars are crashing, it was all very logical, but it took a lot of thinking to understand and account for all the scenarios in which a car is crashing in relation to the X and Y position of both the Taxi and the other cars.

Reflection:

Overall, this was definitely another learning experience. I got off to a slow start, but I am satisfied with the current state of the game. Throughout this process, and at this point in the semester I have realized that I have two major challenges within the class that was apparent throughout this project. First, I think coding requires you to think logically while also paying attention to details in a way that I am not used to. I think this forces you to look at every line of code and think in the order of what needs to happen when, for example, what line needs to be drawn, and does it happen before or after the cars move. And I think along with this, I like to understand why something is the way it is, so as I am trying to figure out what exactly needs to be written in the code, I am also trying to understand every component of the line and where it is overall. In time, I think this will get better, but for now, it is intimidating. The other major challenge, that I think is, even more, intimidating in a way is the endless amount of possibilities when I am creating something, the ability do that makes me feel like I have to think of all the possibilities and consider which I will like the most in the end, the process in coding it, and then the visual component that I in every assignment, I spend the most time. Overall, this has all made me appreciate WILD WILD TAXI more, and excited to continue to work on it to ultimately replicate the original version.

With that, here is WILD WILD TAXI!

*sound doesn’t work when embedded

Game theme and Concept

1. Genre – First Person Shooter (FPS) game
2. The main goal of the game – get a higher score by shooting as much as golems as possible using the limited amount of bullets provided

Implementation

1. Structure of the overall program
   1. Setup()
      1. set variables to avoid unexpected bugs
      2. set frameRate to 60 to make sure all computers display the same result
      3. Divide the PNG file into frames of each sprite (Gun, Golems)
      4. Create a pool of Golems that respawn when killed
   2. mousePressed()
      1. Pause Button
      2. Resume Button
      3. Click to Shoot – Only when you have enough Ammo
      4. Start Button
   3. draw()
      1. make objects move according to the movement of the mouse cursor
      2. display Golems
      3. Display Cross in the middle of the screen
      4. Display PauseUI / StartUI when the game is paused/starts
   4. GunClass
      1. display() – display the sprite images by frames
      2. move() – Shooting motion when the mouse is clicked
   5. Golem
      1. display() – display the sprite image by frames
      2. alive() – the movement of golem when it is moving across the screen
      3. deadMotion() – movement of golem when it is shot
      4. respawn() – waits for a few frames and resets itself in a random position
2. Techniques Used
   1. Instead of adding an extra golem whenever a golem is killed, I decided to reset the golem that is killed so that there is less use of data and reduce the amount of trash data by recycling resources. – Advantage of OOP.
   2. By transposing the golems the same amount as the movement of the background image, the game gives a strong conception of being in the middle of the scene, looking at the screen from the first-person’s point of view.

Here below is my final version of the midterm project game! Enjoy!

(Recommended to Play in Fullscreen Version)

https://editor.p5js.org/yl4643/full/Rr46vntt5

 

Idea
First of all, I got inspired by the old game (https://kbhgames.com/game/throw-paper), where a player needed to throw a paper into a trash bin. Then, I decided to modify it, thinking about making a waste sorting game. Honestly, when I see trash bins with different labels, I can get confused about how to do waste sorting. Therefore, my idea developed into a sort of educational game. I made some research and stumbled upon plenty of valuable resources from our university about sustainability and effective recycling. https://www.thegazelle.org/issue/148/features/recycling-rundown?fbclid=IwAR29lGNj9u9fJKsSh04SI1rM-9KAqOV92OBGTBX-ObOIKGupfIssHzaCB2A. https://docs.google.com/presentation/d/1pbGNdAsGjuJ5EpqZOm0oOVZWK7rg-g04gpsV4Wo7e0E/edit#slide=id.p.
Implementation
While thinking about the ways of implementing the game, I came up with the idea of re-creating a Tetris based functioning. Ultimately, I wanted a player to be able to use arrow keys in order to place the trash into the correct bin. First of all, I started with creating bins and trash items as two separate classes. I have included attributes inside each class that help to display and move items due to pressing arrow keys. The items are randomly selected from the trash array and generated at the top of the screen

Challenges
The foremost challenge was how to implement the logic of the game into coding. As it could be seen in my previous post, I struggled with the basic functionality of the game. I spent a lot of time on this while rewinding everything that we learned in the class and going to the Professor’s office hours. After dealing with that, it became easier to add multiple, but small details for the program’s proper functionality and design. The items are supposed to fall into the correct bin. To achieve this, I have created checkTrash() function, which considers the coordinates of the bin to place trash. After finishing working with the game functionality, I added scores and a timer. Every time a player places trash into a correct bin, the score is increased by 100 points, otherwise, he might lose 100 points. Then, I created the menu for the game with two buttons: Play (to start the game) and Instructions (to get acquainted with the game rules). There is a sound when you click on each button. Also, I added background music as well as a cheering sound whenever a player correctly sorts out the trash.

Reflection
The beginning of the midterm project was chaotic and challenging, but, eventually, I am satisfied with the final version of it. Through this assignment, I could consolidate the material that we learned during the first half of the semester. Generally, that was a fun experience.

By looking at the time this is posted, you can tell there were a lot of last minute tedious fixes I had to make to make my game work smoothly. I will begin with the details that surprisingly took the longest. After my first draft, I noticed that the space in between my menu buttons (easy,medium, hard etc.) were clickable, and this was the same for the x-axis of my buttons. The issue was that the buttons had a very badly adjusted offset, I fixed this through trial and error (easy but extremely tedious). My next issue came when I realized that my game didn’t end after the songs ended, I had to create an if statement for this (pretty easy fix). After thinking everything was going well, I then noticed that if the window was resized, everything would get thrown off course, so I aligned each elements position to be relative to the next so that it can be responsive to any window size changes.

After going through these tedious changes, I had to start focusing on the actual songs and the creation speed of my arrows. I wanted the songs and the arrows to be in sync almost. While I could’ve calculated this more technically using each song’s bpm, I decided that based off the song’s tempo, I would assign them to the level difficulties. Starting from there the songs and the symbols were not so out of sync, but this wasn’t enough. I took a more tedious route here by adjusting the speed and vertical distance of my arrows to suite each song and level difficulty, if you pay close attention a majority of the arrows will perfectly line up with the song’s beats.

My biggest issues with this project was understanding how to rework my code in a simpler and cleaner way, I kind of took the long messy route because its what I understood best.

I really enjoyed making my own designs and deciding which interaction to use based on what I already know from playing different versions of guitar Hero. I previously experimented with using a sound response for each key pressed on time, but that ended up clashing with the music in the background and sounding awfully annoying, so I decided to go with a box that lights up green when the key is detected to be pressed in the proper range using the splice function. The screen will flash red otherwise.

I also decided to make the game over screen appear if 6 keys were missed in a row, I chose this number after testing it on my friend who said “6 missed keys are fair enough to lose the game, but also challenging enough to want to play again”.

Overall, I learned tremendously a lot from working on this game and by taking the long route, I began to understand what shortcuts I can begin to make instead. In the future, I would like to be able to fluently implement faster code, instead of taking 10 lines to do one thing I’d like to be able to do it in 1.

And finally, here is my Midterm project !!!!! (feel free to resize the window😎 )

Benny The Fish 🐳

Final Product 💥

Concept 📌

As explained during my first blog entry, I wanted to turn Benny the Fish, my CommLab comic into a game. The art style, design and plot of the comic would be reflected in my creative process for the game. In its current and final form, the game goes like this:

1. 1. 1. The players begin in an introductory screen where they see the logo, the playable character, and a short set of instructions. They begin to play by pressing any of the keyboard arrow keys.
      2. Then, they will be able to move the character around in a setting that resembles a fishbowl. As the first level of this game, the background parallels the initial fishbowl where Benny is. In this case, however, Benny has to evade water bottles and eat food.
         1. – Every piece of food eaten increases the player’s score. Every 5, the size of Benny increases by 10%, making the game harder.
         2. -If the player touches a bottle, they will be taken to a screen reiterating it is bad for Benny to touch plastic. Then, with arrow keys, players can continue exactly where they left off. Bottles around the fish are moved back as to not cause problems.  Every time this happens lives (initially 3) decrease by 1.
      3. If the player runs out of lives, they are taken to a game over screen indicating Benny’s death and prompting the user to restart the game.
      4. After 25 pieces of food, the player is taken t o level two. Benny grows into a whale (Plot Twist) and there is a new enemy in sight. The rest of the mechanics are the same.
      5. Upon  reaching a score of 50, the user is taken to a winning screen. Benny can’t stop growing and, thus, they are prompted to click anywhere to restart the game.

Materials 🔎

• • The idea for the comic and characters was  in collaboration  Jeongin Lee, Chaehyun Ha and Mike Kattan.
  • All of the objects were designed by me in Adobe Illustrator, and the backgrounds & logos in Procreate.
  • The sounds were taken from  https://freesound.org/

Reflection 👨🏼‍💻

Working on Benny was a big challenge for me. It was a great exercise to make sure I was proficient in all of the concepts covered in class, and made me grow a lot as a coder. I learned that there is not always one way to solve a problem. Creativity, resilience and patience are necessary to make sure you can execute your vision. Having started which such a defined and specific vision for my game made it so that I had to adapt the code to my preferences. Not the other way around. For this, I am very proud. Albeit Failing to do the sprite sheet for Benny, I managed to include all of the other elements and mechanics that I wanted to, ending with what I believe to be a very successful game. Me and my roomates have played the game a few times and can vouch for it having a logical flow and technical stability. I am very proud of the final result. I hope you enjoy meeting Benny the Whale.

Journey 🛬

Given the fragility of my computer and previous experiences, I saved multiple backups of the game throughout my process. These are shown in all of my updates, and display my progress through time. Here are the updates in my project since March 2nd. (See previous post for updates 1, 2, villains)

Update 3: Conditionals & Design (March 3rd – 6th) 🏞

This might be one of the, if not the biggest update for Benny the Fish. After integrating the villains & controls during Wednesday’s class I spent a lot of time with the conditionals. During the initial days of this weekend, I wrote in my code a switch statement that would create the modes of (1) intro screen, (2) gameplay, (3) losing screen, (4) winning screen. This allowed me to have a much more structured product. I also added if statements to build the killing of Benny mechanism, while adding a live count.  I also added images as backgrounds which make the experience of playing much better. Currently, the game has many elements to be fixed, bugs and improvements, but as soon as I add the designs for the villains and figure out how to restart the bottles.push() & canPlastic.push() for loops, the game will be a playable and great initial product. I still have a lot of work ahead, but believe the game looks very promising.

As always, my immediate next steps are:

1. 1. Designing the villains & adding them into the game.
   2. With the villains’ design, I can make sure that the distance interactions are as accurate as possible to give the game a better feel. (Not looking forward for this step)
   3. Add Background music, bumping, dying, & eating sounds.

Some overall steps I want to take are:

1. 1. Figure out how to win. Time? Eating Mechanism?
   2. Adding different levels. I would love for Benny to grow & change of scenery as he does in the comic.
   3. Adding the tail animation for swimming.

Update 4: Error Fixing (March 6th) ⚓️

When hit by a villain, I would press any arrow key to continue playing, but would often find myself amongst a group of villains, making it impossible to continue the game. Thus, I spent a lot of time trying to reset the for loop that moved the villains. Nevertheless, I was able to more easily fix this situation by adding a conditional statement within the function  moveVillain() to reset the positions of the villains surrounding the starting area of Benny. Finally I managed to have the dynamic be: if Benny is killed, he stays in the place he died, where the player can continue. However, all villains in a 200 px would move to y=0.

I also added a little element so that you can see the silhouette of Benny when killed, and organized some of the code.

Update 5: Food, Water Bottles & Lives Counter (March 7th) ❤️❤️❌

An important element I wanted to include in my game was a way to win. In the comic, Benny ends up in the ocean and growing. I needed to include this in the game. Thus, I added a food mechanism that allows the fish to eat, and increase the player’s score.

I also designed a temporary image for the villain water bottles. I switched the circle for a rectangle and spent an embarrassing amount of time playing with the distance function to make sure the dynamics feel natural but are a little forgiving.

My next steps after this update would be to:

1. 1. Add a growing Mechanism
   2. Add a second level & winning screen
   3. Add sounds to the game

Update 6: Level 2 & Winning Screen (March 8th) 🪜

This is probably the update that took the longest to make. I wanted update 6, the last update before the final entry to be a submittable project. That is, a sketch that would fulfill all the requirements for this midterm assignments. I added a second level with the whale sprite as I wanted to be a little more faithful to the comic, and I added a winning screen. This allowed Benny the Fish to be a much more complete experience. Furthermore, I added upbeat music for the background of the game to simulate previous experiences I’ve had with games.

Idea and Inspiration

The idea I had for my game for this midterm assignment was the classic breakout game. From a young age I had played this game and I really wanted to code this game out and re-create my childhood experience. As simple as this game looks, this 2D game isn’t as easy as it appears to be. I wanted to speed up the game and decreased the paddle width as the user loses its lives.

Game Implementation 

I want to start by coding how the game would work and by coding out the main object in the game which is the ball, bricks, paddle. After any shading all my global variables I created a bricks array which would hold each brick as an instance just like the object oriented assignment. I also populated and array with the brick colors in order to create a fading effect by using colors close to one another. I then created a function for paddle which was responsible for moving its position left and right depending on the key pressed which would raise a Boolean flag that triggered the movement. 

Then I went on to create the ball which was essentially a circle but this was the most time consuming function. After carefully figuring out the math I was able to get the moving and bouncing effect. I used several if conditions to restrict the circles X and Y coordinate in between the canvas and the interaction with the paddle. The hardest part of all this was the collision detection. For this, I created a different function which checked for the collision at the bottom of the brick by looking at the coordinate range where the ball’s radius would overlap with the bricks dimension which would mean there was a collision and it will return true.

In order to make the brick disappear after the collision I iterated through the bricks array and checked for collision between the ball and the particle brick and if so I used the splice() function in p5.js to remove the brick from the array. I would also increment the score at this point. For the loss of life it was fairly easy since I would just check if the circles y-coordinate was greater than the height of the canvas which meant that the player had failed you make contact with the paddle and has lost a life. 

For creating the bricks on the board are used functions in a way that allowed the bricks to be populated across the canvas using nested for loops. The growing of brick would just fill each brick with its corresponding color and simply create a rectangle with respected coordinates.

Furthermore, for the paddle I wanted to make it as realistic as possible. Of course there wasn’t much physics but i used a simply inverted the x direction when the ball hit the paddle. In order to get this to work correctly, I tried several different approaches like reflecting the angle if it hit ton either half of the paddle but it didn’t work logically and kept bouncing on the same side. So i resorted to using the negative and positive direction (+dx/-dx) for the switching the side and bouncing it to its respective opposite side. However, an additional effect that I implemented was the ball bouncing off the edge of the paddle to the same side.

I tried to increase the difficulty for the user by slowing increasing the speed of the ball as the game progressed and to make it more challenging the player had to move the paddle faster, which also decreased in width as the score went up. I also added sound when the user got a point (which was one brick was destroyed). Sound effects were also played when the user lost a life, game was over or won the game.