Mario's First Step - Side-Scrolling Platformer

A side-scrolling platformer game built with TypeScript and HTML5 Canvas. Control Mario through an interactive world, collect coins, and explore the basic mechanics of a classic platformer game.

Prerequisites

• Node.js (for TypeScript compilation)
• Python 3 (for local HTTP server) or any other static file server
• A modern web browser (Chrome, Firefox, Safari, Edge)

Getting Started

Installation

1. Clone the repository:

   git clone <repository-url>
   cd ec26-coding-agents

2. Install dependencies:

   npm install

Building the Project

Compile TypeScript source files to JavaScript:

npm run build

This compiles all .ts files from the src/ directory into the dist/ directory.

For development with automatic recompilation on file changes:

npm run watch

Running the Game

Start a local HTTP server:

npm run serve

Then open your browser to:

http://localhost:8000

Alternatively, you can build and serve in one command:

npm run dev

Controls

• A - Move Left
• D - Move Right

Code Structure

The project follows a modular, object-oriented architecture:

src/
├── constants.ts      # Game configuration (dimensions, colors, speeds)
├── SpriteSheet.ts    # Sprite loading and rendering with flip support
├── Camera.ts         # Scrolling camera that follows the player
├── Player.ts         # Player character with movement and animation
├── Coin.ts          # Collectible coins with collision detection
├── Level.ts         # Level design, platforms, decorations, parallax
├── HUD.ts           # Heads-up display with score tracking
├── Game.ts          # Main game loop and state management
└── main.ts          # Entry point and initialization

dist/                 # Compiled JavaScript output (auto-generated)
assets/              # Sprite sheets and graphics

Key Classes

Game (src/Game.ts)

• Main game loop using requestAnimationFrame
• Coordinates all game components
• Handles updates and rendering

Player (src/Player.ts)

• Keyboard input handling (A/D keys)
• Sprite animation with walk cycles
• Boundary collision detection
• Character position and movement

Level (src/Level.ts)

• Platform definitions
• Decorative elements (trees, bushes)
• Parallax scrolling effects
• Ground and sky rendering

Camera (src/Camera.ts)

• Follows player with smooth scrolling
• Maintains level boundaries
• Provides viewport offset for rendering

Coin (src/Coin.ts)

• Collision detection with player
• Collection state management
• Animated rendering

HUD (src/HUD.ts)

• Score display
• Win condition detection
• UI rendering

Technical Details

TypeScript Configuration

The project uses strict TypeScript settings with:

• ES2020 target for modern JavaScript features
• Strict type checking enabled
• Source maps for debugging
• Declaration files (.d.ts) for type definitions

Rendering

• HTML5 Canvas for 2D graphics
• Pixel-perfect rendering with imageSmoothingEnabled: false
• 60 FPS game loop using requestAnimationFrame
• Sprite sheet animation with frame cycling

Game Architecture

The game follows these design principles:

• Modular components: Each class has a single responsibility
• Type safety: All data structures are properly typed
• Scalability: Easy to add new features (jump mechanics, enemies, levels)
• Clean separation: Update logic separated from rendering

Future Enhancements

The architecture is ready for:

• Jump mechanics and gravity physics
• Enemy AI and collision
• Multiple levels
• Power-ups and special abilities
• Sound effects and music
• Mobile touch controls

Development

Making Changes

1. Edit TypeScript files in src/
2. Run npm run build (or keep npm run watch running)
3. Refresh browser to see changes

Debugging

Source maps are enabled, so you can debug TypeScript directly in browser DevTools:

1. Open Developer Tools (F12)
2. Go to Sources tab
3. Find files under webpack:// or src/
4. Set breakpoints in TypeScript code

License

MIT