DressCode: Snake

Start: 6 maja 2016

Termin nadsyłania rozwiązań: 10 czerwca 2016

Czas, który będzie Ci potrzebny na rozwiązanie całego zadania: 16 godzin

Po tygodniach ciężkiej, aczkolwiek (mamy nadzieję :) ) ciekawej i inspirującej pracy, czas na trochę rozrywki! Wybór nie jest może największy, ale co powiesz na partyjkę Węża?

Pewnie już się domyślasz, co jest kolejnym zadaniem. Tym razem Twoim celem będzie napisanie gry Wąż. W tym celu będziesz musiała zastosować metodologię programowania zdarzeniowego—czyli w prostszych słowach: napiszesz kod, który umie zareagować na „zdarzenia” niezależne od niego—np. po naciśnięciu przez użytkownika danego klawisza wykona określoną czynność.

Co to jest wąż?

Otóż wąż to jedna z najprostszych—a jednocześnie kiedyś najbardziej popularnych—gier komputerowych (nie wierzysz? zapytaj rodziców). W grze gracz steruje długim i cienkim stworzeniem (podobnym do węża), które porusza się po planszy, zbierając jedzenie. Wąż stara się NIE uderzyć własną głową o rozstawione na planszy przeszkody, a także o kawałek własnego ogona (w przeciwnym razie gra się kończy). Problem w tym, że im więcej wąż „zje”, tym szybciej się porusza, a także tym dłuższy robi się jego ogon, i tym trudniej nim sterować—zresztą przekonaj się sama :-)

W naszym przykładzie wężem steruje się za pomocą klawiszy strzałek (lewo, prawo).

Co będzie Ci potrzebne

Swoją grę będziesz pisać w języku JavaScript i będziesz potrzebować solidnej znajomości jego podstaw. Dlatego, jeśli nie przerobiłaś przy okazji poprzednich zadań kursu JavaScript, zachęcamy Cię do zrobienia tego teraz. Do tego zadania kursy najlepiej będzie przerobić w całości (a nie tylko wybrane sekcje). Jeśli znasz język angielski (na poziomie VI klasy szkoły podstawowej powinno wystarczyć), polecamy Ci kurs CodeCademy. Jeśli wolisz kurs w języku polskim, polecamy kurs Khan Academy. Kurs jest dostępny po polsku—jeśli wyświetla Ci się po angielsku, poszukaj opcji zmiany języka! Kursy są obszerne, dlatego zarezerwuj sobie na to co najmniej 8 godzin.

Powinnaś też znać pojęcie: układ współrzędnych (a dokładnie—co to „współrzędna X” i „współrzędna Y”). Jeśli nie wiesz co to, nie martw się—ten krótki film wszystko Ci wyjaśni.

Zwróć jednak uwagę, że w programowaniu, a więc także w naszej grze Wąż, układ współrzędnych jest obrócony do góry nogami. Punkt (0, 0) to lewy górny róg i współrzędne X rosną w prawo, a Y—w dół.

Zadanie

Aby ułatwić Ci zadanie, przygotowaliśmy szkielet rozwiązania w postaci trzech plików. Pobierz na swój komputer następujące pliki (kliknij prawym przyciskiem na nazwę pliku i wybierz „zapisz jako…”—w efekcie plik powinien zapisać się na Twoim dysku):

snake.js

Twoim zadaniem będzie uzupełnienie pliku snake.js. W tej chwili znajdziesz w nim definicje czterech funkcji, które będą pomagać wężowi „poruszać się”. W naszym pliku te funkcje są puste—napisanie ich treści należy do Ciebie.

snake-framework.js

Pliku snake-framework.js nie musisz zmieniać—choć możesz oczywiście do niego zajrzeć, aby zobaczyć jak działają poszczególne funkcje. Ten plik zawiera funkcje i zmienne pomocne przy pisaniu gry Wąż.

Uwaga: Plansza jest swoistym układem współrzędnych i aby narysować na niej głowę / ogon węża, kamień lub wyczyścić pole, musisz przekazać do odpowiedniej funkcji współrzędne x oraz y. Nasz kod reprezentuje taką parę współrzędnych jako pojedynczy obiekt z właściwościami x oraz y. Poniżej zobaczysz przykłady, jak przekazywać ją do poszczególnych funkcji.

snake.html

Plik snake.html to dokument HTML, który definiuje przestrzeń, na której rysowana będzie plansza do gry i ruchy węża, a także element, w którym wyświetlany będzie aktualny wynik gry. Nie musisz go zmieniać.

Wskazówki

Na początku zadanie może wydawać się skomplikowane i dlatego warto je podzielić na małe kroki, które będą Cię zbliżać do rozwiązania i ostatecznej wersji gry. Poniżej jest kilka proponowanych przez nas wskazówek, które możesz zastosować:

Wysyłanie rozwiązań

Po napisaniu swojej gry Wąż wyślij nam rozwiązanie (zawartość Twojego pliku snake.js—pamiętaj, tylko ten plik powinnaś zmieniać!) przy użyciu tego formularza.

Wszystko jasne?

Jeśli masz jakieś wątpliwości, chcesz się dowiedzieć więcej o tym, jak działa kod, albo po prostu przydałaby Ci się podpowiedź w jakimś fragmencie zadania, to pamiętaj, że chętnie Ci pomożemy. Czekamy na Twoje pytania na naszym forum WebMuses Youth, a także pod adresem mailowym .

Powodzenia, trzymamy za Ciebie kciuki!

zespół DressCode