• Post last modified:02/07/2020
  • Post Category:Inne
  • Post Comments:0 Komentarzy

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 front end-owego rzemiosła. Padło więc na gry – baw się i programuj 🙂

będę grał w grę
I tak wiesz co powiedział 🙂

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.

1. CSS Battle

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.

2. CSS Diner

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.

3. Grid Garden

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.

obrazek captain obvious

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.

4. Flexbox Froggy

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.

5. Flexbox Defense

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.

6. CodinGame

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.

7. Codewars

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ć.

8. Service Workies

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.

9. Flexbox Zombies

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 🤔

10. Untrusted

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.

11. Checkio

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ć.

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 🙂

Kamil Józwik

Front end developer👨‍💻 Autor małego narzędzia dla programistów - frontbook.dev oraz autor kolejnych postów na tym blogu. Ulubiony stack to React wraz z TypeScript oraz wszystko co "nowe" w tym pięknym dynamicznym front end-owym świecie 🙂

Dodaj komentarz