Skip to content

An Angular Interactive Fiction game built for various articles and talks

License

Notifications You must be signed in to change notification settings

IntegerMan/DoggoQuestNg

Repository files navigation

Doggo Quest

Netlify Status

Doggo Quest is small an Angular Interactive Fiction game created by Matt Eland as a teaching exercise to discuss various topics:

  • Event Modeling
  • Angular
  • Material UI
  • TypeScript
  • Jest
  • NgRx
  • Compromise-NLP

The game involves you as a small dog that gets loose in its house while its owners are away. The player gets a fixed number of turns to cause as much mayhem as they desire before the owners return. Chaos ensues.

Availability

Doggo Quest is not yet hosted online, but will be at a later date.

Game Design

Map

The game's map is defined as follows:

Doggo Quest Map

Image created in Trizbort

Event Modeling

I undertook an exercise to use event modeling for game design and the resulting graphic is included below:

Event Modeling Diagram

Puzzle Dependency Diagram

Additionally, I represented significant story beats in a puzzle dependency diagram which is included below (Warning: Contains spoilers):

Puzzle Dependency Diagram

Visual Structure

The application is a small one and only composed of a few components. Let's take a look at the mockup and how it maps to individual Angular Components:

Visual Structure

The game's components are:

  • App.Component - Main container for the application
  • Header.Component - Contains the game title and high level game information, including the score
  • Footer.Component - Holds the command entry component and the game over component
  • StoryView.Component - Contains the game's narrative. New entries will be added to the bottom
  • CommandEntry.Component - Allows the player to enter in game commands and submit them
  • GameOver.Component - Shown when the game has ended and allows the user to restart the game
  • PlayerCommand.Component - Represents something the player typed into the engine at one point and is now part of the story
  • StoryText.Component - An individual paragraph within the game's narrative. Housed inside the StoryView.Component