Dveře se zavírají - Smart City hra - AimtecHackathon 2026
🏆 1. místo a Cena publika - AimtecHackathon 2026
Vyzkoušej si hru
Hra je stále aktivní - zahraj si přímo v prohlížeči
Datum
March 2026
Velikost týmu
6 členů
Technologie
Videa
Gallery
Přehled
Webová smart city arkáda postavená na real-time datech plzeňské MHD a živém streamu z veřejné webkamery. Tramvaje ve hře přijíždí podle skutečného jízdního řádu plzeňské MHD a auta na obrazovce kopírují reálné průjezdy zachycené živou webkamerou.
Problém
Motivace projektu byla dvojí: propagovat Plzeň jako město otevřené kreativnímu využití svých veřejných dat a zároveň ukázat, že vizualizace dat nemusí žít jen v seriózně vypadajících dashboardech – může být hravá, originální a něco, co si občan rád vyzkouší. Polohy MHD, dopravní kamery a senzorová data většinou skončí v nástrojích, do kterých skoro nikdo nekoukne. Chtěli jsme to obrátit a ukázat, že stejná data můžou být zapamatovatelným, zábavným smart-city zážitkem.
Naše řešení
Postavili jsme top-down browserovou arkádu, ve které hráč ovládá robota. Jeho úkolem je dostat čekající cestující do přijíždějících tramvají – ale nesmí nikoho nechat na kolejích (přijíždějící tramvaj ho přejede) a nesmí nechat nástupiště přeplnit. Tramvaje jezdí podle skutečného plzeňského jízdního řádu z živého feedu dopravních dat a auta na silnici se spouští client-side tripwire detektorem nad HLS streamem z veřejné kamery. Hra je čistě statická, deployuje se přes Docker/nginx a běží jak na mobilu, tak na desktopu.
Klíčové funkce
- Real-time data tramvají: Živé polohy z feedu plzeňské MHD – příjezdy tramvají ve hře odpovídají skutečnému jízdnímu řádu
- Live webcam computer vision: Client-side tripwire detektor vzorkuje HLS stream a spouští auta ve hře, když přes silnici projede skutečné auto
- Phaser 3 + Arcade Physics: Pixel-art top-down arkáda s fyzikou pro postavu, cestující, tramvaje i auta
- Zone feed & ETA predikce: Filtrace vozidel polygonem kolem zastávky, řazení podél trasy, EMA-vyhlazená rychlost a extrapolovaný čas příjezdu
- Playback delay buffer: Surové SSE pakety se drží ~9 s ve FIFO frontě, aby herní události časově seděly s živým kamerovým obrazem
- Mobile-first: Virtuální joystick, touch ovládání, lock orientace na landscape, fullscreen, iOS audio context resume
- Wave system & VFX: Eskalace obtížnosti, day/night tint, particle efekty (dust, impact, comic burst)
- Stack: Phaser 3, JavaScript ES moduly, Vite, TailwindCSS, hls.js, Leaflet (debug mapa), Docker + nginx pro statický deploy
Hra je dostupná na dveresezaviraji.cz.
Během stejného víkendu jsme stihli postavit i druhou hru Czech City Wars – livestream přenos, kde proti sobě soutěží česká města podle toho, co se zrovna děje na jejich veřejných webkamerách. Ultralytics YOLO + SAHI počítá v reálném čase lidi, psy a kola z 9 městských kamer, dva AI komentátoři (Gemini) zápas glosují. Backend na FastAPI + WebSocket broadcast, statický frontend.
Moje role
Vedl jsem tým, jeho technické směřování a koordinoval celý projekt. Z implementace jsem na sebe vzal základní kostru ve Phaseru — kostru projektu, obsluhu scény a vykreslovací vrstvu, na které pak nabalil zbytek hry. K tomu klasické hackathonové prostředí: šest lidí, 40 hodin, hodně kafe a deadline, který přichází rychleji, než se zdá.