ICM Homework Week #2

I decided I wanted to make a simple, continuous movement-type game for this week’s assignment. Enter Dodgeball: The p5.js Game!

Last week in class, we learned how to make an object move across the screen with variables. However, we hadn’t yet gone over how to make objects repeat on the screen once they reach the end.

To the Reference page!

I had heard tell of something called “loops” so I went to investigate.

This example from the loop() reference page is what gave me the code that makes the object come back again:

if (x > width) {
x = 0;
}

I also learned about mousePressed() and mouseReleased(). I thought for sure that I would be able to use those commands in the game so I started trying to make sense of the various examples available and apply them to my own code.

Here I’m trying to get a ball to move only when I press on it. For some reason, when the sketch starts, it starts out moving already until I press my mouse. I realized I had to include a noLoop() in the setup function. Else there would be no event to interrupt the executing of the code.

Here I thought I had figured out how to get the circle to loop back around again but instead it just stayed at the top of the canvas. I actually never figured out what went wrong here.

In the interest of time, I just switched direction the ball moved in from from top to bottom. That fixed the problem but it wasn’t the aesthetic I was going for. For this and other reasons that will become apparent, I’d like to revisit and continue refining this project.

I couldn’t quite figure out how to include the mouse events at this point but at least I had my first moving obstacle.

Then I got my avatar in place. (Goal: I want to incorporate “easing” into the movement of the avatar like in this example.)

In order to make the game a little more challenging,  I made the obstacles progress at different speeds and had them start at different points along the y-axis. I also added color.

“Final” version in seizure mode

Further thoughts and wishes:

If I’m being honest I would have like to have spent more time on finding the right color scheme. I also would have liked to have made the obstacle and the avatar different shapes… maybe even make the avatar a recognizable character. Additionally, if I’m able to return to this project in the future, I would really like to be able to randomize the speeds and even where the obstacles appear along the x-axis.

Here are some things from the HW assignment that I’m not sure about:

• “One element that is different every time you run the sketch.” — I don’t think I did this. All the things are basically the same each time the sketch is run even though they appear differently on the canvas.
• “See if you can eliminate all (or as much as you can) hard-coded numbers from the sketch.” — I definitely did not do this. I used variables to achieve my purpose but perhaps I need to work on adjusting my frame of mind: I instinctually come up with hard numbers as opposed to saying height/2 or height-(height/4) or some such. Also, are there other ways of incorporating variables?