Creative Coding Week 4

For this week in creative coding, I decided to try and make my first game in p5js! The assignment was to create some sort of collision or something so I thought it would be fun to make one of the first popular arcade games, space invaders. Shooter games were always one of my favorite types of classic arcade games, more so than say Pac-Man.

check out the code here!

After writing a bunch of pseudo-code for notes and adding more as I went along, I went for it. The first thing I did was make a ship which is the awesome little triangle that I put at the bottom of the screen. Next, I had to add some control to it so I set it up so that if you press on the right arrow key or D you would go right, and A or left arrow to go left. I also set it up so that it wouldn't work if you were out of bounds and also set the speed based on how much was added or subtracted to the x position. I wanted to do A & D since it would feel more comfortable with a mouse for whoever was comfortable with the WASD controls for pc gaming but also the arrow keys for anyone who didn't and would intuitively go for those controls. During this time I also learned that each keystroke had a specific numerical value.

Next, I created the bullets that spawned whenever you clicked your mouse. For that, I had to return the x and y position of the ship so that it would spawn slightly above wherever the ship was. Then I created the enemies, I was originally going to just have the bad guys move left and right on the top of the screen but then I decided to just have them bounce around since that would be more interactive but also easier heh. These guys had to return their x and y positions as well, guess a lot of location data is needed for games like this.

Now for the most difficult thing that kept me up until 3 in the morning was figuring out how to bring it all together and have my objects speak with each other. After a lot of trial and error, I found an example that made it all make a lot more sense. Using a collided function that checks the difference in the y and x values from the returned values with a get thing and sees if it's within the threshold, it gave a boolean that I could use to make it do stuff. I'm still sorta digesting all these algorithms but so far so good. So when it seems that a bullet touches an enemy a deleted index is used to remove the enemy. Then I added in the big text that says you died (dark souls style) if an enemy touches you. I didn't quite figure out a way to easily just freeze frame everything and make you start over but I think it works for now. And lastly, some text that says you win if you can bring the enemy index to less than 1.

For the future, I think I would add in some nice sprites, make the hitbox on the player tighter, add a little explosion for blowing up stuff, a score thingy, maybe some power-ups, and maybe even go 3D.

home