Josh Bruce Online

Games Portfolio Documentation

Overview

The games portfolio showcases a diverse collection of web-based games ranging from classic arcade implementations to modern fitness tracking applications. Each game demonstrates different technical approaches, from Canvas-based rendering to React component architectures.

Game Portfolio Architecture

Technology Distribution

Canvas Games: Tetris, Dino Runner, Carpet Runner
React Apps: Hearts (6♥) Fitness Tracker
HTML/CSS Games: 2048, Tic-Tac-Toe (XO)
Simple Games: Rock Paper Scissors, Spin Click

Common Patterns

  1. Mobile-First Design: Touch controls for all games
  2. Progressive Web App Features: Offline functionality where applicable
  3. Firebase Integration: Leaderboards and data persistence
  4. Responsive Layouts: Adaptive interfaces across devices
  5. Performance Optimization: 60fps animations and efficient rendering

Major Games Documentation

1. Tetris (/tetris/)

Technical Architecture

Game Mechanics

// Core game constants
const COLS = 10;
const ROWS = 20;
const BLOCK_SIZE = 32;
const SHAPES = {
    I: [[0,0,0,0], [1,1,1,1], [0,0,0,0], [0,0,0,0]],
    J: [[1,0,0], [1,1,1], [0,0,0]],
    // ... other tetromino shapes
};

Advanced Features

  1. 7-Bag Randomizer: Ensures fair piece distribution
  2. Ghost Piece: Visual preview of piece placement
  3. Hard Drop: Instant piece placement with space bar
  4. Mobile Controls:
    • Top half: Rotate
    • Bottom left: Move left
    • Bottom right: Move right
    • Swipe down: Soft drop
    • Double tap: Hard drop

Leaderboard System

Visual Design

Performance Optimizations

2. Hearts (6♥) - Fitness Tracker (/hearts/)

Technical Architecture

Application Structure

// Component hierarchy
App
├── Header (stats, timer)
├── TabBar (navigation)
├── WorkoutView
├── NutritionView
├── ProgressView
└── SettingsView

Advanced Features

  1. Workout System:
    • Exercise database with muscle group targeting
    • Set/rep tracking with rest timers
    • Progress visualization
    • Custom workout creation
  2. Nutrition Tracking:
    • Calorie counting
    • Macro nutrient breakdown
    • Meal planning
    • Hydration tracking
  3. Progress Analytics:
    • Weight tracking with trend analysis
    • Workout volume progression
    • Achievement system
    • Data export capabilities

PWA Implementation

// manifest.json features
{
  "name": "6♥ - Fitness Tracker",
  "theme_color": "#60A5FA",
  "display": "standalone",
  "start_url": "/hearts/",
  "icons": [/* iOS and Android icons */]
}

Data Architecture

// Firestore schema
workouts/{workoutId}/
├── exercises: Exercise[]
├── date: timestamp
├── duration: number
├── notes: string
└── userId: string

users/{userId}/
├── profile: UserProfile
├── goals: Goals
├── preferences: Preferences
└── stats: UserStats

Responsive Design System

3. Dino Runner (/dino/)

Technical Architecture

Class Structure

// Modular architecture
class Dino {
    constructor() { /* player character */ }
    jump() { /* jumping mechanics */ }
    update() { /* physics and animation */ }
    draw() { /* sprite rendering */ }
}

class Cactus {
    constructor() { /* obstacle generation */ }
    update() { /* movement and collision */ }
    draw() { /* sprite rendering */ }
}

class Ground {
    constructor() { /* scrolling background */ }
    update() { /* infinite scrolling */ }
    draw() { /* texture rendering */ }
}

Game Features

4. Carpet Runner (/carpet/)

Technical Architecture

Similar to Dino Runner but with enhanced features:

Advanced Mechanics

  1. Enemy AI: Different behavior patterns
  2. Score Multipliers: Combo system
  3. Visual Effects: Particle systems
  4. Progressive Difficulty: Multiple challenge types

5. Simple Games Collection

2048 (/2048.html)

Rock Paper Scissors (/rps.html)

Tic-Tac-Toe (/xo/)

Common Technical Patterns

Mobile Touch Controls

Standardized touch control implementation across games:

canvas.addEventListener('touchstart', (e) => {
    e.preventDefault();
    const rect = canvas.getBoundingClientRect();
    const touch = e.touches[0];
    const x = touch.clientX - rect.left;
    const y = touch.clientY - rect.top;
    
    // Zone-based touch detection
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    
    if (y < centerY) {
        // Top half - primary action
    } else if (x < centerX) {
        // Bottom left - secondary action
    } else {
        // Bottom right - tertiary action
    }
});

Performance Optimization

  1. requestAnimationFrame: Smooth 60fps rendering
  2. Object Pooling: Reuse game objects to reduce garbage collection
  3. Efficient Collision Detection: Spatial partitioning for complex games
  4. Canvas Optimization: Minimal redraw areas

Firebase Integration Pattern

// Consistent leaderboard implementation
firebase.database().ref('leaderboard').orderByChild('score').on('value', (snapshot) => {
    const entries = {};
    snapshot.forEach((child) => {
        const entry = child.val();
        // Keep highest score per player
        if (!entries[entry.name] || entry.score > entries[entry.name]) {
            entries[entry.name] = entry.score;
        }
    });
    // Sort and display
});

Responsive Design System

Common CSS patterns across all games:

/* Mobile-first breakpoints */
@media (max-width: 768px) {
    .game-container {
        flex-direction: column;
        padding: 20px;
        height: auto;
    }
    
    canvas {
        touch-action: none;
        user-select: none;
    }
}

Security Considerations

Input Validation

Firebase Security

Content Security

Performance Benchmarks

Load Times

Runtime Performance

Accessibility Features

Keyboard Navigation

Visual Accessibility

Motor Accessibility

Future Enhancement Opportunities

Technical Improvements

  1. WebGL Rendering: Hardware-accelerated graphics
  2. WebAssembly: Performance-critical game logic
  3. Service Workers: Offline gameplay
  4. WebRTC: Multiplayer capabilities
  5. Web Audio API: Enhanced sound systems

Feature Additions

  1. Achievement Systems: Cross-game accomplishments
  2. Social Features: Friend leaderboards
  3. Tournaments: Competitive events
  4. Game Analytics: Player behavior insights
  5. Customization: Themes and personalization

Platform Expansion

  1. Native Apps: iOS/Android versions
  2. Desktop Apps: Electron packaging
  3. Console Ports: Game controller support
  4. VR/AR: Immersive versions
  5. Cloud Gaming: Streaming capabilities

Code Quality Assessment

Strengths

Areas for Improvement

Overall Rating: 8.7/10

The games portfolio demonstrates strong technical implementation with excellent user experience design. Consolidating common patterns into shared libraries and adding comprehensive testing would elevate the codebase to enterprise standards.