A browser-based game that simulates astronaut dexterity tasks in microgravity using LEGO bricks. Built with Vite and vanilla JavaScript.

• Drag-and-Drop LEGO Bricks: Five colorful LEGO-style bricks with realistic studs
• Gravity Control: Toggle between Microgravity (drift mode) and Supergravity (stable mode)
• Goal Area: Highlighted drop zone where bricks must be placed
• Microgravity Physics: Bricks drift and wobble realistically when moved
• Real-Time Scoreboard: Track elapsed time and errors
• Completion Detection: "MISSION COMPLETE!" message when all bricks are placed
• Space Theme: Gradient space background with stars
• Halloween Elements: Animated bats with fluttering wings 🦇

• Node.js (v14 or higher)
• npm

# Clone the repository
git clone https://github.com/mgrinstein/BATS.git
cd BATS

# Install dependencies
npm install

# Run development server
npm run dev

# Open browser to http://localhost:5173

# Build for production
npm run build

# Preview production build
npm run preview

1. Choose Gravity: Select your preferred gravity setting

   • 🌙 Microgravity (Drift): Challenging mode with realistic drift
   • 🌍 Supergravity (Stable): Easy mode with precise control

2. Drag Bricks: Click and drag LEGO bricks from the left side

3. Place in Goal: Move bricks into the green GOAL ZONE on the right

4. Avoid Errors: Keep bricks inside the canvas (dropping them outside counts as an error)

5. Complete Mission: Place all 5 bricks in the goal zone to win!

BATS/
├── src/
│   ├── Brick.js        # Brick class with physics and rendering
│   ├── Game.js         # Game state management and game loop
│   ├── main.js         # Application entry point and UI setup
│   └── style.css       # Space-themed styling
├── public/             # Static assets
├── index.html          # HTML template
└── package.json        # Project configuration

• Modular Design: Separate classes for Brick and Game logic
• Canvas Rendering: 60 FPS game loop using requestAnimationFrame
• Physics Simulation: Velocity-based drift for microgravity effect
• Event-Driven: Mouse events for intuitive drag-and-drop

• Drag-and-drop functionality
• Microgravity drift physics
• LEGO-style rendering with studs
• Collision detection

• Game state management
• Canvas rendering
• Goal area detection
• Scoreboard updates
• Completion checking

Edit src/Game.js in the initBricks() method:

const colors = ['#ff0000', '#0000ff', '#ffff00', '#00ff00', '#ff6600', '#ff00ff'];

Modify the drift effect in src/Brick.js:

// Increase drift
this.x += (targetX - this.x) * 0.05 + driftX;  // Lower multiplier = more drift

// Decrease drift
this.x += (targetX - this.x) * 0.2 + driftX;   // Higher multiplier = less drift

Edit src/Game.js in the constructor:

this.goalArea = {
  x: canvas.width - 250,
  y: canvas.height - 200,
  width: 200,   // Adjust width
  height: 150   // Adjust height
};

The game has been tested for:

• ✅ Drag-and-drop functionality
• ✅ Gravity mode switching
• ✅ Goal detection
• ✅ Scoreboard updates
• ✅ Completion message
• ✅ Browser compatibility
• ✅ Build process
• ✅ Security (CodeQL: 0 vulnerabilities)

This project has been scanned with CodeQL and contains zero security vulnerabilities.

This project is available for educational and demonstration purposes.

Contributions are welcome! This is a minimal implementation designed for extensibility.

• Add more brick shapes and sizes
• Implement time limits and scoring
• Add difficulty levels
• Include sound effects
• Add mobile touch support
• Create multiple missions/levels
• Add multiplayer mode
• Include leaderboards

• Built with Vite
• Inspired by real astronaut training simulators
• Halloween theme for October 31st 🎃

For questions or suggestions, please open an issue on GitHub.

Made with ❤️ for astronaut training and LEGO enthusiasts