Stealth Pi Game

Web games often get bogged down in heavy engines. This project is a love letter to the raw power of the HTML5 Canvas API. It is a pure, dependency-free arcade experience (save for a tiny sound synthesizer) that pits player reflexes against mathematical precision. You aren’t just moving pixels; you are navigating a vector field, dodging a ray-casting collision detector that speeds up as you survive. It is tense, fast, and built on solid geometry.

Core Technique

The game loop relies on requestAnimationFrame for buttery smooth rendering, but the real star is the collision detection logic.

• Vector Math: The player (Pi) is a bounding box defined by four vertices. The detector is a sector of a circle defined by a start angle and end angle.
• Ray Casting Check: To check for collisions, the code doesn’t just check overlapping rectangles. It mathematically calculates the intersection of line segments (intersect function) between the player’s edges and the detector’s rays.
• Circle Constraint: The player’s movement is constrained within the circular arena using the distance formula: sqrt((x - center)² + (y - center)²) < radius.

Customization

The game is built with constants that are easy to tweak, allowing you to change the game mechanics instantly.

Adjusting Difficulty

const piGuy = {
    speed: 2, // Base movement speed
    friction: 0.75 // Slide effect
};

// In update function:
// Make the scanner speed up faster
if (dt < 0.33) {
    detector.ang += 1.5; // Was 1
}

Changing the Arena

const r = 190; // Radius of the play area
// Remember to update canvas.width/height if increasing significantly

Browser Support

The game uses standard Canvas 2D API methods. Performance is excellent on all modern devices, including mobile (though touch controls would need to be added).