Idea
As mentioned in my midterm progress post, 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 (as I love butterflies).

Process & Implementation (step by step)
Step 1: I made a basic layout with shapes, butterfly and background.
Initially I had images of real traps however then changed these to rectangular shapes as it was becoming difficult in step 4 when I was working on the collisions.

 

 

 

 

Step 2: I made a butterfly class and stored all its features then added movement and control of this movement through the keypressed function.
Step 3: Similarly, I made a trap class (the rectangles with curved edges which I made first but then changed to regular rectangles as the curved edged ones were not detecting collisions accurately) and stored its features such as width, spacing, height, color, etc. I generated random heights within certain limits so that they have appropriate spacing to allow the butterfly to fit through.
Step 4: Once all this was figured out, I had to check for collisions so that if the butterfly touched the traps, the color of the trap would change to indicate it has been hit (from white to red). This was one of the most difficult steps of the process.
Step 5: Once the trap is hit, I wanted the game to stop and show the game is over. Hence, I added on screen text to signify this.
Step 6: Then, I created and inserted a start-up instruction page using mode and switch mode within the draw function.
Step 7: I then created buttons to start and restart the game. I did this by going into the html and adding ‘dom’ to one of the lines of code.  To allow the buttons to work and restart the entire game, I had to make a game class to store the features I wanted. At first the buttons were very small and not as aesthetically appealing thus then played around with it in the style.css tab.

Step 8: Next, I added a scoring system, which is placed on the bottom right of the screen.
Step 9: Lastly, I added instrumental sound in the background.

Reflection 
I am happy with how the game turned out and thoroughly enjoyed making it. Some parts were more difficult than others however taking it step by step really helped. I was able to apply skills used in class as well as learn how to do new things. For next time, I would like to have different levels of difficulty. Also, I would want the music to stop when game is over and then start playing again when the game is restarted. In addition, I would want to add a butterfly sprite so that each time the space bar is pressed, the butterfly flaps its wings.

My Game

  The buttons below the canvas do not show here.

 

Idea

For my midterm, I decided to create a game based on old flash games: simple premises with a hint of an 8 bit aesthetic. The game Lift involves the player spamming their space bar to lift the barbell. The user can choose their difficulty in the form of the weight, and is given 10 seconds to complete the game, or else they lose. To give the user some feedback, I added a progress bar on the left of the screen and a progressing image of a person lifting the barbell.

Implementation

I first created a class that represented the game, featuring a weight and a set of reusable buttons that started or increased/decreased the game difficulty. I reflected the game difficulty with a changing color for the text and the start and restart had moving text that oscillated to draw the players attention.

As the user plays the game, the image and flame behind the image would progress to indicate how close the user is to completing the game. A sound would play to give a sense of feedback to the user. I also increased the size and redness of the time left text to create a sense of urgency for the player. The image used is a trace of myself, but shaded black to look less awkward.

I controlled the mouse clicks and button presses by game screen state in order to ensure nothing outside the screen was being modified. The shaking and game end time were calculated by taking the current time and adding them to a variable, and I used perlin noise for the duration after a user pressed the space bar to shake the images and display the fire.

Reflection

I enjoyed making this game as I think I was able to make it function consistently with a set style. I think there is some tweaking necessary in terms of difficulty as weights over 300kg feel practically impossible, but someone with fast fingers could prove me wrong. I would also like to see a leaderboard functionality, but outside of the local scope that would require some type of file manipulation or connection to an external database.

Game Idea

Reflex Shot is a 2D arcade shooting game in which enemies pop up on the screen at random locations and the user has to click them as fast as possible to score points. There is a crosshair on screen at all times and each time a shot is fired a gun fire sound is played. Each game lasts 60 seconds and at the end, the final score, high score, accuracy, number of targets hit, number of targets missed and average time taken to hit a target will be displayed on the screen. The game begins with a starting page which gives the player the option to start of change 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 game to start. Once the game ends, the statistics will be shown and the user will have the option to play again.

Implementation

In my code, I had 3 classes: a Game class, Crosshair class, and an Enemy class.

