Vibe Pinball

This is a demo repository showcasing how to build a pinball game using the Vibe Compiler (vibec). The Vibe Compiler processes prompt stacks to generate code via LLM integration, and this project demonstrates that workflow with a playable pinball game.

Project Structure

vibe-pinball/
├── stacks/
│   └── core/
│       ├── 001_create_pinball_table.md    # Initial table setup
│       ├── 002_add_targets_scoring.md     # Add targets and scoring
│       ├── 003_special_features.md        # Advanced features
│       └── plugins/
│           └── coding-style.md            # Coding style guidelines
├── output/
│   ├── stacks/                            # Per-stage outputs
│   └── current/                           # Latest game files
├── vibec.json                             # Configuration
└── README.md                              # This file

Prerequisites

• Node.js and npm: Required to run vibec and install dependencies.
• LLM API Key: An API key for an OpenAI-compatible service (e.g., OpenAI, OpenRouter).
• Python 3: Optional, for serving the game locally.

Building the Pinball Game with Vibe Compiler

Follow these steps to build the pinball game using vibec:

Step 1: Install Vibe Compiler

Install vibec globally or in your project:

npm install -g @vgrichina/vibec

Step 2: Set Up Your API Key

Configure the LLM API key as an environment variable:

export VIBEC_API_KEY=your_api_key_here

Step 3: Build the Project

Run vibec to process the stacks/core/ prompts and generate the game files:

vibec

• What Happens:
  • vibec reads vibec.json, which specifies the core stack.
  • It processes each prompt in order:
    1. Creates pinball table with flippers and physics (001_create_pinball_table.md)
    2. Adds targets, scoring, and sound effects (002_add_targets_scoring.md)
    3. Adds special features like multiball and power-ups (003_special_features.md)
  • Outputs are saved in output/stacks/ (per stage) and merged into output/current/ (latest version).

Step 4: Verify the Output

Check the generated files:

ls output/current/

You should see index.html, styles.css, and game.js.

Step 5: Run the Game

Serve the game locally using Python's HTTP server (or any static server):

cd output/current
python3 -m http.server 8000

Open http://localhost:8000 in your browser to play the pinball game.

Game Features

The pinball game implements the following features across three development stages:

1. Basic Pinball Table (Stage 1)

   • Portrait-oriented canvas with cosmic background
   • Two flippers controlled by A/D keys
   • Ball launcher controlled by SPACE key
   • Physics simulation with gravity and collisions
   • Neon glow effects on table elements

2. Targets and Scoring (Stage 2)

   • Various glowing targets with different point values
   • Triangle bumpers that bounce the ball
   • Score tracking and display
   • Particle effects and ball trails
   • Synthesized sound effects using Web Audio API

3. Special Features (Stage 3)

   • Multiball mode with score multipliers
   • Power-ups: slow-motion, magnets, warp tunnels
   • Dynamic visuals that respond to gameplay
   • Game states: start screen, ball counter, game over
   • High score persistence and enhanced audio

Controls

• A/D Keys: Control left/right flippers
• SPACE: Launch ball from launcher
• R: Restart game (on game over screen)

License

MIT