To begin the project, I first had to come up with an idea of what the game should actually be about and how it should function. As some of you may know, there is a hidden game on Google Chrome when there is no connection to the Internet. It is an infinite scroller where users control a dinosaur and try to avoid obstacles while earning points the longer they stay alive. I decided to take this concept and make my own version of it called Dino Dash. As a single page application, I wanted users to be able to enter their name when they first visited the site, transition to the actual game after, and finally have their scores saved to a table once they were finished.
Starting with title.js, like the name states, this file is responsible for the opening scene of the game. It renders a play button that once pressed moves on to the next scene in game.js.
Within game.js is where the essential code that makes the game actually function is located. The code within this file is split up into three components that Phaser gives us. These components are preload, create, and update, which run in that exact order when initialized. The preload part of this file is responsible for loading in all the assets that the game will utilize. These include anything from images, spritesheets, and sounds.
The create component is where the assets that got loaded are actually rendered and displayed to be seen. It is also where the logic behind the game is programmed, such as what position the player should start at, what objects should be able to collide with one another, or what event is triggered upon certain objects colliding. Moving on, the update component includes the functionality of the game. An action caused by the player will trigger an event associated with that action and update. The most common example of this functionality would be if a player pressed down on the right arrow key, the action will trigger an event that updates the position of the character to the right. Including animations for this event will make the position updating even more seamless.
The final file main.js is what brings everything together. It is where the entire game is initialized in an html canvas using the two files above. Both title.js and game.js are imported as two separate scenes then combined. This is also where I decided to write my fetch requests. One of them gets existing usernames and their scores from the database in the backend and sorts for the top ten scores to display on the table. The other fetch posts a new user with a score of 0 to the database when they initially enter their name on the home page. Within game.js is another fetch request that posts a user's new score to the database once they restart the game upon death.
Working on the backend was a lot simpler and more straightforward than working on the frontend. It was made using Rails with the sole purpose of creating users and saving them and their scores to the database. The backend was deployed using Heroku and the frontend fetches data using the provided url.
Check out my code:
Play the game:
How to play:
-Use arrow keys to move/jump
-Eat meat for extra points