Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1 @@
node_modules/
.DS_Store
*.log
.env
.env.local
196 changes: 82 additions & 114 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,146 +1,114 @@
# 🎮 Platanus Hack 25: Arcade Challenge
# PLAT-MAN 🍌🦍

At [Platanus Hack 25](https://hack.platan.us) we will have an arcade machine. While we could put some cool retro games on it, it is way better if it can be turned into a challenge.
Un juego arcade para Platanus Hack 25 donde un gorila escapa de agentes corporativos estresados mientras recolecta plátanos.

**Your mission:** Build the best arcade game using Phaser 3 (JS Game Lib) that will run on our physical arcade machine!
## 🎮 Descripción

---
- **3 niveles** con dificultad creciente
- **Agentes corporativos** como enemigos (con trajes y maletines)
- **Bananas realistas** que dan poder temporal
- **Sistema de ranking** con Top 5 (almacenado en localStorage)
- **Música de fondo** generada con Web Audio API
- **Sprites procedurales** dibujados en runtime (sin imágenes externas)

## 🏆 Prizes
## 🎯 Controles

**🥇 First Place:**
- 💵 **$250 USD in cash**
- 🎟️ **A slot to participate in Platanus Hack**
- 🎮 **Your game featured on the arcade machine**
- **Flechas** o **WASD**: Mover al gorila
- **ESPACIO/ENTER**: Iniciar juego / Confirmar
- **↑↓**: Cambiar letra en ranking
- **←→**: Mover entre letras en ranking
- **R**: Reiniciar (durante el juego)

**🥈 Second Place:**
- 💵 **$100 USD in cash**
- 🎮 **Your game featured on the arcade machine**
## 📁 Estructura del Proyecto

---

## 📋 Restrictions

Your game must comply with these technical restrictions:

### Size Limit
- ✅ **Maximum 50KB after minification** (before gzip)
- The game code is automatically minified - focus on writing good code

### Code Restrictions
- ✅ **Pure vanilla JavaScript only** - No `import` or `require` statements
- ✅ **No external URLs** - No `http://`, `https://`, or `//` (except `data:` URIs for base64)
- ✅ **No network calls** - No `fetch`, `XMLHttpRequest`, or similar APIs
- ✅ **Sandboxed environment** - Game runs in an iframe with no internet access

### What You CAN Use
- ✅ **Phaser 3** (v3.87.0) - Loaded externally via CDN (not counted in size limit)
- ✅ **Base64-encoded images** - Using `data:` URIs
- ✅ **Procedurally generated graphics** - Using Phaser's Graphics API
- ✅ **Generated audio tones** - Using Phaser's Web Audio API
- ✅ **Canvas-based rendering and effects**

# 🕹️ Controls

Your game will run on a real arcade cabinet with physical joysticks and buttons!

![Arcade Button Layout](https://hack.platan.us/assets/images/arcade/button-layout.webp)

## Arcade Button Mapping

The arcade cabinet sends specific key codes when buttons are pressed:

**Player 1:**
- **Joystick**: `P1U`, `P1D`, `P1L`, `P1R` (Up, Down, Left, Right)
- **Joystick Diagonals**: `P1DL`, `P1DR` (Down-Left, Down-Right)
- **Action Buttons**: `P1A`, `P1B`, `P1C` (top row) / `P1X`, `P1Y`, `P1Z` (bottom row)
- **Start**: `START1`

**Player 2:**
- **Joystick**: `P2U`, `P2D`, `P2L`, `P2R`
- **Joystick Diagonals**: `P2DL`, `P2DR`
- **Action Buttons**: `P2A`, `P2B`, `P2C` / `P2X`, `P2Y`, `P2Z`
- **Start**: `START2`

## Testing Locally
```
platanus-phaser-game/
├── game.js # ✅ Código principal del juego (sin imports)
├── metadata.json # ✅ Nombre y descripción del juego
├── index.html # HTML con Phaser desde CDN
├── README.md # Este archivo
└── cover.png # (pendiente) Imagen 800x600px
```

For local testing, you can map these arcade buttons to keyboard keys. The mapping supports **multiple keyboard keys per arcade button** (useful for alternatives like WASD + Arrow Keys). See `game.js` for the complete `ARCADE_CONTROLS` mapping template.
## ⚙️ Características Técnicas

By default:
- Player 1 uses **WASD** (joystick) and **U/I/O/J/K/L** (action buttons)
- Player 2 uses **Arrow Keys** (joystick) and **R/T/Y/F/G/H** (action buttons)
### Cumple con restricciones:
- ✅ **Sin imports**: JavaScript vanilla puro
- ✅ **Sin URLs externas** en game.js (Phaser desde CDN no cuenta)
- ✅ **Sin fetch/XMLHttpRequest**
- ✅ **Sprites procedurales**: Dibujados con Canvas API
- ✅ **Audio generado**: Usando Web Audio API de Phaser
- ✅ **Tamaño optimizado**: Código minificable

💡 **Tip**: Keep controls simple - design for joystick + 1-2 action buttons for the best arcade experience!
### Phaser 3 Features utilizados:
- `Phaser.Game` y configuración
- Physics (Arcade)
- Sprites y texturas procedurales
- Tweens para animaciones
- Keyboard input
- Groups y colisiones
- LocalStorage para persistencia

---
## 🚀 Desarrollo

## ⏰ Deadline & Submission
### Instalar dependencias:
```bash
pnpm install
```

**Deadline:** Sunday, November 10, 2025 at 23:59 (Santiago time)
### Ejecutar en desarrollo:
```bash
pnpm dev
```

### How to Submit
### Verificar restricciones:
```bash
pnpm check-restrictions
```

Submitting your project is easy:
## 🎨 Sprites

1. **Save your changes** - Make sure `game.js`, `metadata.json`, and `cover.png` are ready
- **Important:** Your game must include a custom `cover.png` file (800x600 pixels) showcasing your game
2. **Git push** - Push your code to your repository:
```bash
git add .
git commit -m "Final submission"
git push
```
3. **Hit Submit** - Click the submit button in the development UI and follow the steps
Todos los sprites son generados proceduralmente en el código:

That's it! 🎉
- **Gorila**: Cuerpo completo con brazos, piernas, expresión facial
- **Agentes**: Oficinistas con traje, corbata, maletín, expresiones (serio/asustado)
- **Bananas**: Realistas con gradientes, brillos y manchas maduras
- **Paredes**: Tiles con efectos visuales por nivel

---
## 🎵 Audio

## 🚀 Quick Start
Música de fondo simple generada con osciladores (notas: C, E, G, E).

### 1. Install Dependencies
```bash
pnpm install
```
## 🏆 Sistema de Ranking

### 2. Start Development Server
```bash
pnpm dev
```
This starts a server at `http://localhost:3000` with live restriction checking.
- Top 5 mejores puntuaciones
- Iniciales de 3 letras
- Colores especiales (oro, plata, bronce)
- Guardado en localStorage

### 3. Build Your Game
- **Edit `game.js`** - Write your arcade game code
- **Update `metadata.json`** - Set your game name and description
- **Create `cover.png`** - Design an 800x600 pixel cover image for your game
- **Watch the dev server** - It shows live updates on file size and restrictions
## 📊 Niveles

---
1. **Etapa 1** (Azul): Velocidad de agentes: 120
2. **Etapa 2** (Púrpura): Velocidad de agentes: 150
3. **Etapa 3** (Naranja): Velocidad de agentes: 180

## 🤖 Vibecoding Your Game
## 🎯 Objetivo del Juego

This challenge is designed for **vibecoding** - building your game with AI assistance!
Recolecta los 6 plátanos en cada nivel mientras evitas a los agentes corporativos. Cuando recolectas un plátano, los agentes se estresan y puedes comerlos por 4 segundos. Completa las 3 etapas para ganar.

### What We've Set Up For You
## 📝 Puntuación

- **`AGENTS.md`** - Pre-configured instructions so your IDE (Cursor, Windsurf, etc.) understands the challenge
- **`docs/phaser-quick-start.md`** - Quick reference guide for Phaser 3
- **`docs/phaser-api.md`** - Comprehensive Phaser 3 API documentation
- **10 puntos** por plátano
- **50 puntos** por agente comido
- **1 punto** por segundo sobrevivido

Your AI agent already knows:
- ✅ All the challenge restrictions
- ✅ How to use Phaser 3 effectively
- ✅ Best practices for staying under 50KB
- ✅ What files to edit (`game.js` and `metadata.json` only)
## 🔧 Próximos Pasos

### How to Vibecode
- [ ] Crear `cover.png` (800x600px)
- [ ] Ejecutar `pnpm check-restrictions` para verificar tamaño
- [ ] Optimizar código si excede 50KB

Simply tell your AI assistant what game you want to build! For example:
## 👥 Créditos

> "Create a Space Invaders clone with colorful enemies"
>
> "Build a flappy bird style game with procedural graphics"
>
> "Make a breakout game with power-ups"
Juego creado para **Platanus Hack 25: Arcade Challenge**

Your AI will handle the implementation, keeping everything within the restrictions automatically!
Binary file modified cover.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading