Jak stworzyć własną grę słowną

Jak działa gra internetowa, taka jak Wordle? Co musisz wiedzieć, aby stworzyć własną grę?

Nie każda gra wymaga ogromnego zespołu programistów i lat rozwoju, aby stać się hitem. Na przykład Wordle został stworzony przez Josha Wardle’a dla jego partnera Palaka Shaha w krótkim czasie i pomimo swojej prostoty i bardzo niewielu funkcji, jego niesamowita popularność przyniosła mu okup w New York Times.

Jak działa gra internetowa, taka jak Wordle

Jeśli masz pomysł na prostą, ale uzależniającą grę, która może przyciągnąć uwagę świata i przynieść duże pieniądze, możesz samodzielnie napisać aplikację internetową, taką jak Wordle.

Struktura witryny Wordle jest, jak każda witryna internetowa, HTML, hipertekstowym językiem znaczników. Jest to kod, na którym polegają wszystkie strony internetowe, aby powiedzieć przeglądarce, gdzie umieścić elementy podczas ładowania strony. Witryna, którą właśnie czytasz, jest zakodowana w formacie HTML i zawiera nie tylko rzeczywistą zawartość, ale także instrukcje dotyczące wyświetlania tej zawartości, od pozycji menu po rozmiar czcionki.

Oprócz HTML istnieje CSS, kaskadowe arkusze stylów: jest to dodatek do HTML, który ułatwia układ elementów, niezależnie od tego, czy są to właściwości obrazu, czy blok tekstu. Dzięki CSS, jeśli masz wiele stron w swojej witrynie, możesz ustawić ich właściwości wizualne raz, a nie dla każdej strony.

Jeśli chcesz umieć tworzyć strony internetowe, musisz nauczyć się HTML i CSS, chociaż wiele usług pozwala to zrobić bez pisania ani jednej linijki kodu. Usługi te oferują możliwość przeciągania i upuszczania elementów w bardzo zaawansowanym interfejsie oraz przejęcia kontroli nad całym kodem HTML i CSS.

Aby witryna była w pełni interaktywna, tak jak Wordle, potrzebny jest również JavaScript do konwersji statycznych stron HTML i CSS na bardziej dynamiczne strony, niezależnie od tego, czy jest to pole wyszukiwania, czy pasek narzędzi. JavaScript może manipulować wideo, 2D lub 3D, przechowywać informacje wprowadzone przez użytkownika, ładować dane z bazy danych, wykonywać obliczenia, wykonywać predefiniowany kod zgodnie z określoną akcją użytkownika itp.

Jak Josh Wardle wyjaśnił TechCrunch, Wordle został napisany w JavaScript, czyli kodzie, który jest ładowany podczas ładowania strony, umożliwiając grę w trybie offline po zakończeniu początkowego ładowania. Nowoczesne przeglądarki mogą rozumieć i wykonywać JavaScript, który w naszym przypadku ładuje słowo z bazy danych, identyfikuje dane wprowadzane przez użytkownika i dostarcza informacji dla każdej litery.

Sam Josh Wardle przyznaje, że kod gry nie jest szczególnie skomplikowany, co wyjaśnia, dlaczego można było pobrać Wordle w całości, zanim kupił go NYT, ze wszystkimi słowami w swojej bazie danych. Możliwe było również znalezienie rozwiązań, po prostu sprawdzając kod źródłowy witryny.

Co musisz wiedzieć, aby stworzyć własną grę?

Ale jak samemu stworzyć grę taką jak Wordle? Programowanie wymaga nauki, ale nie musisz wiedzieć wszystkiego o HTML, CSS i JavaScript, aby stworzyć coś na poziomie Wordle. Jak wyjaśniono w Codecademy, jedną z używanych technik programowania jest pętla for, która sprawdza każdą wprowadzoną literę i wyświetla ją w odpowiednim kolorze.

Codecademy to jedna z witryn, na których możesz bezpłatnie nauczyć się HTML, CSS, JavaScript i wielu innych języków programowania. Ćwiczenia są dobrze zorganizowane i zawsze uczysz się, wykonując je bezpośrednio w przeglądarce. Zobaczysz, jak to zrobić i będziesz mógł bezpośrednio zobaczyć konsekwencje. Niektóre zaawansowane funkcje i samouczki wymagają płatnej subskrypcji, ale wiele można się już nauczyć za darmo.

Treehouse idzie dalej niż Codecademy i aby z niego korzystać, musisz zapłacić 25 USD miesięcznie (dostępna jest bezpłatna wersja próbna). Jest to bardziej profesjonalne i wydajne źródło do nauki HTML, CSS, JavaScript i innych, ale wykracza daleko poza to, czego potrzebujesz do gry takiej jak Wordle. Zastanów się, czy chcesz iść dalej.

Przeciwieństwo Tree House, Dash . Witryna obejmuje tylko podstawy HTML, CSS i JavaScript, ale jest całkowicie bezpłatna i szczególnie przyjazna dla początkujących. Wszystko jest zarządzane bezpośrednio w Twojej przeglądarce i podobnie jak Codecademy, uczysz się przez działanie, aby w pełni wykorzystać to, co te języki mają do zaoferowania.

Ta lista nie jest wyczerpująca, zwłaszcza że są to tylko zasoby anglojęzyczne, można je łatwo znaleźć po francusku, ale są dobrą bazą do rozpoczęcia nauki o HTML, CSS i JavaScript. Od Ciebie zależy gra… i kodowanie!