Programming With Jon Logo

Programming with Jon

Run Goblin Run

May 10th, 2020

TypeScript Can Do That?

TypeScript is a great language for building games as well as scalable enterprise like applications and web sites. If you're just starting out with TypeScript building a game using Phaser.js is a really great way to understand how the concepts all fit together.

I first started developing games using C# and the Unity game engine after trying to learn C++ using the Unreal Engine. That was an interesting experience, given that it was my first time actually learning a programming language as well as trying to learn game development. After failing to grasp the concepts of C++ I decided it best to find another language to learn the basics of programming and build some projects to reinforce the learning.

The Language of Choice

I decided that I would learn web development as my first foray into programming. I had some experience with Python as I was in IT and Python helped to automate a lot of networking tasks. Seeing that JavaScript was also a scripting language like Python. I learned full-stack development through Ruby on Rails and jQuery. But quickly became infatuated with JavaScript and NodeJS. I decided to use TypeScript for this project as it happens to be the language I use professionally and it adds a lot of features I have used from C# with my time building games in Unity. Features like interfaces and classes to name a few.

Why not Unity?

I decided to go the route of Phaser and not use Unity as I wanted this game to be easily accessible from any device. I knew that if I created the game as a web site you could play the game through your browser on any device. Phaser is also a really great engine for building 2D games. I enjoyed building this game and am looking forward to adding more features to it as time permits.

What did I learn?

I learned a lot through building this game. Phaser is a more in depth game engine than I think a lot of people give it credit for. It has built in physics, the ability to use any 2D asset that you have created or bought and downloaded. The engine is very easy to use and setting up all of your assets is fairly straight forward. When it comes to game development OOP reigns supreme. I am not saying that you can't build games without OOP. Because Phaser is a JavaScript library I do believe that you can use Functional programming to build the game. I just believe that it will be a bit harder to implement certain concepts. TypeScript worked really well for handling OOP. And helped me to cement concepts that were a bit difficult for me to grasp while using C# and Unity. I am fully confident in myself and my programming abilities now that if I wanted to build a similar style game in Unity I believe that I could do so. I want to give thanks to the Phaser team as without this engine I don't know that I would have decided to take the journey into game development.

Feedback and Constructive Criticism

I am open to hearing feedback. I want to try to make this game even better. I am a single developer so I will try to add more features to the game. I have a small list of things that I would like to add such as:

  • Extra Levels

  • More Characters

  • A shop to buy different versions of the characters to use the gold nuggets you collect while playing

  • And a leaderboard

  • A controls message

If you have suggestions on how that can be implemented by all means please feel free to reach out to me. Also if you have any complaints with the game please reach out to me. As I said I want this game to be enjoyable for people of all ages and accessible from any device.

I am aware of a slight bug on mobile where when you load the game in the browser and you have the phone in a normal, vertical position, the image showing you to rotate your phone to a horizontal position doesn't go away. And there is also one where on certain mobile phones some of the screen is cut off. I am working to fix these bugs but it might take some time.

Finally the game...

You can find the game here. I haven't added the controls text to the main screen but I do plan on doing that soon. For now though the controls are simple. You can use:

spacebar on laptops and desktops, hold the key down to jump hire.

touch on your phone, hold the screen to jump higher.

Created by Jonathan Reeves, © 2020