Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

WebAppGames

JavaScript 3D webová hra WebAppGames

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.
Pro soutěž jsem napsal fyzikální kouzelnický sandbox. Jedná se o hru na webu, kterou si můžete zahrát hned bez jakékoliv instalace na https://hejny.github.io/webappgames/.

Koncept hry

  • 3D first person hra.
  • Kostičkový Sandbox s otevřeným světem.
  • Věci v tomto světě můžeš měnit pomocí kouzel.
  • Kostičky jen tak "nevysí" ve vzduch. Na pozadí běží Fyzikální engine, který zboří vše, co nestojí pevně.

Další důležitou věcí, která ještě není implementovaná, je to. Aby hra využívala všech výhod webu. Viz. moje série Vytvoř si vlastní webovou hru.

Ovládání

Hra se dá zatím hrát pouze s klávesnicí a myší. Nejdříve si musiš "zamknout myš". To uděláš tak, že po spuštění klikneš úplně kamkoliv do scény. Prohlížeč se tě následně zeptá, zda chceš zamknout myš.

  • Chodíš pomocí kláves [W][A][S][D] nebo pomocí šipek.
  • Kouzla vybíráš kolečkem myši.
  • A kouzlíš pomocí kliknutí myší.

Kouzla

Jsou rozdělena do 5ti kategorií:

  • Subjective - Manipulují přímo s hráčem.
  • Kinetics - Mění objektu jeho kinetickou energii.
  • Create - Vytváření nových objektů
  • Hide - Ničení či jiné měnění objektů
  • Transform - Přeměňování

Technologie

  • TypeScript nadstavba nad JavaScriptem
  • Babylon.js 3D engine
  • Oimo.js fyzikální engine
  • Hand.js polyfill pro pointer události
  • React knihovna pro vykreslování uživatelského rozhraní
  • MobX knihovna pro držení stavu aplikace

Kam dál?

Celá hra rozhodně není dokončená, jedná se spíše o koncept na kterém bych v budoucnu mohl postavit reálnou hru pro hráče. Mám pár věcí, která bych rád udělal. Budu velmi rád za nápady, připomínky a rady.

Blízká budoucnost

Tohle jsou spíše nedodělky a bugy, které jsem prostě nestihl odladit před 1.10.2017.

  • Ukládání hry do LocalStorage či do cloudu.
  • Survival mód
  • Zvuky

Do Vánoc

  • Lepší generátor prostředí hry
  • Pohodlnější stavění vlastních budov
  • Možnost ovládat i na dotykových obrazovkách

Dlouhodobější vize

  • Vytvořit nad tímto sandboxem nějaký Příběh.
  • Multiplayer

Odkazy

Hru lze stáhnout i přímo pod článkem. Jde však pouze o mrtvou kopii, pokud chceš vidět aktuální verzi, použij následující odkazy.

Zdrojové kódy: https://github.com/…/webappgames

Zahraj si přímo na webu: https://hejny.github.io/webappgames/

Hodnocení porotců

Aplikace byla vytvořena do soutěže ITnetwork summer 2017

Programátorská soutěž ITnetwork summer 2017
  • David Čápka (8.5 bodů) - Jako vždy pěkná webová hra od tebe. Hratelnost nějakou dobu drží, potom to začíná být stereotypní. V článku u hry píšeš o plánech se survival módem, ten by tento problém určitě vyřešil. Škoda chybějících zvuků, ty k čarování přímo patří. Celkově to na mne působí jako dobře odladěný prototyp, ale k plnohodnotné hře tomu ještě kousek zbývá. Nechám se překvapit jak to bude dále vypadat.
  • Lucie Hartingerová (8 bodů) - Billboard na začátku je epický! :-D Nepodařilo se nám shodit věž tím velkým dominem, ale podařilo se nám ji shodit na sebe... Slušně jsme se zasekli při zkoušení jednotlivých možností demolice a přestavby. Akorát při rychlejším klikání se sloupy i zvětšovaly, i kopírovaly.
  • Tomáš Bitter (8 bodů) - Spíš jako hru to beru jako demonstraci fyziky, která funguje dobře. Člověk si v tom může docela vyhrát. Ale do budoucna to chce rozhodně nějakou gamifikaci.

Galerie

Program byl vytvořen v roce 2017.

 

Stáhnout

Staženo 0x (9.07 MB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Program pro vás napsal Pavol Hejný
Avatar
Jak se ti líbí článek?
2 hlasů
Autor se věnuje vývoji mnoha www aplikací - https://www.pavolhejny.com/
Miniatura
Všechny články v sekci
Vytvoř si vlastní 3D webovou hru
Aktivity (9)

 

 

Komentáře

Avatar
Andree Pyro
Redaktor
Avatar
Andree Pyro:2. října 19:15

Screen v příloze :D :D :D
Jinak se mi hra moc líbí :) Dobrá práce!

Editováno 2. října 19:15
Odpovědět 2. října 19:15
Boj sa tých, ktorí sú ticho. Oni sú totiž tí jediní, ktorí skutočne myslia.
Avatar
Pavol Hejný
Autoredaktor
Avatar
Odpovídá na Andree Pyro
Pavol Hejný:2. října 21:34

Jak se ti to povedlo?
Zmrazil jsi tu desku a potom rychle rozmrazil a udělal screen? Nebo to je bug?
Já jsem totiž ten fyzikální engine hodně ohýbal, aby ty pády vypadaly více cool - jak ve filmech. Tzn. že aplikuji jiné gravitační zrychlení na různá tělesa, ale někdy mi to ještě nefunguje dobře a sen tam něco zůstane vyset nebo naopak spadne jen tak.

 
Odpovědět 2. října 21:34
Avatar
Andree Pyro
Redaktor
Avatar
Odpovídá na Pavol Hejný
Andree Pyro:3. října 7:13

Jen jsem odbouraly všechny sloupky, jak vidíš na obrázku. Takhle to zůstalo déle než minutu. Pak jsem odbouraly ještě jednu řadu, ale to už začala celá stavba pomalu padat.

Odpovědět  +1 3. října 7:13
Boj sa tých, ktorí sú ticho. Oni sú totiž tí jediní, ktorí skutočne myslia.
Avatar
Pavol Hejný
Autoredaktor
Avatar
Odpovídá na Andree Pyro
Pavol Hejný:4. října 1:38

Teď jsem dělal video, kde jsem popisoval všechna kouzla a stalo se mi to samé. Tohle se v reálném světě jen tak nestane, aby předmět nezaregistroval, že pod ním už nic není a má padnout.

 
Odpovědět  +1 4. října 1:38
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.