Zaczynam pisać kolejny post na blogu i widzę za oknem piękny i słoneczny początek lata. Pomyślałem więc, że post powinien być lekki, przyjemny ale jednak w dalszym ciągu pomagający w ciągłym doskonaleniu frontend-owego rzemiosła. Padło więc na gry – baw się i programuj 🙂
Ale nie byle jakie – te tutaj wymienione uczą programować. Robią to w jeden z najlepszych możliwych sposobów, czyli bawiąc i angażując użytkownika do pokonywania kolejnych wyzwań. Kolejność gier na liście przedstawionej poniżej jest całkowicie losowa. Wszystkie gry są oczywiście darmowe.
CSS Battle
1.Zasady gry są bardzo proste. Dostajesz na start jednego div-a i obrazek który musisz odtworzyć korzystając jedynie z HTML i CSS. Im mniej kodu, tym więcej punktów. Gra posiada tablice wyników, więc możesz piąć się w górę wraz z kolejnymi rozwiązanymi zadaniami. Nieco więcej informacji dostępne w tym FAQ. Ostrzegam, wciąga.
CSS Diner
2.Dalej zostajemy w klimacie CSS. Tym razem gra w której możemy podszkolić swoje umiejętności związane z selektorami CSS. Nie ma tablicy wyników, logowania, itp. Otwieramy stronę i od razu gramy. Czekają nas do przejścia aż 32 poziomy.
Grid Garden
3.Co prawda akronim CSS nie występuje w tytule, ale słówko Grid już może nam sugerować, że mamy do czynienia z CSS po raz trzeci. Grid Garden tym razem pozwoli nam szlifować naszą wiedzę dotyczącą… CSS Grid.
W trakcie pokonywania tej prostej gry będziemy mieli zadanie utrzymać oraz rozwijać ogród z marchewkami. Ogród ma kształt kwadratu podzielonego na pięć kolumn i pięć wierszy. Korzystając z komend dotyczących Grid-a musimy wykonywać kolejne postawione nam zadania. Zadań w sumie jest 28. Od razu odniosę tutaj do jednego z lepszych (moim zdaniem) artykułu dotyczącego tej technologii.
Flexbox Froggy
4.Kolejna gra i znowu CSS. Można opanować go niemal do perfekcji. Tym razem w rolach głównych żabki i najróżniejsze problemy które musimy za nie rozwiązać. Tym razem 24 poziomy. Baw się i programuj w najlepszym wydaniu 🙂 Ponownie zostawiam link do bardzo dobrego wpisu dotyczącego tej technologii.
Flexbox Defense
5.Technologia i zasada działania dokładnie takie same jak w grze powyżej. Jedynie zamieniamy żabki na wieże strażnicze, które musimy ustawić w odpowiednich pozycjach na planszy. Co ciekawe, po prawidłowym ustawieniu wież na swoich miejscach uruchamiamy atak naszych wrogów. Następnie niczym Napoleon możemy obserwować jak nasze wojsko radzi sobie z nadciągającymi przeciwnikami.
CodinGame
6.Otwierając pierwszy raz stronę startową CodinGame można odnieść wrażenie, że jest to landing page jakiejś naprawdę fajnej gry video. Sam odruchowo zacząłem szukać przycisku Download 🙂 Jednak po rejestracji w serwisie okazuje się, że tę grę będziemy pisać sami. Nie tak do końca wszystko oczywiście, bo na samym początku naszym zadaniem będzie tylko skopiowanie i wklejenie kodu w odpowiednie miejsce, ale od czegoś trzeba zacząć. Na duży plus zasługuje oprawa wizualna tej platformy. Podczas gdy my piszemy małe fragmenty kodu to platforma CodinGame dokonuje animacji tego co napisaliśmy. Naprawdę ciężko to opisać słowami, najlepiej samemu zrobić tak ze 2 – 3 zadanka i ocenić czy nam się to podoba. Do wyboru mamy sporo języków programowania w tym JavaScript oraz TypeScript. Naprawdę zachęcam do spróbowania.
Codewars
7.Codewars co prawda trochę różni się od swoich poprzedników, ale postanowiłem mimo wszystko umieścić ją na tej liście. Nie mamy tutaj żadnej fabuły czy też kolorowych animacji. Codewars to tak naprawdę zbiór zadań do rozwiązywania. Zrobiony jednak naprawdę z głową. Do naszej dyspozycji są oczywiście także zadania z JavaScript. Są one podzielone na 8 poziomów trudności, więc jest ich naprawdę sporo. Podobnie jak w CSS Battle mamy tutaj rankingi, więc wraz z rozwiązywaniem kolejnych zadań zdobywamy punkty i poprawiamy naszą rangę. Po rozwiązaniu każdego zadania możemy zobaczyć jak dany problem rozwiązali inni gracze. Rozwiązania są punktowane, więc mamy możliwość zobaczyć jak wygląda najwyżej punktowane rozwiązanie i porównać je do naszego. Jest to naprawdę świetny sposób na to, żeby poszerzać swoją wiedzę i sugeruję często z tej opcji korzystać.
Service Workies
8.Service Workies jest grą służącą do zapoznania się z podejściem PWA a przede wszystkim z Service Worker-em. Za dużo jednak się nie nagramy. Mamy tutaj do czynienia bardziej z opowiadaną historią, którą śledzimy poprzez ciągłe klikanie Dalej. Główny bohater, wyglądający jak czarnoksiężnik z wioski Majów, podczas swojej historii opowiada nam o tym jak działa Service Worker. We wszystko wplecione są oczywiście czary i czarne moce. Bardzo ładna graficznie i ciekawa opcja dla wszystkich zaczynających swoja przygodę z PWA.
Flexbox Zombies
9.Flexbox zombie wprowadza nas w świat CSS Flexbox. Tutaj z kolei czekają na nas złowrogie zombie, które musimy pokonać z pomocą naszego zamaskowanego bohatera wyposażonego w łuk i strzały. Gra jest całkiem przyjemna, niemal na każdym kroku dostaje wskazówki od naszego brodatego i również zamaskowanego mistrza. Aż dziwne, że motyw zombie pojawił się tylko raz w tym zestawieniu. Czyżby założenie baw się i programuj nie dotyczyło tej grupy bohaterów 🤔
Untrusted
10.Minimalistyczna gra w której musimy korzystać z JavaScript w celu pokonywania kolejnych labiryntów. Część kodu której nie powinniśmy dotykać jest zablokowana. Możemy tylko umieszczać nasze skrypty w wyznaczonych do tego miejscach.
Checkio
11.Checkio pozwala nam na przetestowanie naszych umiejętności w dwóch językach – TypeSript oraz Python. Interfejs jest bardzo ładny, ale już sama gra polega po prostu na rozwiązywaniu kolejnych zadań w edytorze tekstowym. W grze poruszamy po różnych wyspach. Na każdej wyspie spotkamy zadania o różnym stopniu trudności. Pomysł fajny, wygląd też cieszy oko – zdecydowanie warto spróbować.
Codingfantasy
12.Kolejna porcja gier, których celem jest poszerzenie naszej wiedzy z zakresu CSS. Do naszej dyspozycji mamy grę opartą na Flexbox – Flexbox Adventure oraz Grid – Grid Attack.
Knights of the Flexbox table
13.Rycerze stołu Flexboxa 🙂. Gra, w której możesz pomóc Sir Fredericowi Flexboxowi i jego przyjaciołom odkryć skarby ukryte w lochach Tailwind CSS. Tak więc poznamy nie tylko CSS Flexbox, ale również będziemy mieli okazję zaznajomić się z frameworkiem Tailwind CSS.
JSRobot
14.Bardzo prosta gra służąca rozwojowi naszych podstawowych umiejętności JavaScript. Naszym celem jest sterowanie małym robotem i wykonywanie przygotowanych dla niego misji za pomocą komendy kodu JavaScript.
Elevator Saga
15.Kolejna gra skrojona pod naukę JavaScript. Tym razem będziemy musieli bardziej skupić się na logice niż na poruszaniu element. Celem gry jest napisanie kodu, za pomocą którego winda będzie w stanie przewieźć ludzi między piętrami w ściśle określonym czasie lub warunkach.
Screeps
16.Gra skierowana do bardziej doświadczonych programistów JavaScript. Aby kontrolować kolonię w świecie wypełnionym przez Ciebie i innych graczy, będziesz programować AI swojej jednostki za pomocą JavaScript. Programowalny świat żyje nieprzerwanie 24/7 w czasie rzeczywistym, nawet gdy jesteś offline 🤯
CSS Speedrun
17.Niezwykle proste narzędzie, za pomocą którego przetestujemy nasze umiejętności dotyczące selektorów CSS. Gra posiada 10 zadań (poziomów trudności) i licznik, który dodatkowo mobilizuje nas do tego, aby osiągnąć jak najlepszy czas ⌛.
Podsumowanie
Każdy sposób jest dobry na szlifowanie swoich developerskich umiejętności. Wymienione powyżej gry mogą być ciekawą odskocznią od niekiedy nużących tutoriali czy dokumentacji. Nie korzystałbym z takich gier do nauki programowania a jedynie do przetestowania już nabytych umiejętności. Ale już więcej czasu nie zajmuję – baw się i programuj 🙂
Masz uwagi lub sugestie do tego wpisu?
Przejdź na Discord