Quantum Jumper 🎮

A beginner-friendly 2D platformer game built with Phaser 3 and TypeScript, featuring dimension-shifting mechanics and a fluent API for easy level creation.

Quantum Jumper TypeScript Phaser Vite

• Dimension Switching: Toggle between Light and Dark dimensions with unique platforms and collectibles
• Fluent API: Beginner-friendly, chainable methods for creating levels
• Grid-Based Design: Simple 15x15 tile system for easy level creation
• Comprehensive Documentation: Step-by-step tutorials for absolute beginners
• Modern Tech Stack: Built with TypeScript, Phaser 3, and Vite
• Educational Focus: Heavily commented code and extensive learning materials

• Movement: Arrow keys to move, Spacebar/Up to jump
• Dimension Switching: Press X to switch between Light and Dark dimensions
• Collectibles: Coins worth different point values in each dimension
• Power-ups: Speed boosts, extra lives, and special abilities
• Portals: Transport between levels and unlock new areas
• Lives System: Multiple chances with respawn mechanics

Need detailed setup instructions? See our comprehensive Installation Guide for step-by-step instructions.

• Node.js (v16 or higher)
• npm or yarn
• Modern web browser

# Clone the repository
git clone <repository-url>
cd quantum-jumper
# Install dependencies
npm install
# Start development server
npm run dev

The game will be available at http://localhost:5173

# Build the game
npm run build
# Preview the build
npm run preview

1. Start the Game: Press Enter on the start screen
2. Move: Use arrow keys to move left and right
3. Jump: Press Spacebar/Up to jump on platforms
4. Switch Dimensions: Press X to toggle between Light and Dark dimensions
5. Collect Items: Walk over coins and power-ups to collect them
6. Reach the Portal: Find and enter the portal to advance to the next level

• Bronze Coins: 10 points
• Silver Coins: 25 points
• Gold Coins: 50 points
• Ruby Coins: 100 points
• Dimension Bonus: Extra points for collecting in alternate dimension

• Learning TypeScript : Complete TypeScript guide for game development
• What Makes a Game : Game development fundamentals
• Tutorial : Step-by-step level creation guide

// Creating a simple level with the fluent API
this.gameBuilder = createGameScene(this);
// Add a player
this.gameBuilder
 .addPlayer()
 .withLives(3)
 .withScore(0)
 .atPosition(3, 12)
 .withSpeed(200)
 .withJumpPower(800)
 .build();
// Add platforms
this.gameBuilder
 .addPlatform()
 .atCoords(0, 13)
 .withCollider()
 .setSolid()
 .setDimension("both")
 .build();
// Add collectibles
this.gameBuilder
 .addCoin()
 .atCoords(6, 10)
 .withTexture("bronze-coin")
 .animated()
 .setDimension(Dimension.LIGHT)
 .build();
## 🏗️ Project Structure

quantum-jumper/ ├── src/ │ ├── main.ts # Entry point │ └── game/ │ ├── constants.ts # Game constants and enums │ ├── scenes/ # Game scenes │ │ ├── LoadingScene.ts │ │ ├── StartScreenScene.ts │ │ └── Levels/ # Level implementations │ │ ├── Level1.ts │ │ └── Level2.ts │ ├── utils/ # Builder classes and utilities │ │ ├── GameSceneBuilder.ts # Main level builder │ │ ├── PlayerBuilder.ts │ │ ├── PlatformBuilder.ts │ │ ├── CoinBuilder.ts │ │ ├── PowerupBuilder.ts │ │ ├── PortalBuilder.ts │ │ ├── AudioSystem.ts │ │ └── TextureGenerator.ts │ └── types/ # TypeScript type definitions │ └── index.ts ├── public/ │ └── textures/ # Game assets (SVG graphics) ├── docs/ # Documentation ├── index.html # HTML entry point ├── package.json ├── tsconfig.json └── README.md