In the game class, I controlled what would be shown on the screen depending on the current stage of the game using functions. In the draw function, I had many else ifs with a variable that dictated which stage was currently to be displayed to decide which function within the class was to be called. Also, the Game class had variables that counted all the statistics to be shown at the end of the game. The screen backgrounds were also loaded within the class.  There were also a few functions to update the score and high score when required.

The crosshair class had two attributes, length and gap size. Each time the change crosshair size button is pressed, these two values are incremented by a fixed amount, but when a certain size is reached, the values are reset back to their original values.  Other than this, there was just the drawCrosshair function which drew the four lines required for the crosshair.

The enemy class had two attributes x and y to determine the position of the enemy on the screen, a function to move the enemy when it is shot by the user and a function to draw the enemy. The moveEnemy function is used to make it seem like a new enemy spawns when one is shot, but in reality the current enemy just moves to a different location on the canvas.

Outside these 3 classes, my mousePressed function was very important since my game uses the mouse as its only input device. I had a switch case for the game.state variable in which each case called a function to decide what each mouse click would do. Inside these functions, I used if statements when I had buttons to detect if mouse clicks were inside the buttons. Similarly, to detect if mouse clicks were on enemies, I used the mouseX and mouseY values to see if the clicks were inside an invisible rectangle around the image of the enemy. This did lead to some inaccuracies in the clicks, though, as some clicks were registered as hits even if they were in the empty space under the enemy’s arm and above the leg.

In terms of sounds, I added a gun draw sound that plays when the game starts. I had a gun fire sound that plays whenever the user shoots, and a body hit sound that doesn’t sound too pleasant but is used to indicate when an enemy is hit. When an enemy is clicked on, both the hit marker sound and the gun fire sound play at the same time therefore the gun fire sound can’t be heard when an enemy is hit. When the user misses, however, it is clearly heard and it is clear to the user that the shot didn’t hit an enemy.

Overall, I’m pretty satisfied with my work and I think it is a fun game to play. Hope you have fun playing it!

Ideation

For my midterm, I wanted to make some form of pixel art-type monster fighting game in a 2D world. My inspiration for this comes from games like pokemon that I played on my Gameboy as well as newer Nintendo Switch games like Towerfall. I drew up a sketch of what I wanted my game to look like but I was open to making changes so that the gameplay is smooth.

I know this is going to be challenging and quite time-consuming but I want to see how far I can push myself and create a fun game that I and others can enjoy.

Assets

I was thinking of making my own pixel art assets but soon found that I do not have the skills nor the time to learn the skills to make them myself right now. I would like to explore this further in the future but for now, I used assets from Itch.io. I found some player and object and skeleton sprite sheets that are free for non-commercial use. I got sounds from Freesound.org and mixkit.co for all the game feedback sounds and the soundtrack from here. P.S the player dying sound was recorded by me (Professor Aaron thought it would be a nice touch and I agree)

I found this Desdemona font that matched the look I was going for so I used this custom font in my game.

Stage

I was hoping to find a stage online that I could use for my game but I didn’t really find anything that I liked. I did some googling and found something called tilesets which is similar to sprite sheets but for building 2D levels. I use this dungeon tileset that was free to download along with Tiled to create my own basic level.

Movement

I flipped the sprite sheet to obtain movement in the left and right directions with Preview on my laptop. Using the boilerplate code from class that Professor Aaron provided, I was able to get my player up and running.

Attack

This was a bit tricky as I wanted all the attack sprites to loop with a mouse click. I couldn’t figure it out at first because I was using a while loop which made my program freeze. With some help from the class Discord, I implemented it using an attack boolean. Although this increased the amount of code I had, the attack was working fine now. I added a sword slash sound to make it more realistic. If the skeleton is within the range of the player and the player attacks, then the skeleton would collapse into a pile of bones, and bones falling soundtrack would be played.

Enemies

For my enemies, I used the skeleton sprites from Assets and gave it movement. To attack, I created a range where if they detected the player, the attack motion would play and if it lands on the player they would die. The corresponding sound effects are also played when the player dies.

