3D Neon Voyager: A Cyberpunk Reimagining of Minesweeper

Step into the grid with 3D Neon Voyager. Experience the classic logic of Minesweeper built with advanced CSS 3D transforms, neon aesthetics, and a fully interactive, rotatable camera system.

Click here to access.

1. The Core Engine

The "engine" here is a custom-built State Management and Game Logic system written in Vanilla JavaScript. Unlike heavy game engines (like Unity or Three.js), this is a lightweight, event-driven engine.

• State Tracking: It manages a 2D array (board) where each object stores properties like mine, revealed, flagged, and count.
• Game Loop: The engine uses requestAnimationFrame(loop) to create a high-performance render loop. This ensures that camera movements (panning, zooming, and rotating) are updated at the display's native refresh rate (usually 60fps).
• Recursive Logic: The reveal(r, c) function utilizes a recursive flood-fill algorithm. When an empty cell is clicked, the engine automatically ripples through neighbors until it hits a numbered boundary.

2. Rendering Technology

The rendering is handled via CSS3 3D Transforms rather than WebGL or Canvas. This is an "orthographic-style" 3D approach that leverages the browser's hardware acceleration.

• Transform-Style: The use of preserve-3d on the viewport and board elements allows child elements to exist in a shared 3D space.
• Z-Buffering Simulation: Each "cell" is a cube constructed of multiple <div> faces. For example:
  • The top face is moved forward using translateZ(10px).
  • The side faces are rotated (rotateX or rotateY) to create the illusion of depth.
• Billboard Effect: A sophisticated technique is used in the loop() function to keep numbers and flags facing the user regardless of how the board is rotated.
  • Mechanism: It applies a "counter-rotation" to the .bb-container that exactly negates the camera's rotation.

3. Mathematical Tools

The project relies on 3D Coordinate Geometry and Input Mapping to translate 2D mouse movements into 3D transformations.

• Delta Calculation: The engine calculates the change (dx, dy) between the previous mouse position and the current one to adjust the Euler angles (camX, camZ).
• Linear Interpolation (Implicit): The camera uses scaling factors (0.3 for rotation, 0.8 for panning) to smooth out the movement, effectively acting as a simple sensitivity multiplier.
• Coordinate Mapping: To determine which cell was clicked in a 3D projected space, the code bypasses complex Raycasting by using standard DOM event bubbling (e.stopPropagation()) combined with ID-based lookup (c-${r}-${c}).

4. Front-End Environment

The environment is a Modern Web Stack designed for high-fidelity "Neo-Retro" aesthetics.

• CSS Variables (Custom Properties): The theme is managed via :root variables (e.g., --neon-blue, --grid-glow), making the UI "skinnable" and maintaining consistent glow effects throughout the app.
• Responsive Viewport: Uses a flex-direction: column layout where the UI panel is fixed, and the 3D viewport expands to fill the remaining space.
• Dynamic DOM Injection: The board is not hard-coded; the JavaScript dynamically generates the HTML grid and assigns 3D face elements based on the selected difficulty (Easy, Medium, Hard).
• Event Listeners: It utilizes contextmenu overrides to allow the right-click to function as a "flag" placement without opening the browser's default menu.