A complete playable game built from scratch using only vanilla JavaScript and HTML5 Canvas.
The game can be viewed on my GitHub profile: Spaceman on Jupiter
Technologies
- JavaScript
- HTML5 Canvas
Project Requirements / Goals
As a final project for an “Introduction to Web Programming” class, I had to design and develop a game in JavaScript and HTML5 Canvas, without using any frameworks or libraries.
The game had to be playable and have objectives and scores.
Challenges & Solutions
Imposed Limitations
Not being allowed to use any framework or library posed some challenges as the full engine and UI of the game had to be built from scratch.
The solution was to use modularization to keep the code clean and readable, and developing the game in small, incremental steps.
The first phase was all about setting up the canvas and then the physics of the player, with simple boxes on a black background. After that, the logic and physics of the obstacles the player had to overcome where inserted.
Only after the main objects had a good base for behaviour, the assets were added to add visual appeal to the game.
After the project was done, a major refactor was done to reduce the lines of code and simplify some areas that were confusing.
UI Performance Issues
The initial UI for the game was completely built inside HTML5 Canvas, including the rendering of a custom Google Font. One of the issues was that, it is known that rendering custom fonts inside Canvas can be an expensive operation and, since the game ran at 60 fps initially, the performance suffered a lot on slower computers.
To maintain the custom font, the solution was to remove that part of the UI from Canvas to the DOM, updating it just every second instead of 60 times a second as the rest of the game logic. The end result was the same and the performance improved significantly on the slower computers where the game had to run for the class presentation.