Month: March 2022

For the midterm, I am creating a Carnival-themed game: Shoot the balloons. I plan to have balloons displayed on the screen, and the player has to pop as many as they can in a given time.

The main work for this is to make the balloons pop. So, that is what I was mainly working on. I used an image of 6 colored balloons and created an array with each balloon in it.

Here’s what I have done so far:

I have also (manually not looped) the display of balloons in a line to see how I want to position them on the screen. I will be using a background as in a carnival stall that I have to design yet.

Its pretty slow progress but I plan to update this as I have more developments.

As a midterm project, I decided to make an FPS (First-person shooting) game. This is an upgraded version of the OOP assignment.

In order to make a plan of overall programming, I decided to write down the algorithms needed for each object in the game.

Algorithm

 

Class Zombie – create an array of zombies

Spawn() – spawn a zombie in a random position on the screen

hitbox() – give a range of hitbox

Die() – when shoot() is called clear all zombies that includes (middle, middle) coordinates inside their hitbox & displays death frames from the sprite

Walk() – zombies walk around the map with random speed & random distance in X-direction & Takes frames from sprite

 

Class GunClass – shoots when clicked

drawBullet() & fly() – draws a bullet and make it fly to the shooting direction

shoot() – displays shooting motion of the gun sprite when it is clicked

 

Class UI – shows the score and the time left of the game

Timeover() – stops the game and shows the UI that shows the score and restart button

Restart() – restarts the game

Pause() – pauses the game

Resume() – resumes the game

 

I have progressed until implementing the shooting motion of the gun and will be adding the zombies soon. The prototype is below.

Ideas & Inspiration

For this game, I took inspiration from the game ‘Flappy Bird’ where you have to control the bird by not letting it touch the green pipes. I wanted to incorporate a similar concept therefore went with the idea of having to keep a butterfly away from the fly traps (I love butterflies).

Process & Implementation 

Once I decided that I wanted to use a butterfly and fly traps, I started  brainstorming what I wanted the aesthetic of the game to be, by choosing suitable images and a color scheme. Then, I did the basics of finding images I wanted to use for the game, preloading them into p5js and then playing around with their sizes, placement and size.

Then I was wondering what to do next as there was so much I wanted to do, so I noted down all the different functionalities I wanted and made a list. I decided to start off by making a butterfly class so that I could store all of its features such as width & height as well as what I want the velocity & gravity values to be (to actually make it move). I am currently working on getting the butterfly to bounce when the spacebar is pressed. I also made a class for the fly traps, which I need to continue working on however felt as though I should focus on working on the butterfly first and then the traps next.

What to work on next

1. Get the butterfly to bounce, using the spacebar key
2. Get the frame to move with random height fly traps.
3. Have a start up screen which introduces the game with basic instructions on how to play.
4. Maybe – have a sound for each time the spacebar is pressed
5. Have a points system
6. Have the fly traps go red once the butterfly touches them – I may have to hide a shape behind the butterfly to allow this to work well.

What I have so far –

Idea:
For my midterm, I will create a game called “Hungry Henry”. In this game, there will be food falling from the sky – like the movie “Cloudy with a Chance of Meatballs” – and the small person (Henry) will have a task which is eating all the food that falls from the sky. The player gets to move Henry left and right in order to eat the falling food; if the food touches the ground, the player loses.

Implementation:
In order to make the food fall from the sky, I will be using object oriented programming. So far, I have been having some difficulties with the if function that makes the object move left and right. I am assuming it is because my “object” is an image. For my progress, I am using the image of a random cat, however, my actual object “Henry” will be an animated figure that I will draw using an iPad to make it more customized.

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. For this idea, I decided to rely on the campus’s recycling procedure. 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.

 

Process

