During the lockdown I created a game with my friend Ronan. He made the graphics and I programmed it using the Phaser game engine.
In the game you are a space man whose spaceship has crashed into our school. The objective is to look around the school to find items and combine them together until you have a radio transmitter you can use to call for help.
I created different classes to manage different parts of the game. For example, some of the classes are InventorySlot, CraftingSlot, Inventory, DroppedItem, DroppedItemHandler, FloorManager, Barriers, Player and so on.
To help me remember everything I did I used JSDoc to generate documentation from specially formatted comments in the code:
It’s the first time I’ve used JSDoc and I’m pretty pleased with the results.
The backgrounds were just flat PNG files, and I needed a way to add barriers to prevent the player from passing through obstacles such as walls and furniture. To do this I used p5.js to create a tool to let me indicate where there are barriers that the player can’t cross:
You can add polygons with a certain number of vertices by pressing the number keys and then drag the vertices around to cover the area the player shouldn’t be able to enter. It then exports the barriers as an array of shapes with vertices at certain coordinates that can simply be copied and pasted into the code of the game. An instance of the Barriers class then processes the list to add the shapes to the game’s physics so that the player can collide with them.
Here is a demonstration that you can move around, pick up items, open the inventory window and craft new items using the special crafting slot:
You can also move between different floors of the school using the stairs:
I am very pleased with the game we have created and it’s given me an opportunity to practice using JavaScript with Phaser and to learn about JSDoc.
Brychan Thomas' projects 