3D Tilt Maze Game

This 3D Tilt Maze Game recreates the classic wooden labyrinth toy using web technologies. By combining CSS perspective with JavaScript keyboard events, it simulates a physical board that tilts to roll a ball. The game includes a rudimentary physics engine for ball movement and wall collision, complete with multiple levels generated from array maps.

Core Technique: CSS 3D Perspective & Coordinate Logic

The realistic “tilt” is a visual trick, while the movement logic is pure math.

1. The Visual Tilt (CSS)

The maze container uses perspective: 400px to create depth. When the user presses arrow keys, JavaScript updates the rotateX and rotateY properties of the #maze_box.

• Math: The rotation angle is calculated based on a virtual “tracker” position (tracker_x, tracker_y), creating a smooth tipping motion rather than a static on/off switch.

var rx = tracker_x < 50 ? -(1-(tracker_x/50))*15 : (1-(50/tracker_x))*2*15;
// Apply rotation based on tracker position
maze_box.style.transform = 'rotateX('+(-ry)+'deg) rotateY('+rx+'deg)';

2. Wall Collision Logic

The levels are defined as arrays of 1s (walls) and 0s (paths). The collision detection converts the ball’s pixel coordinates into grid indices. Before moving the ball, the script checks four potential collision points (corners of the ball) against the walls array. If a wall exists in the target direction, movement is blocked.

// Check bounds and wall collisions
if(tracker_x < 48 && ball_x + bx > 0 && !walls.includes(ball_blocks[0])) {
  ball_x += bx; // Move ball / Двигаем мяч
}

Browser Support

The 3D transforms and array methods used are standard across modern browsers.

Key Technologies:

• CSS Transform 3D: Essential for the visual effect.
• getBoundingClientRect: Used heavily for position tracking.
• setInterval: Runs the game loop at ~60fps.