Throughout the process, I had struggles with implementing the idea. I could not rely on the game I got inspired by, since there is no need of being able to “hit the bean”. Instead, the program should sort trash into different categories, which is more about a “correct placing”. Thus, this idea reminded me of the old game Tetris, where a player needs to use keys to place a figure. Similarly, in my project, using the arrow keys, a player needs to sort out the waste and put it inside the correct bin. 

I had some difficulties in making randomly appearing pictures from the array, and it, honestly, took me a lot of time. Therefore, it is kind of a slow progress :):

Plans

I have a lot of work to do. First of all, I need to figure out how to do the main “sorting” process in the code. Roughly speaking, the program should be able to separate images into three categories: general waste, paper, plastic. Then, I need to add audio, a menu with instructions, a timer and scores.

 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 wish to create different levels for this game and plan to decrease the paddle width as the user loses its lives. The progress I have made so far is purely on the coding and logic of the game itself and not the appearance or functionality in terms of importing sprites for the paddle and having sound effects along with the menu screen.

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. I am intending to replace this rectangle with a Sprite later on but as of now I wanted to see if I was able to use this to get the game up and working.

I also created messages for the user when life is lost or restart game but I have not been able to add any buttons yet. I wish to create a whole menu screen which would be used before start of game and restart along with different levels and possibly even multiplayer option.

Plan

I plan to add the following things to my game:

• Create gradient background which would change as the user score increases
• Add sound effects when there is a collision and a brick is destroyed
• Increase the game difficulty by reducing the paddle size making it harder and harder.
• Import sprites for the battle and possibly other enemies/obstacles that the Player might have to avoid.
• Create a menu screen with instructions at the start of the game and restart.
• Add multiplayer option which would’ve allowed two players to compete against one another. However I feel like this would be time consuming and difficult to implement as it might require a complete new code.

 

 

Game Idea

My game is going to be a 2D arcade shooting game in which random enemies pop up on the screen and the user has to click them as fast as possible to score points. There will be a crosshair on screen at all times and each time a shot is fired a gun fire sound will be played and there will also be some background music. Each game will last 60 seconds and at the end the final score, high score and average time taken to hit a target will be displayed on the screen. The game will begin with a starting page in which the name of the game (which I haven’t decided yet) will be displayed and the user will have the option to start the game, change the crosshair size. When the start button is clicked, the game instructions are then displayed on the screen and the user has to click the screen again for the actual game to start. Once the game ends, the statistics will be shown and the user will have the option to play again.

Implementation

I started by creating a class for the Game in which I would store an integer variable to indicate the current state of the game (state = 0 means menu page, state = 1 means the actual game starts, and so on). This would make it easier to transition from one game state to another and would make it easier to be able to restart the game once it ends without having to re-run the code. I also added a high score variable to store the highest score in the current session. I also made a crosshair class so the user can change the size of the crosshair in game and created a draw function inside the class to draw the crosshair at all times during the game wherever the mouse pointer is.

After this I downloaded an image from this link
https://steamcommunity.com/sharedfiles/filedetails/?id=766712125
to use as a background for my menu screen. The image had a resolution of 1920×1080 so I changed my canvas to a size with the same aspect ratio to make the image not seem stretched or compressed.

I then started working on the buttons for my menu screen and used rect, text and a lot of if statements to do this. Then I worked on my mousePressed function, which would have several parts to it depending on the current state of the game. I also created separate functions to be called within the mousePressed function so that not all my if statements will be in my mousePressed function.

In mousePressed the first thing I did was store the mouseX and mouseY variables in two separate variables just to make the mouse clicks slightly more accurate, because mouseX and mouseY will be changing very fast in the game. I then pass these two variables into the relevant functions as required.

I am using an array of size 3 so that there will only be 3 enemies on the screen at any given moment. As for the enemy hitboxes, I am using a hypothetical rectangle around the png of the enemy to detect if the user clicks on the enemy successfully.

