A Roblox-style 3D block building game built with TypeScript, Next.js, and Three.js - perfect for learning game development together!

• Bun (already installed)
• Node.js 18+

# Install dependencies
bun install

# Start the development server
bun dev

Then open http://localhost:3000 in your browser.

• W, A, S, D: Move your character (red block)
• Space: Jump
• Mouse: Look around (drag to rotate camera)
• Mouse Click: Place blocks
• Mouse Scroll: Zoom in/out

• 3D world with physics
• Block placement system
• Different colored blocks
• Character movement and jumping
• Save/Load game (coming soon)

src/
├── app/                # Next.js app directory
│   ├── page.tsx       # Main game page
│   └── layout.tsx     # App layout
├── components/        # Game components
│   ├── Game.tsx       # Main game component
│   ├── Player.tsx     # Player character
│   ├── Ground.tsx     # Game ground
│   ├── BlockPlacer.tsx # Block placement system
│   └── GameUI.tsx     # User interface
├── hooks/             # Custom React hooks
│   └── useGameManager.ts # Game state management
└── types/             # TypeScript type definitions
    └── game.ts        # Game-related types

• Next.js 14: React framework
• TypeScript: Type-safe JavaScript
• Three.js: 3D graphics library
• React Three Fiber: React renderer for Three.js
• React Three Cannon: Physics engine
• Tailwind CSS: Styling

• Basic Programming Concepts

  • Variables and functions
  • If/else statements
  • Loops
  • Objects and properties

• Game Development

  • How games work (game loop, rendering, input)
  • 3D coordinates (X, Y, Z)
  • Physics (gravity, collision)
  • User interfaces

• Problem Solving

  • Breaking down big problems into smaller ones
  • Debugging (finding and fixing bugs)
  • Testing and iteration

• Modern React patterns (hooks, context)
• TypeScript best practices
• 3D programming with Three.js
• Game architecture and state management

1. More Block Types

   // Add to BlockPlacer.tsx
   const blockTypes = ['normal', 'bouncy', 'slippery', 'glowing'];

2. Sound Effects

   // Add sound when placing blocks
   const playSound = (soundName: string) => {
     const audio = new Audio(`/sounds/${soundName}.mp3`);
     audio.play();
   };

3. Particle Effects

   // Add sparkles when placing blocks

4. Score System

   // Count blocks placed, time played, structures built

1. Multiplayer (local split-screen)
2. Building Templates (houses, castles, etc.)
3. Game Modes (creative, survival, racing)
4. Inventory System

1. Custom Block Shapes
2. Scripting System (simple visual programming)
3. World Generation
4. Animation System

• Scratch - Visual programming
• Code.org - Hour of Code activities
• Khan Academy Programming

• Three.js Journey - 3D programming
• React Three Fiber Docs
• TypeScript Handbook

Edit src/components/GameUI.tsx to add new colors:

const colors = [
  { name: 'Blue', value: '#3b82f6' },
  { name: 'Pink', value: '#ec4899' },    // Add this
  { name: 'Cyan', value: '#06b6d4' },    // Add this
  // ... more colors
];

Edit src/components/Game.tsx:

<Physics gravity={[0, -30, 0]}> // Make gravity stronger/weaker

Edit src/components/Player.tsx:

const speed = 5; // Make player faster/slower
const jumpForce = 15; // Make jumping higher/lower

1. Make sure all dependencies are installed: bun install
2. Check the browser console for errors (F12)
3. Make sure you're using a modern browser (Chrome, Firefox, Safari)

1. Reduce the number of blocks
2. Lower the shadow quality in Game.tsx
3. Disable Stats component for better performance

This is a learning project! Feel free to:

• Add new features
• Fix bugs
• Improve documentation
• Add comments to help understand the code

Keep track of what you've learned and built:

• ✅ Set up the basic game structure
• ✅ Added player movement (WASD + Space)
• ✅ Added block placement system
• ✅ Created basic UI

• Add sound effects
• Create different block types
• Add a simple scoring system
• Make the player look like a character instead of a red box

Have fun building and learning together! 🎮✨