To follow the player, I would simply use their x and y position and move the enemies accordingly. You can see that after a while the enemies will start to pile up, but that is because they are not solid body objects so there is no collision detection. This seemed quite tricky to implement so instead, I added a random change to their speed to make sure they didn’t bunch up into one all at once.

In order to prevent the player from killing all the enemies at once, I added a break after each enemy dies so that only one skeleton can be killed with one mouse click.

The enemies also spawn once every 50 frames, with each new skeleton speeding up, and the game ends once you kill 50 skeletons.

OOP

I created classes for the Player, Skeletons, and the Stage. The stage object is where the whole game plays out. It controls the loading of the player and the enemies and handles the game logic such as showing the start, end, and playing screen. It also allows the player to restart the game when they die or lose.

Controls

w – move up
s – move down
a – move left
d – move right

mouse left click – attack

Game

Introduction

Switching my idea for this project was the best thing I could have done. Now, I am satisfied with the final result “Metastasis”. The user plays as a cancer cell that has to defeat the immune system’s cells: the white blood cells that shoot antibodies and the T-killer cells that secrete toxic substances in close proximity to the cancer cell. The game takes place in a blood vessel because it is a fitting environment for gameplay for this particular idea. The mechanics of every character in the game are characteristic of their real life counterparts. In order to ensure that the instruction screens are not too wordy, I had to limit the knowledge I impart on my audience about the biology of things. However, for the scope of this project. I believe only basic knowledge is required.

In the first level, the user gets used to movement and attacking as they face off against a horde of white blood cells. Then, as the white blood cells die, they signal the T-killer cell to respond to the situation. As the final boss, the T-killer, is defeated, the user wins the game and the cancer cell goes on to metastasize (grow to other parts of the body and take over). The game starts of with a main menu. If the user chooses to view the Instructions, they are taken to a screen that displays all the characters and the way they interact with each other within the game. When the game ends, either if the user dies or if they defeat the T-killer, the user has the option to play again or go back to the main menu.

Implementation

Where do I start…

I will only cover the concepts that I have not mentioned in the Midterm Progress Report.

1) Now, the user can shoot in all directions. The last key pressed is stored to determine which direction the user will shoot in. This idea of shooting in four directions was encoded to counter the T-killer enemy type.

2) There are now two levels of gameplay. First, the user learns how to play the game on an easier difficulty mode against white blood cells. These enemy types do not move much and fire antibodies. Next, the user has to face off against the T-killer which seeks the user’s position and attacks when in close proximity. To counter this, the user can shoot in all four directions.

3) A main menu, instructions menu, and endgame screens are now encoded. There are buttons on the screen that can take the user to the corresponding screens. When the T-killer is defeated, the endgame screen appears prompting that the user won. On the other hand, if the user (cancer cell) dies, the endgame screen appears prompting that the user lost.

4) Sounds have been encoded. I tried my best to find free sounds online that are the most relevant to the gameplay. Sounds for all the attacks, winning the game, losing the game, and receiving damage were encoded.

5) In the first level, the user can only move up until a little over half the width of the screen to encourage distance from the white blood cells. Eventually, in the second level, the user can move over the whole canvas to adapt to the T-killer’s movements.

Overall, the foundation of this project is built on Object Oriented Design with the exception of the T-killer’s attack that only needs to detect if it is in close proximity to the user to activate the attack.

Here is the game:

Conclusion

In the end, I have added every functionality in the final game that I had planned to add in the Midterm Project Report. Have fun playing!

I’m still at the beginning of my game making process so bear with me –

My idea is to make a game where the premise is – “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.

I’d like to create an animated moment where the cat scurries from the door to a hidden place in the room and then the game starts but I’m not quite sure how to integrate that.

The biggest problem I’ve had so far is trying to figure out the drag and drop – I’m able to do it successfully with one image but as soon as I try to make more than one image move, my code stops working. I also realize that I don’t completely understand how to make a class and how to ‘push’ it out in draw. I spent hours googling different ways to code in drag and drop (whether that be different shapes/images) but not many came up. Even with those that did, the code was too complex for me to understand.

