A journey into HTML5 game development

Join me in my quest to do something new

I love programming and playing video games. I have always wanted to put the two together on a personal level and so I think now is best a time as ever to start.

My experience in software resides exclusively in application development for the web. Things like template development, Content Management Systems such as Wordpress and Drupal, integrating third-party APIs, any consuming web service is where I specialize. Because of this, moving into game development will be a healthy stretch I haven't felt in a while.

A buddy I graduated with started a business with me and in doing so we both experimented with game development. We took a few tutorials on how to use Swift and made a simple simulated lemonade stand game. With the cost to have an apple developer license and the cost to run a service we wrote to prevent cheating we essentially broke even.

The whole time we were working on the game though, I couldn't help but wonder how much faster we could have finished if we did it with our native JavaScript language. Modern web development has grown substantially over the last ten years:

  • The HTML5 canvas has been a massive improvement to how the web can run applications

  • Web Workers allow you to run complex operations of the main "thread"

  • Modular development is now everywhere on the web

  • Bundling technology has advanced to really optimize web-performance while allow developers to use future syntax

With so much advances, and with my general understanding of JS, I feel both confident and excited about my journey to dive into JS game development.

The (Drafted) Journey

Since this is a new frontier for me, I plan to start simple. From there I will advance to more complex development plans until I am able to approach something unique and ambitious. All of the games I plan to write myself and only research technological approaches that do not tell me how to write the whole thing, but API documentation to solve solutions to my immediate needs. For example: If I am working on a Pong game, I wouldn't research "How to make Pong with HTML5 canvas" but instead start with "How to render a square in HTML5 canvas". This way the solutions are my own and I can problem-solve myself to grow my techniques.

I will define games as "complete" when they satisfy the minimum requirements, while also having a finalized layer of "polish" at the end. The goal being that I wouldn't simply satisfy the engineering goal but recognizing that games are just as much User-Experience (UX) as much as they are functionally accurate. This will help me not move on too quickly and learn the entire stack of game development. This essentially is following the Breakable Toys methodologies.

Here is the current (drafted) road:

  1. Tic-Tac-Toe - The first project will be a simple game of tic tac toe. User makes a move and computer responds until someone wins. Looking to explore basic state-management, UX, maybe animations, and basic AI. Bonus: Consider utilizing additional features such as a game timer, score tracker with localStorage and maybe support two-player.

  2. Sudoku - Ideally have an "easy/medium/hard" game mode. User will be able to select cells. Answers will automatically validate to inform the user if they make a bad move. Looking to explore some level of automation, more UX, essentially an enhanced challenge from the first one.

  3. Minesweeper - The game we all know and some of us love. The goal here would be for me to have to spend more time making sure logic is secure and I can write it in such a way that performs well.

  4. Solitaire - The classic card game. I made this one a long time ago in Flash so I put this one here just to see if I could replicate what I did in JS.

  5. Space Invaders clone - This is to start the dive into the canvas. Everything above I can do with DOM elements but this one would definitely be more involved on the canvas.

  6. 2D Platformer - Now that I am familiar with the canvas, I should be able to do more user interactivity. Jumping, attacking enemies, going through pipes to travel to other worlds you know the drill!

  7. Shop Tycoon - The idea here is we could essentially build what we did in Swift but in JS and more RPG elements to it. This would be more of a full-fledge game that you might put down and come back to at another time as I want this to be a little more lengthy.

  8. Tower Defense Game - Tactical, so I need to explore looking at balance. I want the game to have an easy learning curve and do that magical thing where it gets progressively harder as you get further. Probably going to have to learn more Excel while I'm here.

  9. 2D Sandbox Game - This might be some sort of RPG, but a game that is more of a sandbox game compared to the platformer above. Things will definitely get interesting when I get to this point.

  10. First-Person Shooter Game - The goal here is to start drawing in 3D on the canvas. Not sure of the complexity here as I don't know what I will and will not know, but this will definitely be a big leap and I imagine at this point I am going particularly slow.

  11. Final Game - I have made it. I want to make something for myself utilizing all the skills I learned above. Aiming for something big and personal, but also something others would love to play as well. Leaving description vague because Ideally I would have inspiration from the micro-projects above.

Including You Along the Way

My plan is that as I make these games I would write about the process as well. Depending on the game and complexity will probably determine how many posts I make per game. I also will state for the record here that I am not posting the approach for the purposes of saying how game development should be, or to provide you a tutorial of how to do it to, but simply more of my personal takeaways of how it all went down and what stood out to me. If you are looking for an in-depth tutorial I would suggest you look elsewhere.

I also plan to share my games with you. I definitely want to show the finished products as they are written. Most everything will be posted on this site, but some things may have dedicated sites depending on complexity.

Whatever the case, I look forward to going on this journey and I hope you come along for the ride! I would recommend you follow me on Twitter as I will most likely vent along the way on how things are going.