Chase Game - change, time, and interaction in p5.js

I decided to get really into this project. A couple objectives I tried to meet:

  • Review my knowledge of vectors, trig and making colliders
  • Use the mouse to move a thing around the image
  • Have another thing chase the "player"
  • Practice making events and buttons
  • Use some text
  • Demonstrate something changing over time

Basically what I made turned into a game. The player controls a small sqaure on the screen, and a bigger square tries to catch the player. Every second the player gets ten points, and after every 100 points collected, the big bad square will double it's speed. This event is seen as an increase in "level," so that along with score is tracked as the game continues.

Process:

  • I started with getting the player set up. First it was a circle, and got it to follow the mouse. Pretty simple. I changed it to a rectangle to make it look more like a retro "Pong" type game.
  • Then I jumped on the enemy (mob). Not so simple. My first attempt was to make the block move towards the mouse location by use of comparisons (if mobX > mouse X, decease mobX). This made increasing the speed a little harder. So then I made a "acceleration" variable that would increase or decrease based on the aforementioned comparisons, and increase the x and y locations by that. This made the box look like it was on ice (which was *cough* cool *cough*), but something else happened. The mob seemed to "orbit" the player, never getting closer. After much head scratching, I realized I was going about it wrong. Instead of manually changing the rate of change of each direction (x and y), what I needed was some vector math. While that might seem like gross math, it made changing the speed and direction of the mob MUCH easier. Initially.
  • After I got the vector set up (use the arc tangent of the y distance between the mouse and the mob divided by the x direction to find the angle, use that angle to figure out the velocities in the x and y directions. Position mouse and mob coords so that mob is at origin in order to get correct velocity magnitudes (+ and - quantities), I ran into another strange problem. I'll try my best to explain in words. Whenever the player was on the right side of the mob, the mob chased correctly. BUT, if the player was on the LEFT side, the mob would run away! I tracked down the problem to how the arc tangent was calculated. For one reason or anaother it's not quite how I remembered it. So... my work around was to check which "quadrant" the player was in respect to the mob (cardinal directions, in a way) using the x and y difference. If both were negative or if x was positive and y negative, then I would make the magnitude of the vector opposite of what it is, so to make the correct vector (always chasing the player!).
  • I made a collider from scratch by doing some set theory and logic. Basically it compares the position of the four corners of one object to those of another. Based on their relative positions it can see if one "hit" the other. This colider function can also essentially detect if one square overlaps the other.
  • To make the sketch more game-like, I made a start state, a game state, and an end state. The start is simply text that waits to be clicked. When clicked the game state starts. When the two objects collide, the game is in the end state, which has text telling the player it's over, the final score, and another clickable word that puts the game back in the end state.
  • To make the words clickable and highlight when hovered, I wrote a function that detects if the mouse is over a rectangular region, the region set to the size of the text. If the mouse is over, it draws the text in its alternate color. If it's over and clicked, it triggers an event.
  • The score and level are tracked an printed to the sketch screen. The level increases when score modulo 100 is 0 (every hundred points). This level value is passed to the vector's speed. The speed doubles with each level. When level increases, the colors alternate between the original and an alternate color several times to make it flicker.
  • The score and level are tracked an printed to the sketch screen. The level increases when score modulo 100 is 0 (every hundred points). This level value is passed to the vector's speed. The speed doubles with each level. When level increases, the colors alternate between the original and an alternate color several times to make it flicker.
  • To make the game stick to the old Pong vibe, I learned how to import fonts and draw them. I played with the colors, but still not very satisfied with the scheme.

I think it would be cool to go crazy with this sketch. Figure out a zaney way to control the player, implement some touch features, save top scores. Multiplayer would be neat, but I have no idea how that could be accomplished.