🐼 Panda Pang

Van boven rollen duizenden gekleurde bollekes naar beneden. Onderaan staan panda's die erop schieten.

Geen verhaal, geen AI-zever. Gewoon richten, knallen, kettingreacties en panda's verzamelen.

Spelen

Het spel is één HTML-bestand plus wat ES-modules. Geen build, geen dependencies — maar modules laden niet via file://, dus je hebt wel een servertje nodig:

node serve.mjs          # → http://localhost:5173
# of
python3 -m http.server 5173

Open daarna http://localhost:5173 in je browser. Op een iPad zet je hem het best in landscape en voeg je hem toe aan je beginscherm (dan verdwijnt de adresbalk).

Hoe het werkt

Richten	Sleep met je vinger of muis. De panda loopt mee naar waar je sleept.
Schieten	Laat los. Langer slepen laadt je schot op — vol geladen schiet de cowboy drie kogels tegelijk.
Splitsen	Een geraakt bolleke splitst in twee kleinere. Het kleinste knalt kapot.
Kaatsen	Je kogels kaatsen tegen de muren én tegen andere bollekes.
Ketting	Drie bollekes van dezelfde kleur die elkaar raken, ontploffen. Elke ontploffing steekt zijn buren aan, en zo rolt de kettingreactie over het scherm.
Tijd	Elk level duurt hoogstens één minuut. Veld leeg vóór de tijd om is = tijdbonus.
Omvallen	Word je geraakt, dan gaat je panda neer met een belachelijk dramatische animatie. Je hebt drie hartjes.

Op desktop werken ook de toetsen: A/D of de pijltjes om te lopen, muis om te richten, spatie om te schieten, Esc voor pauze, M dempt het geluid, N de muziek en F3 toont de framerate.

De panda's

Panda	Wapen	Vrij vanaf	Bijzonder
Cowboypanda	Twee revolvers	level 1	Snel, kaatst twee keer, vol geladen een drieklapper
Ninjapanda	Werpsterren	level 2	Kaatst vijf keer, loopt het snelst
Babypanda	Bamboespuwer	level 3	Kan bijna niks, maar levert dubbel zoveel punten op
Bazookapanda	Bazooka	level 4	Traag, maar blaast alles in een straal aan flarden
Oude Kungfupanda	Bamboestok	level 6	Schiet niet — hij mept de bollekes terug

Twee spelers op één iPad

Zet in het menu "1 SPELER" om naar "2 SPELERS", kies voor allebei een panda en start. Het scherm wordt in twee helften verdeeld: waar je je vinger neerzet bepaalt welke panda je bestuurt. De bollekes stuiteren over het hele scherm, dus je zit elkaar wel degelijk in de weg. De scores worden apart bijgehouden.

Munten, outfits en seizoenen

Je verdient munten door te spelen. Daarmee koop je in de pandawinkel:

• outfits per panda (sheriff, schaduw, koi, camo, gouden meester …)
• wapeneffecten — het spoor achter je kogels (vuurwerk, bamboeblad, spookje, regenboog, bladgoud)
• seizoenen — complete thema's voor de achtergrond (kersenbloesem, vuurvliegjesnacht, gouden herfst, stille winter, maanfeest, bamboestorm)

Alles daarvan is puur uiterlijk. Er is geen energiesysteem, er zijn geen wachttijden en niets wat je koopt maakt je sterker. Zie docs/GAME-DESIGN.md voor waarom dat zo is.

Ook in Swift

Naast de webversie zit er een native port in ios/: Swift met SpriteKit voor het spel en SwiftUI voor de menu's. Zelfde spel, zelfde getallen (308 waarden worden automatisch nagerekend), maar met ProMotion, Core Haptics en echte multitouch. Die port is nog nooit gecompileerd — dat staat er eerlijk bij.

Onder de motorkap

Alles wordt live op een <canvas> getekend — er zit geen enkele afbeelding, geluidsbestand of npm-package in deze repo. Panda's, bollekes, bamboe en explosies zijn paden; het geluid wordt gesynthetiseerd met de WebAudio API.

index.html            de enige pagina
styles.css            paginachrome (het spel zelf tekent alles zelf)
serve.mjs             statisch servertje zonder dependencies
src/
  main.js             opstarten + de gameloop
  core/               viewport, invoer, geluid, opslag, hulpfuncties
  data/               kleuren, pandatypes, cosmetica, seizoenen, levels
  game/               fysica, bollekes, kogels, panda's, kettingen, deeltjes
  render/             achtergrond, bollekes, panda's, HUD
  ui/                 alle menuschermen
ios/                  de Swift + SpriteKit-port
scripts/              hulpscripts (o.a. de pariteitstest web ↔ Swift)

Een paar keuzes die ertoe doen:

• Bollekes botsen altijd terug tot exact hun eigen hoogte, zoals in de klassieke Pang-arcadekasten. Voorspelbaar, dus eerlijk.
• De wereld is altijd 900 eenheden hoog; de breedte volgt de beeldverhouding van je scherm. Zo krijgen twee spelers op een iPad even brede helften en ziet een breed desktopscherm er niet uitgerekt uit.
• Een spatial hash houdt het zoeken naar rakende bollekes goedkoop, ook als er een paar honderd tegelijk stuiteren.
• Kettingen lopen met een vertraging van 75 ms per schakel. Puur voor het gevoel: je ziet de reactie over het scherm rollen in plaats van in één frame verdwijnen.

Testen zonder te spelen

In de console zit een handvat klaar:

PandaPang.startRun(2, ['ninja', 'bazooka'], 3)  // 2 spelers, level 3
PandaPang.debugChain()                          // forceer een kettingexplosie
PandaPang.debugKO()                             // laat speler 1 omvallen
PandaPang.debugFire()                           // vuur één keer

Licentie

MIT — zie LICENSE.