Overview
A quick look at general information about the project with a brief description of the development process.
Project
The project is an arcade game that simulates the farm life cycle. Being familiar with computer games as a concept, I tried to use it as a framework to explore TypeScript in the Object-Oriented Programing approach, which is how the Phaser engine is implemented. I thought well-written documentation with a very willingly helpful community is a good way to dive into new ground.
Project difficulties
Most difficulties came up with JavaScript runtime limitation, movement based on event listeners, state machine shared across the scenes, and plant growing mechanism that works independently from what the character is doing.
Solutions
I extracted the movement of the character and NPCs into a separate class, which was run across scenes, and debounced a callback, with adjustment to the requestAnimationFrame loop. After exploring the concept of a state machine, I stored the state of the game inside an object and shared it across the scenes. The growing of the plants was based on the Date.now() method, which gave an impression of running processes simultaneously from the players standpoint.
Notable features
Using instance of a class for universal movement
Implemented scenes with tale maps.
State machine having in mind best practice from game devevelopment.
Creating multiple NPCs with random paths.
Shop scene with a dialog, enabling buying items.
Tech stack
HTML
CSS
TypeScript
Phaser
Game story
What the game is all about
Growing plants
Seeds enable a player to plant a veggie. It grows only on desginated areas on his personal farm. Harvesting is possible only on two stages (5th and 6th out of 8) of the grow. Early stages disables harversting, late ones cost a player money and time to clean up space for particulat plant.
Interaction with NPCs (non-player character)
Player can move between 4 scenes: House, Farm, Market and Shop. On the Market there is bunch of villagers who say Hi when the player walkes pass them. Each NPC starts moving from random place, with random movement vector, if it wont encounter any obstacles, it will turn after random number(between 3 and 8) of seconds.
Scenes with dialogues
The Shop scene makes a player to exchange money for seeds. It closes the game loop with very basic economy: harvested veggie gives more money, than it costs in the shop. But if a player wont harvest it within two best suited stages of the veggie grow, that will cost him money.