PortalPong

A multiplayer platform-physics game inspired by Pong and Spy vs Spy, built with Three.js and React.

Gameplay

Two players compete to score points by getting the ball into their opponent's portal:

• Red player uses WASD to move and E to cast spells
• Blue player uses IJKL to move and O to cast spells
• Players can bounce the ball by touching it or using spell explosions
• The map loops horizontally (go right, appear on left)

New Modernized Build

• Match setup screen with seeded procedural generation controls
• Background selector for bg1 through bg7, plus random rotation mode
• Parallax edge layers for cave depth and better visual motion
• Improved spell explosions with cooldown and radial impulse behavior
• Win condition flow with end-match overlay and quick arena reroll

Local Development

npm install
npm run dev

Production Build

npm run build

Vercel Deployment

1. Import this repository into Vercel.
2. Framework preset: Other.
3. Build command: npm run build
4. Output directory: build
5. Deploy.

vercel.json is already included with SPA rewrite routing so all paths resolve to index.html.

Internet Matchmaking Setup

Room sync across different devices uses Redis-backed Vercel serverless APIs:

• POST /api/match/control
• GET /api/match/state

To enable this in production:

1. Add a Redis integration from Vercel Marketplace (Upstash Redis).
2. In project environment variables, set:
   • UPSTASH_REDIS_REST_URL
   • UPSTASH_REDIS_REST_TOKEN
3. Redeploy.

If Redis env vars are missing, matchmaking API calls fail and matches fall back to local AI behavior.

Development

Current State:

Mockups: