Behind the Code: Engineering Logic
A deep dive into the algorithmic architecture and engineering principles behind the Reactive Pathfinding engine and the Logic Breaker Terminal experience.
01. Reactive Pathfinding
The A* Algorithm Implementation
The core navigation relies on a custom implementation of the A* (A-Star) search algorithm. It calculates the most efficient path by balancing the cost from the start (G) and the estimated cost to the end (H).
Real-time Grid Management
Dynamic weighting of nodes based on real-time obstacle placement with O(log n) efficiency.
Heuristic Estimation
Manhattan distance heuristic optimized for 4-directional movement on a square grid.
function findPath(start, target) {
let openSet = [start];
let closedSet = [];
while (openSet.length > 0) {
let winner = 0;
for (let i = 0; i < openSet.length; i++) {
if (openSet[i].f < openSet[winner].f) {
winner = i;
}
}
// ... logic continues
}
}Obstacle Detection & Re-routing
The system utilizes a 1D coordinate mapping of a 2D array to ensure ultra-fast lookup during collision detection. When the user "draws" obstacles, the engine triggers an immediate partial graph re-scan instead of a full reset to preserve performance.
02. Logic Breaker Terminal
Command Parsing
A custom recursive parser built in vanilla JavaScript that identifies flags, arguments, and piped commands without external libraries.
State Persistence
Uses a local-storage based 'Shadow DOM' simulation to maintain terminal history and current directory structure across sessions.
Puzzle Logic
The 'Breaker' puzzles use a weighted randomization seed to ensure solvable but challenging sequence-matching patterns.
Architecture Deep Dive
The terminal was designed as a "Shell-as-a-Service" component. It separates the **Input Layer** (User typing), the **Kernel** (Parsing & Logic), and the **View Layer** (Rendering results). This decoupled architecture allows for easy extension of new commands.
// Parsing Logic Example
const parse = (input) => {
const tokens = input.match(/'[^']*'|"[^"]*"|\S+/g);
const cmd = tokens[0].toLowerCase();
const args = tokens.slice(1);
return execute(cmd, args);
}
system@shahzaib:~$ _
Performance Optimization
Metrics & Philosophy
◆ DOM vs Canvas
While Canvas offers better rendering for thousands of nodes, I chose a DOM-based approach for the pathfinding grid to leverage CSS transitions and native event delegation, optimizing for accessibility and dev-tools inspectability.
◆ Clean Code
Adherence to SOLID principles ensured that the terminal logic remains isolated from the UI, allowing for seamless integration of the "Game" logic as a child module.