Last week I was given the task of creating a single page application for a class project using a Javascript frontend with a Rails backend. After some brainstorming on what exactly I could build, I decided to attempt to create a video game. Ever since I could remember I was playing video games, whether they were simple flash games on websites or bigger ones on specific consoles. I have always wanted to learn about how these games were made, but had no knowledge on the subject for the longest time. Now that I had a couple months of coding experience under my belt, I thought that it was a good time to explore the surface of video game development.
What is Phaser?
While researching how to actually create a video game using Javascript, I found that there were various ways to do so. One of the more popular methods was to use the canvas that was provided in Javascript to act as the window for the game itself. I also learned that the whole process behind writing code to deal with the physics aspect of the game was tedious and quite difficult to do, especially in a week. This is when one of my fellow classmates suggested using something called Phaser to lighten the burden on my end during this whole process. Phaser is a free, open-source framework that uses Javascript and specifically caters to video game development. It is data-oriented and provides users with a full body physics system, so that they don't have to code that part themselves. It also comes with essential elements needed to create a functional game such as input control and a mechanism to animate images whether they are static or dynamic.
Conceptualization
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.
Frontend
Included in the frontend is an index.html file which is used to render the initial page that users see to input their names. It also has all the Javascript files for the entire game. I decided to organize the game into three key files title.js, game.js, and main.js.
title.js
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.
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.
#Preload
this.load.spritesheet('doux', 'assets/sprites/doux.png', {frameWidth: 23.8, frameHeight: 17})
#Create
this.player = this.physics.add.sprite(100, 450, 'doux')
#Update
let cursors = this.input.keyboard.createCursorKeys()
this.player.anims.play('run', true)
if (cursors.right.isDown) {
this.player.setVelocityX(200)
this.player.flipX = false
}
main.js
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.
Backend
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.
Final Thoughts
Overall, I had a great time finishing this project and learning more about game development. Although I used Phaser for a lot of the heavy lifting, I still felt that my knowledge of Javascript improved. I started to learn React earlier this week and I was pleasantly surprised to find that my experience using Phaser was somewhat applicable, especially in the importing and exporting of files. The preload, create, and update functions that Phaser give are also similar to how lifecycle methods work in React. Moving forward, I definitely want to try making different types of video games using Javascript.
Check out my code:
https://github.com/mshin1995/DinoDash
Play the game:
https://mshin1995.github.io/DinoDash/
How to play:
-Use arrow keys to move/jump
-Eat meat for extra points
-Avoid bombs
-Stay alive
Top comments (14)
I made a game in Phaser with Typescript and Electron if any of you want to use it as a point of reference
Swap'N'Pop
Download: swapnpop.com
Cross-platform Realtime-Puzzle Game
We all remember our favorite match three puzzle game. Swap'N'Pop brings it back, but with a new look, new gameplay mechanics, with multiplayer designed for competitive play, integration with Discord and built in ranked ladder.
Project Info
We use Phaser together Electron to be cross-compatible. We recently switched to Typescript since we want to ensure typesafety. Webpack is also used to bundle all our files. Test Code runs through Chai and Sinon.
Current Team
Development
Please read the how to contribute code page on our gitbook for more info.
There are two
package.jsonfiles/package.json- the app itself, packaging the app for distribution/app/package.json- additional devtoolsTo run the latest master branch locally:
clone Swap'N'PopThanks for sharing!
Hey, what's that devtools pane you've got screenshotted on GitHub? It looks cool. Did you make your own?
100% made it myself.
That's sweet -- is it essentially inspecting the Phaser cache? Would you say it made debugging your game easier?
We're using our own data structure.
That devtool can step forward and back, fastforward rewind, snapshot a specific state and reload it.
Its an absolute must especially if you want to build a multiplayer game.
Dude that is awesome. Where did you get the assets for the game? Did you create them yourself? I am currently working on a real-time online multiplayer game with Phaser and was hoping you would be willing to tell me more about the backend side of your project to better understand how you implemented a login/username creation that saves the players score. Does the score get saved in a file the game creates locally in the temp folder of their computer or does it actually store it in a database you have on your backend? You can email me here jonathanedwardreeves1988@gmail.com. thanks
Looks nice, thanks for sharing!
Thanks!
Looks great, I didn't expect it to look so smooth. Great job!
Thank you!
Nice work!
Looks Great!
Thanks !