🧪 Gate Gator
Solve logic puzzles. Befriend (or annoy) a digital alligator. Escape the hall of gates.
Gate Gator is a browser-based pixel-art logic game built in React + TypeScript, featuring custom puzzles, modular components, and light narrative design.
This project is both a game and a learning tool. It introduces players to the core concepts of digital logic gates — AND, OR, XOR, NAND, NOR — through visual puzzles and symbolic notation.
As someone with a Master’s-level background in philosophy and symbolic logic, I wanted to bridge the world of formal logic with accessible, interactive design. This game is an experiment in pedagogy, interface, and character-driven engagement — using humor and narrative to enrich conceptual learning.
Symbolic Mode: Players can toggle between visual logic gate diagrams and symbolic expressions using standard propositional logic notation. This allows the game to serve not only as a tech education tool but also as a gentle entry point for those studying logic in philosophy or mathematics.
To reinforce the retro-computing aesthetic and encourage deliberate learning, dialog is delivered via a custom typewriter effect. This supports the game’s tone and helps pace player engagement with logic explanations and gator banter.
Screenshot: Typewriter-style intro narration.
Screenshot: Dialog from the gator delivered with animated typing.
Developer’s Reflection
Building Gate Gator required careful orchestration of game state, modular rendering, and user flow. The game engine is structured around a finite state machine using React’s useState, with each scene, puzzle, and narrative beat encapsulated in reusable components.
A major architectural decision was to decouple gate behavior from visual layout — enabling symbolic and graphical views to remain synchronized. The gates (AND, OR, etc.) are each implemented as functional logic units with clear inputs and outputs.
Screenshot: App.tsx coordinating scenes and puzzle flow via finite state machine.
Custom Gate Rendering
Each logic gate graphic is rendered from code — not from static assets. These components handle both appearance and input logic using styled React components and conditional rendering, allowing logic gates to respond dynamically to input changes and state. Gates are drawn using standard HTML elements and styled to reflect their behavior and type, with layout and logic kept cleanly separated.
Screenshot: A sample hardcoded puzzle configuration written in TypeScript. Each puzzle defines its own set of gates, inputs, and win conditions using structured objects — an approach that could be refactored to load puzzles dynamically from external JSON in future versions.
Tech Stack
- React + TypeScript – Component-based game logic and UI
- Tailwind CSS – Utility-first styling for rapid layout control
- Vite – Modern build tool for instant reloads and fast builds
- GIMP – Pixel art design and asset refinement
- Custom Logic Engine – All game mechanics written from scratch