So far I’ve finished the starting screen, the instructions screen and most of the actual game.
Enemies are generated at random locations on the screen and if the mouse is clicked inside any of the enemy hitboxes and the score is adjusted accordingly. Now I have to add all the sounds and make them play on each mouse click and each time an enemy is successfully hit to add feedback and create the game over screen. I also have to add backgrounds to the different game states.

Idea

I wanted to create something that educates my audience (primarily pre-high school adolescents). Since I loved studying biology when I was that age, I decided to illustrate the defense mechanism our body employs against cancer cells. Through my game, I want to cover the basics of immune response to cancer cells i.e. the types of immune cells involved, their modes of action, the cancer’s response to it etc.

I started by exploring the free 2d models available online that could be relevant to my project. But, initially, I could not find anything that I could use. For example, I would find a cartoonish cancer cell 2d model but it would have a white background which would not fit very well with the background in-game. This is why I decided to change my project idea altogether. At this point, I decided to settle for a Spaceship-shooter-esque game. Good 2d models were very easy to found and I made good progress too. Here’s what I had been working on up until yesterday (use the arrow keys for movement):

Even though I was making good progress, I did not feel satisfied. I was passionate about implementing my initial idea and working on anything else felt like I was holding myself back. After a lot of thinking and much needed motivation from the professor, I decided to go back to my original idea.

Cancer cells can proliferate and spread to parts of the body other than where they initially appear. This process is called “Metastasis” and is the title of my game. The user plays as a cancer cell and it must fight off the immune system’s cells in order to take over the body. Through the game, the user will be prompted to learn about the immune system’s mechanisms by understanding how the enemies will attack the player. In this way, the user actually learns how the body defends itself against cancers in real life. I decided to let the user play as the cancer cell, even though playing as a cell of the immune system would make a better protagonist, because there would be more variation for the enemies (immune system’s cells) in the game. The game is set in a blood vessel (background).

Implementation

As I mentioned earlier, I started by exploring free resources for the game online.  I still ran into the problem of having images with colored backgrounds but I recently learned how to use Adobe Photoshop in another Interactive Media course – Communications Lab. Setting Alpha values to make the background transparent was easy and gave me exactly what I needed.

I wanted to code the most technical part of my game first. This is why I focused on the gameplay instead of the text-screens to guide the player. Even though not all the gameplay features have been added yet, I believe I have implemented a strong foundation to later introduce new enemies and changes to the cancer cell.

Here is what the game looks like right now:

I use object oriented programming to code the flowing red blood cells in the background, the enemies, the cancer cell the user plays as, and the projectiles fired by both the user and the enemies. The projectile fired by the user is representative of the toxic substances cancerous cells often secrete like enzymes that digest the body’s cells in its surroundings. As for the enemies, I have only encoded the white blood cells right now and they fire antibodies onto the cancer cell.

As of now, my code is not commented. But, I will explain the most technical aspects of the gameplay here:

1) Health Bar:

The health bar consists of two rectangles, one with a red fill and the other with a black fill. The red rectangle represents the percentage of the health the user still has left while the black represents the percentage that has been lost. Combined, they effectively represent a basic health bar.

2) Shooting:

The user fires a single projectile every second. Two enemies chosen randomly every two seconds fire a single projectile each that seeks the position of the user in the frame that the shoot() function is called. In this way, it is possible for the user to avoid the projectiles by maneuvering using the arrow keys. If an enemy is hit, it triggers a decrement in their health and triggers a hit animation. If the enemy’s or the user’s health equals 0 (set up to be at the second hit right now), the cell death animation is triggered.

Plan

Now, I only need to extend the gameplay to include at least one more enemy type that has a different mode of attack than white blood cells, like the T-killer cells that secrete toxic substances in close proximity to the cancer (include an enemy that utilizes melee instead of shooting projectiles). After that, I only need to encode the starting menu, instructions, and “game over”/exit screens. I will also add relevant sounds the game with perhaps background music, and different sounds for when an object is hit during the game. Overall, I feel more satisfied working on this project than the spaceship-based one.