Jak vytvořit vlastní slovní hru

Jak funguje webová hra jako Wordle? Co potřebujete vědět, abyste si vytvořili vlastní hru?

Ne každá hra vyžaduje obrovský vývojářský tým a roky vývoje, aby byla hitem. Wordle například vytvořil Josh Wardle pro svého partnera Palak Shah během krátké doby a navzdory své jednoduchosti a velmi malému počtu funkcí si jeho neuvěřitelná popularita vysloužila výkupné pro New York Times.

Jak funguje webová hra jako Wordle

Pokud máte nápad na jednoduchou, ale návykovou hru, která by mohla upoutat pozornost celého světa a vydělat vám velké peníze, je zcela možné, že si sami vytvoříte webovou aplikaci, jako je Wordle.

Webový framework Wordle je jako každý web HTML, hypertextový značkovací jazyk. Toto je kód, na který všechny webové stránky spoléhají, aby řekly vašemu prohlížeči, kam má umístit prvky, když se stránka načte. Web, který právě čtete, je kódován HTML a poskytuje nejen skutečný obsah, ale také pokyny pro zobrazení tohoto obsahu, od pozice nabídky až po velikost písma.

Kromě HTML existuje CSS, kaskádové styly: jedná se o doplněk HTML pro usnadnění rozvržení prvků, ať už se jedná o vlastnosti obrázku nebo bloku textu. Máte-li na webu více stránek, můžete pomocí CSS nastavit jejich vizuální vlastnosti jednou, nikoli pro každou stránku.

Pokud chcete umět vytvářet webové stránky, musíte se naučit HTML a CSS, ačkoli mnoho služeb vám to umožňuje bez psaní jediného řádku kódu. Tyto služby nabízejí možnost přetahovat vaše prvky ve velmi pokročilém rozhraní a převzít kontrolu nad veškerým HTML a CSS.

Aby byl web plně interaktivní jako Wordle, potřebujete také JavaScript pro převod statických HTML a CSS stránek na dynamičtější stránky, ať už je to vyhledávací pole nebo panel nástrojů. JavaScript může manipulovat s videem, 2D nebo 3D, ukládat informace zadané uživatelem, načítat data z databáze, provádět výpočty, spouštět předdefinovaný kód podle konkrétní akce uživatele atd.

Jak vysvětlil Josh Wardle pro TechCrunch, Wordle byl napsán v JavaScriptu, kódu, který se načte při načtení stránky, což umožňuje hru hrát offline po dokončení počátečního načtení. Moderní prohlížeče umí porozumět a spustit JavaScript, který v našem případě načte slovo z databáze, identifikuje vstup uživatele a poskytuje informace pro každé písmeno.

Sám Josh Wardle přiznává, že kód hry není nijak zvlášť složitý, což vysvětluje, proč bylo možné stáhnout si Wordle celé předtím, než jej NYT koupil, se všemi slovy v jeho databázi. Bylo také možné najít řešení pouhým prozkoumáním zdrojového kódu webu.

Co potřebujete vědět, abyste si vytvořili vlastní hru?

Jak si ale hru jako Wordle vytvoříte sami? Programování vyžaduje učení, ale nepotřebujete vědět vše o HTML, CSS a JavaScript, abyste vytvořili něco na úrovni Wordle. Jak je vysvětleno na Codecademy, jednou z používaných programovacích technik je smyčka for, která kontroluje každé zadané písmeno a zobrazuje je v příslušné barvě.

Codecademy je jednou ze stránek, kde se můžete zdarma naučit HTML, CSS, JavaScript a mnoho dalších jazyků pro vývoj webových aplikací. Cvičení jsou dobře strukturovaná a vždy se naučíte jejich prováděním přímo ve vašem prohlížeči. Uvidíte, jak na to a budete moci přímo vidět důsledky. Některé pokročilé funkce a výukové programy vyžadují placené předplatné, ale mnohé se již lze naučit zdarma.

Treehouse jde dále než Codecademy a za jeho používání musíte zaplatit 25 $ měsíčně (k dispozici je bezplatná zkušební verze). Je to profesionálnější a efektivnější zdroj pro výuku HTML, CSS, JavaScriptu a dalších, ale daleko přesahuje to, co potřebujete pro hru, jako je Wordle. Zvažte, zda chcete jít dále.

Opakem Tree House, Dash . Stránka pokrývá pouze základy HTML, CSS a JavaScript, ale je zcela zdarma a zvláště vhodná pro začátečníky. Vše je spravováno přímo ve vašem prohlížeči a stejně jako Codecademy se učíte tím, že plně využíváte toho, co tyto jazyky nabízejí.

Tento seznam není zdaleka vyčerpávající, zejména proto, že se jedná pouze o zdroje v angličtině, můžete je snadno najít ve francouzštině, ale jsou dobrým základem pro začátek učení se o HTML, CSS a JavaScript. Je na vás, abyste si zahráli… a kódovali!