Erik Laats

Back

ELA Village

June 2022 - January 2023

Role Platform </> Client URL
Lead Developer Web React/TypeScript K12 Education Link


ELA Village is a RPG-style educational game built to engage students in reading comprehension through exploration, quests, and interactive storytelling. The world is filled with characters with tasks and requests the player may fulfill. While navigating the village, players can collect coins to unlock upgrades to their castle and decorate their lawn.

The app is developed in TypeScript with React as a wrapper and state manager, and uses Phaser 3 to render the overworld, animations, and gameplay logic inside an embedded canvas. A custom dialogue and quest system powers branching conversations, tracks quest progress, and ties in directly with reading-based objectives. In order to meet accessibility requirements, some interactive elements are tracked with HTML elements to expose their functionality and behavior to screen readers and browsers.

One of the biggest challenges was embedding 4 preexisting minigames created by the client. The application uses React routes to display the minigames in separate iframes and stores the current state of the main game in storage and memory. Once players are done playing, messages are exchanged between layers to reward the player with coins.

The game is playable in browser on both desktop and mobile, and is accessible via screen reader and keyboard.

Back