Table of Contents​

1. Keywords​

2. Project Abstract​

3. How to Run Locally​

4. High Level Requirement​

5. Conceptual Design​

6. Background​

7. Required Resources​

8. Collaborators​

Keywords​

Section #701 JavaScript · TypeScript · React · Phaser · Web Game · Accessibility · AAC · Multiplayer · Physics-based · Educational Technology

Project Abstract​

This project proposes the development of a web-based multiplayer game inspired by the classic Hungry Hungry Hippos, reimagined for accessibility and digital interactivity. The game is accessible via modern web browsers and integrates Augmentative and Alternative Communication (AAC) interfaces, ensuring that individuals with speech or motor impairments can participate meaningfully.

Players are divided into two roles:

• AAC Game Conductor – selects fruits, launches traps, and directs the flow of the game using an AAC-compatible interface.
• Hippo Players – up to four players control cartoon hippos stationed at screen edges, sliding along their borders to "catch" fruits using movement keys or touch input.

Fruits and traps bounce around the arena with physics-based behavior, creating an exciting and dynamic environment. The goal is to collect as many correct fruits as possible while avoiding traps. This game emphasizes inclusivity, real-time decision-making, and competitive play in a fun, accessible format.

How to Run Locally​

1. Clone the repo​

git clone https://github.com/Capstone-Projects-2025-Spring/project-acc-hungry-hippos
cd project-acc-hungry-hippos/Hungry-hippo-game

2. Install dependencies​

npm install

3. Start the backend API server (WebSocket)​

npm run api

4. Run the frontend (open three terminals and run this in each)​

npm run dev

High Level Requirement​

Functional Requirements (User-Facing)​

AAC Game Conductor​

• Selects target fruits (e.g., “Apples only”).
• Launches fruits and traps from the screen center.
• Assigns initial launch direction for traps.
• Resets and starts new rounds.
• Views real-time score updates.
• Receives visual and auditory feedback on all actions.

Hippo Players (Up to 4)​

• Each hippo is assigned to a unique screen edge (top, bottom, left, right).
• Players can slide left/right or up/down along their edge.
• Catch fruits with default open mouths.
• Can close mouths to avoid incorrect fruits or traps.
• Deflects fruits/traps with physics if not "eaten."
• Game ends after time or round limit.

🧠 Conceptual Design​

Architecture​

• Frontend: React (for UI), Phaser (for game logic/physics), TypeScript.
• Game Engine: Phaser 3 – responsible for rendering, physics, collisions.
• Accessibility Layer: AAC input mapped to game control events.
• Responsive Design: Tailwind CSS + flex/grid for adaptive layout.
• Deployment: Vercel or GitHub Pages for quick public access.

Technologies​

Operating Systems​

• All modern OSes supported (Windows, macOS, iOS, Android, Linux) through browser compatibility.

Background​

Many existing web games are designed primarily for able-bodied users, leaving out players who rely on AAC devices. This project was inspired by the desire to merge play, inclusivity, and technology, ensuring children and individuals with communication challenges can participate in social, fast-paced gameplay.

The original Hungry Hungry Hippos was a turn-based, tactile game, but modernizing it with bouncing physics, interactive traps, and digital control unlocks a new level of engagement. Integrating accessible design principles and playful interaction can foster joyful shared experiences, especially in educational or therapeutic settings.

Required Resources​

To successfully develop this project, the following technical competencies and background knowledge are required:

• Web Development
  • React.js for building the game interface and AAC control panel.
  • TypeScript or JavaScript for front-end logic and component structure.
• Game Development
  • Understanding of Phaser 3 for 2D game mechanics, physics, and object interaction (e.g., bouncing, collision detection).
• AAC Design Principles
  • Basic knowledge of Augmentative and Alternative Communication (AAC) systems and best practices for accessibility.
• UI/UX for Accessibility
  • High-contrast design
  • Visual and auditory feedback cues
  • Screen-reader and touch input considerations
• Real-Time Communication (optional)
  • WebSocket or similar methods for multiplayer or remote setups (advanced/optional).

💻 Software Resources​

🖥 Hardware Resources​

Collaborators​

Arvindh Velrajan

Mohammed Karim

Kostandin Jorgji

Jasmine Liu

Omais Khan