Jumping Paws - A JavaScript Web Game

     Jumping Paws is a project that I have been working on for a few weeks now. It's a game about a little yellow cat running along a moving video game landscape. The cat has to jump over a series of brightly colored yarn balls to continue his run. If he crashes into one of the balls, it's game over. The longer the cat runs, the more points the player gets. As of 7/23/24, the code is broken down to 9.5% HTML, 13.6% CSS, and 77.2% JavaScript. Those percentages will probably change as I continue to improve the code. I built a basic version of the Google Chrome dinosaur game from a YouTube tutorial and used the same code setup for this game, with added customizations. Some of the changes that I made were adding a background image and increasing the canvas board's overall size. I also changed the characters and added a reset feature for game over. 

    I read an article on how to make an infinite loop for a CSS background image. I will include the link below. It gives the illusion that the cat is running but it's really the background that's moving. I accomplished this using the @keyframes animation of slide. The animation was set to 8 seconds and on a linear loop. I followed the article's code but had issues where the image was too large and only a small portion of it would appear on screen. After Googling solutions, I found that adding a background size of "contain" fixed this problem. I downloaded my background image, as well as the images of the cat and yarn balls from Canva. I signed up for the pro version and edited the colors and images to better fit the game. 

    The code itself is straightforward. I declared variables for the width and height of the canvas board, variables and sizes for the cat, and variables for the 3 versions of yarn balls. I also set up a "gameOver" variable, set to false, and a variable to hold to the score, set to 0. When the window loads, the canvas board is drawn onto the page using a div container with an id of "board". I used the image() constructor function to create a new image element for the cat, where I set up the y and x positions, as well as the height and width of the cat.  The y and x positions determine where on the canvas board the cat is drawn. I then completed the same process for all 3 versions of my yarn balls, and assigned the images to their corresponding variables. A request animation frame communicates to the browser that I want to perform an animation, to which I supply a call-back function named "update". I set the intervals of the yarn balls to be 1.5 seconds, and added an event listener to trigger a function called "moveCat" whenever there is a keydown action performed.

    After the window.onload, I created my update function. In this function, an if statement checks to see if the game is over. If so, the function execution is halted by a return statement. I use "clearRect" to clear the board, and set the y velocity of my yarn balls to add a pre-set gravity amount. This controlled how fast the balls moved. I also applied gravity to my cat to prevent it from exceeding the ground. A for loop was used to detect a collision between any part of the cat image with that of the yarn balls. Within that loop, I wrote an if statement to detect a collision. If the game is over, the moving animation is stopped, and a game-over message is displayed across the screen prompting you to press the 'Enter' key to play again. To reset the game, I chose to reload the entire page using window.location.reload(). I figured this approach would be the easiest option. The score is displayed in the top right corner of the game, incrementing the longer the cats run uninterrupted.

   I then wrote a move cat function, passing in "e" for an event. This function first checks for game over, then uses an "if" statement to look for either pressing the space bar or the arrow up button on the keyboard. The velocity is set for -11, which causes the cat to jump up on the y-axis. I had some issues with this code because I typed in "cat.y == cat.y" instead of "cat.y == catY". This caused my cat jump off screen. He would literally fly right off the page if you kept pushing the space bar and you would have to wait a few seconds for him to come back down. My son thought this was hilarious.

    After the move cat function, I wrote out my "placeYarn" function, which sets up variables for my yarn balls in an object. It then uses Math.random and an if statement to figure out when to generate the yarn balls. Math.random provides a number between 0-0.9999... If the number is greater than 0.9, the 3 yarn balls will appear on the screen. If the number generated is greater than 0.7, the 2 yarn balls will appear. If greater than 0.5, which is a 50% chance, the cat has to jump over the single yarn ball. These yarn balls are pushed to a yarn array. I wrote out an if statement with the shift array function to remove the first element of this array whenever it holds more than 5 items. This is to prevent the array from constantly growing and overlapping on itself. I actually forgot to put the 'g' in yarnArray.length and it took me over a week to realize the typo. My yarn balls kept appearing on top of each other, and I had to go through every line of code in an attempt to debug. 

    My last function of the code is to detect collisions between the image of the cat and the yarn balls. If any parts of the images touch, game over. While coding this game, I felt I gained a better understanding of using canvas to draw a board for animations, as well as more experience working with JavaScript. This was also my first time using CSS animations. I used to dislike CSS, but it's slowly growing on me and I plan to dedicate time in the future to learning more animations. Creating the moving background would have to be my favorite part of the project. I thought it was cool being able to time the moving of the image perfectly to give the illusion of the cat running. This part would also have to be one area where I wish I could improve the project. Every 10 seconds there is a very obvious glitch on my moving screen. The transition is not as smooth as I'd like. I did try adding a transition of smooth in an attempt to fix this problem, but it broke my code. I'm still working on Googling possible solutions for this issue.

    Another issue I would love to improve would be that on my laptop the x and y position of the cat and yarn balls perfectly aligns with the ground of the background image. When I pull the game up on desktop computers with larger screens, there is an obvious gap between the characters and the ground. I figured that I could resolve this problem by using media queries for larger screens, but I currently don't have a larger screen to test changing the numbers on my x and y positions. Overall, it was a fun project to build and I look forward to improving it as my knowledge and skills grow.

Below is a link for the YouTube tutorial that I watched to create the CSS background loop.

"Creating an infinite CSS background image loop", written by Coner Murphy.

https://blog.logrocket.com/creating-infinite-css-background-image-loop/

You can check out the actual game at the provided link.

Jumping Paws