El Pollo Loco

A classic 2D jump-and-run game built with HTML5 Canvas and vanilla JavaScript. Help Pepe defeat the crazy chickens and their evil boss to save the day!

Table of Contents

• About
• Features
• Demo
• Installation
• How to Play
• Project Structure
• Technologies
• Architecture
• Development
• Browser Support
• License

About

El Pollo Loco is a browser-based platformer game inspired by classic jump-and-run games. Players control Pepe, who must navigate through a desert landscape, collect items, defeat enemies, and ultimately face off against the endboss chicken.

Features

• Smooth gameplay with 60 FPS game loop
• Responsive design that works on desktop and mobile devices
• Touch controls for mobile gameplay
• Audio system with background music and sound effects
• Fullscreen mode support
• Mute functionality with persistent state
• Game states: Landing page, gameplay, game over, and victory screens
• Collision detection for enemies, items, and projectiles
• Health, coin, and bottle collection systems
• Status bars for tracking player stats
• Endboss battle with unique mechanics
• Accessibility features including keyboard navigation and ARIA labels
• Orientation warning for mobile devices

Demo

Open index.html in your web browser to play the game.

Installation

Option 1: Direct Download

1. Clone or download this repository
2. Open index.html in a modern web browser
3. Start playing!

Option 2: Local Server (Recommended)

For the best experience, run the game on a local server:

# Using Python 3
python -m http.server 8000

# Using Node.js (http-server)
npx http-server

# Using PHP
php -S localhost:8000

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

How to Play

Story

Help Pepe defeat the crazy chickens and their evil boss to save the day!

Controls

Desktop Controls

• Arrow Left (←): Move left
• Arrow Right (→): Move right
• Space: Jump
• D: Throw bottle

Mobile Controls

Touch buttons are displayed on mobile devices and smaller screens.

Gameplay Mechanics

• Collect bottles to use as projectiles
• Collect coins for points
• Jump on chickens to defeat small enemies
• Throw bottles at the endboss to defeat it
• Avoid damage from enemies and the endboss
• Watch your health displayed in the status bar

Project Structure

elpollo/
├── assets/               # Font files
│   └── fonts/
├── audio/               # Sound effects and music
├── css/                 # Stylesheets
│   └── main.css
├── debug/               # Debug and testing utilities
├── img/                 # Game sprites and backgrounds
│   ├── 1_other/
│   ├── 2_character_pepe/
│   ├── 3_enemies_chicken/
│   ├── 4_enemie_boss_chicken/
│   ├── 5_background/
│   ├── 6_salsa_bottle/
│   ├── 7_statusbars/
│   ├── 8_coin/
│   └── 9_intro_outro_screens/
├── js/                  # Main JavaScript files
│   ├── game.js         # Game initialization
│   ├── game-ui-controls.js
│   ├── game-touch-controls.js
│   ├── interval-manager.js
│   ├── orientation-fullscreen.js
│   └── accessibility-helper.js
├── levels/              # Level configurations
│   └── level1.js
├── models/              # Game object classes
│   ├── character.class.js
│   ├── endboss.class.js
│   ├── world.class.js
│   ├── movable-object.class.js
│   ├── drawable-object.class.js
│   ├── audio-manager.class.js
│   └── ... (other game classes)
├── tools/               # Development tools
├── index.html           # Main entry point
├── impressum.html       # Imprint page
└── README.md           # This file

Technologies

• HTML5 Canvas - For rendering the game
• Vanilla JavaScript (ES6+) - Game logic and object-oriented programming
• CSS3 - Styling and animations
• Web Audio API - Sound management
• LocalStorage API - Persistent game settings

Architecture

Core Classes

Game Objects

• DrawableObject - Base class for all drawable game objects
• MovableObject - Extends DrawableObject with movement and physics
• Character - Player-controlled character with movement, jumping, and actions
• Endboss - Final boss enemy with complex behavior
• Chicken - Standard enemy
• ChickenSmall - Smaller, faster enemy variant
• ThrowableObject - Projectile (bottle) mechanics

Game Systems

• World - Main game world manager, coordinates all game systems
• WorldCollision - Handles collision detection between game objects
• WorldEndboss - Manages endboss-specific logic
• Level - Level configuration and object management
• Camera - Handles camera movement and viewport
• UIManager - Manages status bars and UI elements
• AudioManager - Centralized audio system
• GameStateManager - Manages game states and transitions
• Keyboard - Keyboard input handler
• DebugHelper - Debug visualization tools

Status Bars

• StatusBar - Base class for all status bars
• StatusBarHealth - Player health display
• StatusBarCoins - Coin collection display
• StatusBarBottles - Bottle inventory display
• StatusBarEndboss - Endboss health display

Design Patterns

• Object-Oriented Programming with ES6 classes
• Inheritance for code reuse (DrawableObject → MovableObject → Character)
• Composition for game systems (World contains Camera, UIManager, etc.)
• Singleton-like patterns for global managers (AudioManager, GameStateManager)
• Observer pattern for game events and state changes

Game Loop

The game runs at 60 FPS using setInterval with collision detection, movement updates, and rendering synchronized.

Development

Code Quality

• JSDoc documentation for all classes and functions
• Modular architecture with separated concerns
• Consistent code style following modern JavaScript conventions
• Accessibility features with ARIA labels and keyboard navigation

Debug Tools

Debug mode can be enabled to visualize:

• Collision boxes
• Object boundaries
• Performance metrics

Adding New Features

1. Create new classes in the models/ directory
2. Extend DrawableObject or MovableObject as needed
3. Add new instances to level configuration in levels/level1.js
4. Document with JSDoc comments

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Requirements:

• HTML5 Canvas support
• ES6+ JavaScript support
• LocalStorage API

License

This project was created for educational purposes.

All game assets (images, audio) are used for educational and non-commercial purposes only.

---

Developed with ❤️ using HTML5 Canvas and Vanilla JavaScript