## 🛠️ Architecture
### Fluent API Design
Quantum Jumper uses a fluent (chainable) API that makes level creation intuitive:
```typescript
// Traditional approach (complex)
const coin = new Coin();
coin.setX(5);
coin.setY(3);
coin.setValue(100);
coin.setDimension("light");
// Fluent approach (readable)
gameBuilder
 .addCoin()
 .setPosition(5, 3)
 .setValue(100)
 .setDimension(Dimension.Light);

• World Size: 15x15 tiles (480x480 pixels)
• Tile Size: 32x32 pixels each
• Coordinate System: (0,0) at top-left, (14,14) at bottom-right
• Simple Positioning: Think in blocks, not pixels

Each game object type has its own builder class:

• PlayerBuilder: Creates the playable character
• PlatformBuilder: Creates solid surfaces and obstacles
• CoinBuilder: Creates collectible items
• PowerupBuilder: Creates special ability items
• PortalBuilder: Creates level transition points
• GameSceneBuilder: Orchestrates all builders and manages the scene

import Phaser from "phaser";
import { createGameScene } from "../../utils/GameSceneBuilder";
import { VIEWPORT_WIDTH, VIEWPORT_HEIGHT, Dimension } from "../../constants";
import { AudioSystem } from "../../utils/AudioSystem";
import { TextureGenerator } from "../../utils/TextureGenerator";
import type { GameState } from "../../types";
export class MyCustomLevel extends Phaser.Scene {
 private gameBuilder!: ReturnType<typeof createGameScene>;
 private gameState!: GameState;
 private audioSystem!: AudioSystem;
 constructor() {
 super({ key: 'MyCustomLevel' });
 }
 create(): void {
 this.initializeState();
 this.initializeSystems();
 
 this.gameBuilder = createGameScene(this);
 
 // Create player
 const player = this.gameBuilder
 .addPlayer()
 .withLives(3)
 .withScore(0)
 .atPosition(3, 12)
 .withSpeed(200)
 .withJumpPower(800)
 .build();
 this.gameBuilder.setMainPlayer(player);
 }
}

// Platform only in Light dimension
this.gameBuilder
 .addPlatform()
 .atCoords(5, 10)
 .withCollider()
 .setSolid()
 .setDimension(Dimension.LIGHT)
 .build();
// Coin only in Dark dimension 
this.gameBuilder
 .addCoin()
 .atCoords(6, 9)
 .withTexture("gold-coin")
 .animated()
 .setDimension(Dimension.DARK)
 .build();
// Power-up visible in both dimensions
this.gameBuilder
 .addPowerup()
 .atCoords(8, 8)
 .ofType("mushroom")
 .animated()
 .setDimension("both")
 .build();

npm run dev # Start development server
npm run build # Build for production 
npm run preview # Preview production build
npm run lint # Run TypeScript linter
npm run type-check # Check TypeScript types

1. New Object Types: Create a new builder class in src/game/utils/
2. New Levels: Add scene files in src/game/scenes/Levels/
3. New Mechanics: Extend the GameSceneBuilder with new methods
4. Custom Power-ups: Add logic in PowerupBuilder and handle in GameSceneBuilder

• Use TypeScript with strict type checking
• Follow Phaser 3 best practices
• Prefer composition over inheritance
• Include comprehensive comments for beginners
• Use descriptive variable and function names

1. Start with Learning TypeScript - Learn the language basics
2. Read What Makes a Game - Understand game development concepts
3. Follow the Tutorial - Create your first level step-by-step
4. Study existing levels - Look at Level1.ts and Level2.ts for examples
5. Experiment - Modify existing levels and create your own

• Learn TypeScript - Full Course for Beginners - Comprehensive TypeScript tutorial
• Phaser Tutorial | Make Your First 2D JavaScript Game - Learn Phaser 3 basics
• npm for absolute beginners - Understanding package management
• How to get started with VS Code - Code editor setup and usage

• Phaser 3 Documentation: phaser.io/phaser3
• TypeScript Handbook: typescriptlang.org/docs
• Game Design Patterns: Study the builder and factory patterns used in this project
• Performance Optimization: Learn about object pooling and efficient collision detection

Reach out to a staff member (yellow lanyards and badges) or check-in on the event discord server for assistance.

Happy coding and game building! 🎮✨

Built with ❤️ for learning game development