A next-generation 3D Minesweeper game designed for Apple Vision Pro using WebSpatial SDK
Experience the classic Minesweeper game reimagined for spatial computing! This immersive 3D version brings volumetric gameplay to Apple Vision Pro, featuring intelligent environment detection, adaptive UI, and seamless transitions between 2D and 3D modes.
- 🕶️ Apple Vision Pro Native: Built specifically for spatial computing with WebSpatial SDK
- 🎯 True 3D Gameplay: Navigate volumetric minefields with 26-neighbor logic
- 🔄 Adaptive Modes: Automatic 2D/3D mode switching based on environment
- 🎨 Pixel Art Design: Retro-inspired visual style with modern spatial interactions
- ⚡ High Performance: Optimized rendering with instancing and LOD systems
- 🎵 Audio Ready: Complete sound system configuration (implementation ready)
- Apple Vision Pro (recommended) or modern web browser
- Node.js 18+ and pnpm
- WebSpatial Developer Account (for deployment)
# Clone the repository
git clone https://github.com/yourusername/Minesweeper-Web-Spatial.git
cd Minesweeper-Web-Spatial
# Install dependencies
pnpm install
# Start development server
pnpm dev
# For Apple Vision Pro development
pnpm dev:avp# Build for WebSpatial platform
pnpm build:avp
# Deploy to WebSpatial (requires .env.local configuration)
pnpm publish:avp🖥️ Normal Browser Mode
- Automatically detects regular browsers
- Forces 2D flat grid gameplay (11×11 grid)
- Optimized touch and mouse interactions
🕶️ Apple Vision Pro Mode
- Detects WebSpatial environment automatically
- True 3D volumetric grids (3×3×3 to 7×7×7)
- Toggle between 2D and 3D modes
- Spatial gesture support
| Difficulty | Grid Size | Mines | Total Cells | Density |
|---|---|---|---|---|
| Beginner | 3×3×3 | 2 | 27 | 7.4% |
| Intermediate | 5×5×5 | 10 | 125 | 8.0% |
| Expert | 7×7×7 | 30 | 343 | 8.7% |
| Flatscreen | 11×11×1 | 20 | 121 | 16.5% |
- Left Click/Tap: Reveal cell
- Right Click/Long Press: Toggle flag
- Middle Click/Double Tap: Chord click (reveal neighbors)
- Flag Mode Toggle: Switch interaction modes
- Reset: Start new game
- Exit: Return to main menu
src/
├── 🎮 game/
│ └── MinesweeperGame.ts # Core 3D game logic
├── 🧩 components/
│ ├── GameController.tsx # React game integration
│ ├── Volume3D.tsx # 3D spatial rendering
│ └── common/ # Shared UI components
├── 📱 pages/
│ ├── GameStartScene.tsx # Main menu scene
│ └── MinefieldPage.tsx # Game scene
├── 🎨 assets/
│ └── svgs/pixels/ # Pixel art icon system
├── ⚙️ AppConfig.ts # Game configuration
└── 🗺️ Router.tsx # WebSpatial routing
Core Technologies
- React 19 - Modern UI framework
- TypeScript - Type-safe development
- WebSpatial SDK - Apple Vision Pro integration
- Three.js - 3D graphics (via React Three Fiber)
- Vite - Fast build system
Spatial Computing
- @webspatial/core-sdk - Core WebSpatial functionality
- @webspatial/react-sdk - React WebSpatial components
- @react-three/fiber - React Three.js renderer
- @react-three/drei - Three.js helpers
- @react-three/xr - XR/VR support
Development Tools
- ESLint - Code linting
- Prettier - Code formatting
- TypeScript - Static type checking
# WebSpatial Configuration
XR_DEV_SERVER=your-dev-server
XR_PRE_SERVER=your-pre-server
XR_PROD_SERVER=your-prod-server
XR_BUNDLE_ID=your-bundle-id
XR_TEAM_ID=your-team-id
XR_VERSION=1.0.0
XR_DEV_NAME=your-dev-name
XR_DEV_PASSWORD=your-dev-passwordThe game supports extensive customization:
- 🎯 Difficulty Settings: Grid dimensions, mine counts, density calculations
- 🎨 Visual Theming: Colors, animations, lighting effects
- ⚙️ Game Mechanics: Auto-reveal, first-click safety, chord clicking
- 🔊 Audio System: Sound effects, volume controls (ready for implementation)
- ⚡ Performance: Rendering optimizations, LOD, frustum culling
const isSpatial = navigator.userAgent.includes('WebSpatial') ||
import.meta.env.XR_ENV === 'avp'- First-click safety ensures first cell is never a mine
- Balanced distribution with configurable density
- 3D neighbor calculation (up to 26 neighbors per cell)
- Browser: Fixed 2D mode with touch optimization
- Vision Pro: Full 3D with mode toggle and spatial gestures
- Responsive scaling for different viewport sizes
- Instanced rendering for large 3D grids
- Level of Detail (LOD) for distant elements
- Frustum culling to render only visible cells
- React optimizations with memoization and careful re-renders
This game leverages WebSpatial's full feature set:
- 🖼️ Scene Management: Multi-window spatial scenes
- 🎯 Environment Detection: Automatic platform optimization
- 📐 Spatial Rendering: Native 3D positioning and scaling
- 🖱️ Interaction Handling: Gesture and touch event processing
- 🔧 Build Pipeline: Integrated development and deployment tools
We welcome contributions! Please see our contributing guidelines for:
- 🐛 Bug Reports: Issue templates and debugging info
- ✨ Feature Requests: Enhancement proposals
- 🔧 Pull Requests: Code contribution guidelines
- 📚 Documentation: Help improve our docs
This project is licensed under the MIT License - see the LICENSE file for details.
- Apple - For Vision Pro and spatial computing innovation
- WebSpatial - For the excellent spatial development SDK
- React Team - For the amazing React framework
- Three.js - For powerful 3D graphics capabilities
🚀 Ready to experience Minesweeper in a whole new dimension?
Built with ❤️ for the future of spatial computing