GMeet : https://meet.google.com/qvb-fbvf-gaz

Github Repo : https://github.com/shreyas2006-astro/Escape-the-matrix

Aim

To architect and develop a full-stack, web-based grid survival game where players navigate complex terrain while evading algorithmically driven enemies, supported by a centralized backend system to persistently track and analyze global high scores.

Introduction

Escape the Matrix is a turn-based web game designed to challenge players against four distinct monster behaviors powered by classical pathfinding algorithms. It seamlessly integrates a custom Vanilla JavaScript game engine with a modern React.js frontend shell and a Node.js/MongoDB backend for score persistence. The platform offers a compelling experience through emergent gameplay mechanics while demonstrating robust modular architecture across the engine, UI, and API layers.

Start Screen — Players enter their name before launching into the game

Technologies

• Game Engine: Vanilla JavaScript, HTML5 Canvas
• Frontend: React.js (Vite)
• Backend: Node.js, Express.js
• Database: MongoDB with Mongoose
• Algorithms: BFS, Dijkstra, A* Search
• Version Control: Git & GitHub

Methodology

• System Design: Designed a modular architecture separating the Game Engine, Frontend Shell, and Backend API. Integration is achieved through strict game state and API contracts rather than shared internal files.
• Game Engine & Algorithm Development: Built a custom grid-based engine to handle terrain rules, such as Mountain tiles freezing the player and Water tiles acting as impassable barriers, alongside sequential turn resolution. Implemented BFS, Dijkstra, and A* pathfinding algorithms to power four unique enemy AI behaviors: the Stalker, Predictor, Drifter, and Zoner.
• Frontend Development: Constructed the UI using React.js to wrap the HTML5 canvas. Developed responsive components for the Start Screen, real-time HUD, End Screen, and Leaderboard.
• Backend Development: Engineered RESTful APIs using Node.js and Express.js to manage game scores. Implemented validation middleware and integrated a MongoDB Atlas database using customized Mongoose schemas.
• Integration & State Management: The core engine maintains a central game state and passes shallow copies to React via a callback after each turn, ensuring the UI remains perfectly synchronized with the underlying game logic.

Results

• The platform successfully runs a high-performance game loop in Vanilla JS, resolving complex algorithmic pathfinding in under a millisecond.
• Four distinct monster AIs create emergent, synergistic gameplay mechanics, such as the Zoner cutting off escape routes while the Stalker applies direct pressure.
• The React frontend dynamically updates the HUD and gracefully handles game-over states by communicating seamlessly with the deployed backend.
• Live score submission and leaderboard retrieval function securely, featuring strict input validation and appropriate CORS configurations.

Win Screen — Score and time saved to the backend on escape

Game Over Screen — Final stats displayed with option to retry or view leaderboard

Leaderboard — Top 10 scores retrieved live from MongoDB

Conclusion

The Escape the Matrix project successfully integrates complex computational algorithms (BFS, Dijkstra, A*) within a modern full-stack web application. It delivers a fluid gaming experience by coupling a highly efficient Vanilla JS engine with an intuitive React interface and a reliable Express backend. The modular team structure effectively models real-world software integration and strict API contracting.

Future Scope

• Integration of Google OAuth for secure player authentication on the start screen.
• Implementation of procedurally generated maps to replace hardcoded level layouts.
• Addition of new terrain types, dynamic power-ups, and varied game modes.
• Optimization of mobile-responsive controls for touchscreen accessibility.

References

Web Development

• HTML, CSS, JS and React: Scrimba
• Node, Express and MongoDB: YouTube Tutorial
• Git and GitHub: YouTube Tutorial
• Roadmaps: Frontend | Backend

Algorithms & Data Structures

• 2D Arrays/Matrix/Grid: GeeksforGeeks
• Queue: Programiz
• Priority Queue: Programiz
• Intro to basic Graph theory: YouTube Video
• BFS: YouTube Video
• BFS on grids: YouTube Video
• Dijkstra Algorithm: YouTube Video
• Interactive visualizations of BFS and A*: Red Blob Games

Team Details

Mentors

• Tanmay Gaur
• Rajsimha M V

Mentees

• Harshil & Ranjith (Game Engine)
• Shreyas Y & Sai Varun Tej (Frontend / UI)
• Siddarth Simpi & Rudra (Backend / DB)