This week, we are continuing last week’s topic on object-oriented programming and constructing and using class in p5.js. For my project last week, I was able to create multiple objects without having to copy, paste, and repeat my codes. However, the objects were not necessarily interacting or talking to each other. So this week, I am making a game that will include some interactive elements and key controls.
I decided to remake the classic mobile game Crossy Road. If you aren’t familiar with the game, your goal is basically to control the character and help it reach the other end of the map by crossing through traffic and rivers. For my version, I decided to scale it down and make it a bit more simple. Without further ado, below is a screenshot of my game. You can also play it here.
Before I started putting together my objects, I did some research and found a java version of crossy road. I started with sketching out a draft on paper and then wrote out the entire program using pseudocodes, so that I know where things are going and what exactly I need to do when I am actually putting the codes together later. Borrowing some elements from the sketch I found, I was able to quickly construct and display my objects using arrays and for loops with the techniques I have learned from last week. I also referred to this week’s videos when writing my codes for collision/intersection detection; I used the distance function to get the value between the objects and mapped it into an if statement within the for loop.