I finally was able to work around a code to get several images working and moving but it isn’t very efficient. I’ll need to schedule a meeting with the Professor to figure out how to sort everything into classes and make it smoother overall.

Here is what I have so far – very plain but everything will start coming together in the next day/two:

So I was inspired by the game Crossy Road and wanted to do a similar concept. I chose the concept of a game where you have to run away from your boss and escape in time while avoiding all the workplace obstacles in the way. The camera will pan down slowly while you are running and if you touch the border you will lose.

I implemented my chosen sprite of a guy in a suit and got it to move left right and up as going down is not needed. I also created a background using photoshop of the hallway that the player will run through. My next step will be to add all the furniture objects that the character has to avoid and the camera pan.

Making all the objects move down while the character runs is something I need to try and figure out as I am not entirely sure how that would work, especially on top of the camera not being static and having to move slowly on its own even when the character is not moving.

 

In a previous assignment, I decided to recreate a game, which is more of an appropriate project for the midterm as an OOP assignment. However, this is the perfect opportunity to recreate the game with components that make it more like the real game.

Components that are necessary for recreating the game are (1)adding the keyPressed function so that the mouse is no longer controlling the car, but the space bar to drive forward, and left and right arrow keys to move left and right, (2) add a component so that when the cars crash the game is over and restarts, (3) it might be ambitious but to recreate the car crashing sound effect, but it could also be that I have car sounds in the background which I have found different effects here. Visually, I would like to make the cars look more realistic by adding a roof to the car using the push and pop component or simply adding a rectangle of a different color on top which I played with but wasn’t successful. Finally, I of course want to add the direction/start page, which like the car sounds would make a sound with every button the player presses on, and make the car start in a lane and not on the bottom left corner.

At  this point, this is where I am:

 

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 it because it was the quickest way to receive in-game money. Due to the  dissesemblement of the game, my aim is to recreate this game with my own twists. You can click the link below for a clip from the original game.

Implementation (thus far)

So far, I have preloaded some images to display the background and fishes in my game. These are regular pngs, but I hope to find appropriate sprites later to make the game less stiff. The fish class randomizes the starting and speed of a  position of a fish. This way, each fish ‘spawned’ by the for-loop in the draw function has its own unique random attributes, thereby avoiding any patterns from forming.

Conclusion

I hope to incorporate several more types of objects to make the game more exciting/challenging, while also making it more interactive.

For my midterm project I decided to remake my own design version of Guitar Hero. The game functions are straightforward and the concept is laid out, so all I have to focus on is actually coding it in p5js and designing my own UI. I firstly began with a reference of the functions I’d like to remake, my main point of inspiration is from this code by Joseph Aronson.

When testing out this version of the game I instantly knew what parts I liked and what I would eventually change. The main factors that worked well in my opinion would be the interactivity of pressing the buttons or missing them (when you press the border lights up green, when you miss the screen flashes red). However, the buttons ZXCV felt very uncomfortable for my hand to quickly tap on the keys, which goes against the original idea of Guitar Hero which came in the form of ergonomic keys on a toy guitar handle.

For this reason I decided to remake my interface with only three keys, and I chose to use the up, left, and right keys since they felt the most comfortable to rest my hand on.

To take this idea a step further, I will also be adding different music to the different levels that will correspond to how fast the user must respond with a matching key i.e an the extreme level would have an Eminem Rap song as opposed to the easy level that might have a slow song.

Additionally, I will add a sprite character playing the guitar to the side of the screen which will be programmed to stop/play according to the music playing or not (when the user loses, the sprite will not be moving).

Currently, I have customized my own interface according to the three buttons I want to use, and am working on adding sound (which is not working in the way I want it to as of yet). I have also made my starting title/menu screen which is working, and when the user chooses the level “easy” the screen successfully transitions to the game screen. I still have to add my moving sprite on the game screen and I need to figure out how my key output sounds will connect to the music I insert. There is still a lot of fixes I have to make, but for now I’m very happy with the progress.