🐔 El Pollo Loco

A responsive 2D jump-and-run browser game built from scratch with Vanilla JavaScript, HTML5 Canvas, and object-oriented programming — no frameworks, no libraries.

Help Pepe cross the Mexican desert, collect coins and salsa bottles, stomp on crazy chickens, and take down the giant Endboss in a final showdown.

🎮 Play the game

---

🕹️ Gameplay

• Run through a side-scrolling desert level with parallax backgrounds
• Jump on chickens and chicks to defeat them
• Collect coins and salsa bottles to fill your status bars
• Throw bottles to damage enemies and the Endboss
• Survive with your health bar — if it hits zero, the game is over
• Win by defeating the Endboss, then restart or return to the menu

⌨️ Controls

Input	Action
← / →	Move left / right
Space	Jump
D	Throw a bottle
On-screen buttons	Touch controls on mobile & tablet

✨ Features

• Fully responsive — playable on desktop, tablet, and smartphone (landscape mode, with a rotate hint in portrait)
• Touch controls that only appear on touch devices, with disabled context menu for smooth gameplay
• Pause menu with resume, restart, and sound options
• Sound system — background music and sound effects with a mute toggle persisted in localStorage
• Fullscreen mode with native Fullscreen API and a CSS fallback
• Animated characters — idle, sleep, walk, jump, hurt, and death animations for the character; alert, attack, and hurt phases for the Endboss
• Smart collision system — stomp detection with proper offsets (enemies only die when you actually land on them)
• Status bars for health, coins, bottles, and Endboss energy
• Restart without page reload — full game state reset in JavaScript
• Dynamic enemy spawning — additional enemies appear over time to keep the level alive

🏗️ Architecture

The game is built with a clean OOP class hierarchy:

DrawableObject
└── MovableObject
    ├── Character
    ├── Chicken
    ├── Chick
    ├── Endboss
    ├── Cloud
    └── ThrowableObject
DrawableObject
├── Statusbar
├── CollectableObject
└── Background

Independent classes: World (game loop & rendering), Level (level generation), Keyboard (input handling), CollisionManager (collision logic), plus dedicated modules for audio, UI, fullscreen, and touch controls.

📁 Project Structure

├── index.html            # Landing page & game canvas
├── impressum.html        # Legal notice
├── style.css             # Base styles
├── css/                  # Dialogs, menu, responsive, impressum styles
├── js/                   # Game logic, UI, audio, fullscreen, touch controls
├── models/               # All OOP classes (*.class.js)
├── levels/               # Level configuration
├── img/                  # Sprites & backgrounds
├── audio/                # Music & sound effects
├── fonts/                # Locally embedded fonts
└── docs/                 # UML class diagram (draw.io)

🛠️ Tech Stack

• JavaScript (ES6+) — classes, inheritance, arrow functions, template literals
• HTML5 Canvas — rendering, sprite animation, camera translation
• CSS3 — responsive layout, media queries, custom fonts
• Git & GitHub — version control with consistent commit history

🚀 Run Locally

No build step required — it's pure Vanilla JS:

git clone https://github.com/kamycoding/El-Pollo-Loco.git
cd El-Pollo-Loco

Then open index.html in your browser, or serve it with any static server (e.g. the VS Code Live Server extension).

📄 License

This project was created for educational purposes as part of the Developer Akademie training program. Game assets belong to their respective owners.

---

Made with ☕ and way too many crazy chickens by Kamycoding