Zadanie: JavaScript DOM i ogród ;)

utworzono: 5 sierpnia 2023

Ten artykuł jest częścią wyzwania Summer Of Code i stanowi podsumowanie piątego już tygodnia wakacyjnego challengu!

W ciągu ostatnich 5 dni, zaczynając od zera, nauczyliśmy się tworzyć własne skrypty w JS, wykorzystując podstawy programowania i manipulację DOM. Czas na praktyczne podsumowanie!

Przypominam, że na blogu znajdziecie wpis Książki do JavaScript warte polecenia – w tym pozycje darmowe.

Jeśli chcecie rozwijać JS do poziomu „wyższego” to mam dla was 2 ciekawe wpisy: tutorial JS Garden oraz Sieci neuronowe w JavaScript.

PROJEKT KOŃCOWY:

zadanie Ogród w JavaScript

Twoim zadaniem jest stworzyć aplikację symulującą hodowlę roślin aka ogród – symulator w JavaScript. Aplikacja powinna pozwolić użytkownikowi na hodowanie wirtualnych roślin, dbanie o nie poprzez podlewanie i nawożenie.

Utrwalamy tym samym umiejętności, takie jak:

  • Składnia języka: zmienne, instrukcje warunkowe, pętle, funkcje
  • Manipulacja DOM (zmiana wyglądu i ilości emoji roślin)
  • Obsługa zdarzeń (reagowanie na kliknięcia użytkownika na różne emoji)
  • Dzielenie logiki na pozadania (zarządzanie cyklem życia roślin)

Wymagane funkcje: ogrodu

  1. Wybór rośliny: Na początku gry, użytkownik ma do dyspozycji jedną roślinę, reprezentowaną przez emoji.
  2. Podlewanie: Użytkownik może podlać roślinę, klikając na emoji kropli wody. Każde podlanie zwiększa rozmiar rośliny (zmienia rozmiar czcionki emoji rośliny). Jeśli roślina zostanie podlana więcej niż określoną liczbę razy (np. 5, 10), zamiera i zmienia się w emoji brązowych liści . Mogą być też inne objawy – zmiana tła grządki czy otoczenie emoji kroplami jako znak przelania.
    W przypadku podlewania więcej niż jednej rośliny, ilość wody jest równomiernie rozdzielana między wszystkie rośliny.
  3. Nawożenie: Użytkownik może dodać nawóz do rośliny, klikając na emoji nawozu. Każde dodanie nawozu powoduje, że na grządce pojawia się dodatkowa roślina. Jednakże, użytkownik nie może mieć więcej niż 10 roślin na grządce.
  4. Ratowanie: Jeśli roślina zamarła, użytkownik może ją uratować, klikając na emoji karetki. Roślina wtedy „odżywa” i zaczyna od nowa. Jeśli jest więcej niż jedna roślina, karetka ratuje wszystkie zmarłe rośliny.
  5. Ścinanie: Użytkownik może ściąć roślinę, klikając na emoji siekiery. Użytkownik musi podać numer rośliny, którą chce ściąć. Jeśli jest tylko jedna roślina, jest ona „ożywiana” i ilość wody dla tej rośliny jest resetowana do 0.
  6. Ograniczenia: Rozmiar fonta dla każdej rośliny nie może przekroczyć 60% wysokości ekranu. Gdy roślina osiągnie maksymalną wysokość, powinien się pojawić komunikat „Roślina osiągnęła maksymalną wysokość”.

PSEUDOKOD

Pseudokod – opis słowny z większą ilością detali, który być może się przyda przy rozwiązywaniu zadania.

-czyli: jak to można podzielić i co każda funkcja powinna wówczas robić?

Nazwy funkcji zupełnie roboczo. Pamiętaj, że najlepiej trzymać się pisania kodu po angielsku!

1. Funkcja utworzRosline(): 

   - Stwórz grządke z jedną rośliną

2. Funkcja podlejRosline(): 

   - (*)Sprawdź, czy obecny rozmiar rośliny nie przekracza 60% wysokości ekranu, jeśli tak, nie zwiększaj rozmiaru rośliny i wyświetl komunikat

   - Zwiększ rozmiar rośliny
   
   - Zwiększ licznik, że roślina była podlana

   - Jeśli roślina zostanie podlana więcej niż pięć razy, zmień jej stan na "umarła"

   - Jeśli na grządce jest więcej niż jedna roślina, podziel ilość wody równomiernie między wszystkie rośliny

3. Funkcja dodajNawoz(): 

   - Sprawdź, czy na grządce jest mniej niż 10 roślin, jeśli tak, dodaj nową roślinę do grządki

4. Funkcja uratujRosline(): 

   - Jeżeli roślina jest "umarła", zmień jej stan na "żywa" i zresetuj licznik wody do 0

5. Funkcja scinajRosline(): 

   - Usuń roślinę z grządki

Pomysły na rozszerzenia

– Wprowadzenie wyboru rośliny, zamiast domyślnej rośliny, użytkownik ma wybór emoji.

– Podmiana rośliny: Użytkownik może podmienić roślinę, wprowadzając indeks rośliny na grządce i wybierając nowe emoji z listy selektora. Nowa roślina zastępuje starą i zaczyna rosnąć od nowa, a licznik wody dla tej rośliny jest resetowany do 0.

– inne wasze pomysły!

Możecie też dodać opis funkcjonalności na początku jako instrukcję gry czy w README.md repozytorium.

Zwróć uwagę, by nie kopiować mojego opisu, a napisać własnymi słowami, co zawiera projekt tj. jakie funkcjonalności. Tutaj znajdziesz: Jak napisać dobre README?.

Do kodu!

javascript