Upiększamy stronę za pomocą CSSa

W dzisiejszym poście poznamy podstawy CSS (ang. Cascading Style Sheets) czyli języka, za pomocą którego sprawimy, że strona internetowa naszej gry Szybkie Palce! będzie wyglądać dużo lepiej niż obecnie.

Gra Szybkie Palce! (link: Piszemy grę) jest już skończona jeżeli chodzi o mechanikę gry. Jednak nie wygląda ona zbyt atrakcyjnie wizualnie. A jak wiadomo, duża część przyjemności z grania to ładna grafika.

Dla przypomnienia, nasz pomysł na grę wygląda następująco: dwóch graczy siada przy jednej klawiaturze i wchodzą na stronę naszej gry. Gracze będą musieli wykazać się refleksem i w odpowiednim momencie nacisnąć klawisz na klawiaturze komputera. Ten który zrobi to pierwszy zdobywa punkt. Ten który zdobędzie 3 punkty wygrywa grę. Moment naciśnięcia klawisza będzie wybierany losowo oraz dodatkowo zabezpieczymy się przed nieuczciwymi graczami, którzy mogliby chcieć bezmyślnie naciskać klawisz cały czas.

Gra będzie napisana głównie w języku JavaScript i zamieszczona na stronie HTML a do jej graficznego uatrakcyjnienia skorzystamy z języka styli CSS. Kod gry jest dostępny na stronie github.com. Cała gra znajduje się w jednym pliku index.html co ułatwi jej tworzenie.

Zachęcam do zapoznania się z poprzednimi postami w cyklu Szybkie Palce!

• Piszemy grę
• Gra Szybkie Palce! Funkcja RozpocznijGre.
• Gra Szybkie Palce! Obsługa pojedynku.
• Gra Szybkie Palce! Wyłonienie zwycięzcy

W grę można już pograć. Jest dostępna na stronie: Szybkie Palce!

Nasza gra jest bardzo prosta, jest to jedna strona HTML i obecnie przedstawia tak jak na poniższym obrazku:

Gra nie jest skomplikowana, więc grafika do niej też będzie prosta. Dodamy tło oraz ładnie rozmieścimy poszczególne elementy interfejsu (czyli właśnie wyglądu).

Mechanika gry Szybkie Palce! polega na sprawdzeniu szybkości naciskania klawiszy, czyli który z graczy ma lepszy refleks. Coś jak pojedynki strzeleckie na dzikim zachodzie. I właśnie taki motyw wybiorę dla tła.

Darmowe grafiki w internecie

Jeżeli nie mamy talentu graficznego i nie stworzymy swoich własnych grafik, a także nie mamy funduszy, aby zatrudnić profesjonalnego grafika, możemy jeszcze posiłkować się zasobami, które znajdziemy w internecie.

Ja pisząc tego bloga do każdego posta dodaje tak zwany feature image, czyli obrazek, który wyświetla się zaraz obok posta (albo nad nim) w zależności od sytuacji. Obrazki te pobieram ze strony pexels.com, która udostępnia je za darmo i umożliwia łatwe ich wyszukiwanie.

Niestety obrazków nie jest zbyt dużo i poszukiwanie tła rodem z westernu dla gry Szybkie Palce! zakończyło się niepowodzeniem. Udało mi się znaleźć kilka innych stron, które pojawiły się gdy wyszukałem free background images w Googlu (link: https://www.google.com/search?q=free+background+images).

Tak trafiłem na stronę pixabay.com gdzie znalazłem fajny rysunek pojedynku pomiędzy kowbojami.

Nie jest to moje wymarzone tło do gry, także jeśli umiesz narysować, albo znaleźć inne tło z pojedynkiem kowbojów będę wdzięczny za kontakt 🙂

Licencja tego obrazku to CC0 Creative Commons, czyli mogę jej użyć bez płacenia autorowi i pośrednikowi w postaci strony pixabay.

Bardzo ważne jest, abyście zwracali uwagę na licencję zasobów, które pobieracie z internetu i wykorzystujecie u siebie. Szanujmy pracę innych i jeśli tego od nas wymagają zapłaćmy im gdy ich praca nam się podoba.

Język CSS

Przejdźmy więc do konkretów. Język CSS (ang. Cascading Style Sheets) służy do zmiany wyglądu poszczególnych elementów strony. Możemy na przykład zmienić kolor czcionki czy jej wielkość.

Możemy tekst wyrównać do lewej strony, albo do prawej.

Pełna lista możliwości jest bardzo duża a sam język ciągle się rozwija. Kiedyś zajmiemy się nim dokładniej, ale dziś poznamy potrzebne podstawy.

Język CSS opiera się na założeniu, że strony HTML składa się z tak zwanych bloków. Jeżeli wyobrazimy sobie ten akapit (z szarym tłem) jako całość to jest to jeden blok. Cała strona składa się z wielu takich bloków, mogą one być ułożone jeden pod drugim, albo jeden obok drugiego i w wielu innych konfiguracjach. Każdy blok zajmuje też określoną liczbę pikseli na ekranie. Zmieniając styl danego bloku możemy sprawić że będzie on szerszy lub wyższy. Możemy sterować różnymi parametrami całego bloku.

Ważnym elementem języka CSS są tak zwane selektory. Pozwalają na wybór bloków strony, którym ustawimy styl. Dostępne są różne rodzaje selektorów:

Elementy HTML (np. “body”, “h1”, “input”)

Ustawiony styl będzie zastosowany do wszystkich elementów danego typu

ID (np. “#dziennikZdarzen”)

Rozpoczyna się od znaku hash (#) i pozwala ustawić styl dla konkretnego elementu strony, który musi mieć podany dokładnie taki sam unikalny ID

Klasy (np. “.kolorowyTekst”)

Rozpoczyna się od kropki (.) i pozwala ustawić styl dla listy elementów, które mają przypisaną klasę (klasa w przeciwieństwie do ID nie musi być unikalna)

Pseudo klasy (np. “:hover”)

CSS posiada gotowe klasy, które możemy wykorzystać. Przeglądarka sama nadaje takie klasy elementom HTML, dzięki temu niektóre rzeczy dzieją się automatycznie, np. klasa hover zostaje nadana elementowi, nad którym obecnie znajduje się kursor myszki. Możemy to wykorzystać do budowania przycisku, któremu zmieniamy wygląd gdy użytkownik wskaże go myszką

Łączenie styli CSS

Selektory CSS możemy ze sobą łączyć za pomocą przecinków (wtedy wybieramy wiele elementów) lub kropek (wtedy ograniczamy wybór elementu do np. klasy “active”). Dzięki temu dany styl możemy stosować do większej liczby elementów. Należy jednak pamiętać, że selektory działają globalnie dlatego dobrą praktyką jest stosowanie bardzo małych klas, które opisują jedną rzecz i łączenie tych klas dla konkretnych elementów na stronie.

Dodatkowo wiele selektorów może wskazywać na ten sam element (np. raz za pomocą selektora ID, raz za pomocą selektora KLASA, a raz w samym elemencie). W takim przypadku końcowy efekt dla danego elementu zależy od specyficznej konfiguracji tych reguł. Zajmiemy się tym dokładniej przy innej okazji.

Dodanie tła do strony HTML

Za pomocą języka CSS możemy ustawiać styl dla różnych elementów strony HTML. Możemy w szczególności ustawić styl dla całej strony wykorzystując selektor body czyli całą stronę.

Pierwsza rzecz, o której musimy pamiętać to dodanie do naszego projektu pliku z grafiką tła. W naszym przypadku będzie to plik tlo.png, który znajduje się w folderze obrazki.

Zależy nam na tym, żeby obrazek był wyświetlany na pełnym ekranie, czyli zajmował 100% strony. Osiągamy to głównie tym, że nasz obrazek tła ma dużą rozdzielczość (1280 x 940 pikseli). Dodatkowo jest też trochę rozciągnięty dzięki zastosowaniu odpowiednich reguł CSS. Jednak jeśli rozdzielczość ekranu będzie dużo większa niż naszego obrazka, to dookoła niego pojawi się kolor określony w regule background-color.

Przycisk z obrazka

Dzięki zastosowaniu CSS możemy też ze zwykłego obrazka stworzyć animowany przycisk, który zmienia kolor po najechaniu na niego myszką przez użytkownika. Jest to możliwe dzięki temu, że przeglądarki nadają elementom dynamicznie różne pseudo-klasy. Jedną z nich jest hover. Element ma tę klasę gdy znajduje się nad nim kursor myszki. Wystarczy wtedy w CSS określić regułę rozjaśniania, animacji lub innego efektu.

W naszym przypadku obrazek z napisem “START” domyślnie posiada lekko szare kolory. Jest to możliwe dzięki regule filter: grayscale(50%). Czyli domyślnie przycisk jest szary w 50%. Po najechaniu na niego myszką uruchamiana jest reguła hover, która sprawia że przycisk jest szary w 0% (czyli jest kolorowy).

Dodatkowo przycisk ma domyślną klasę active. Dzięki temu możliwe jest jego wyłączenie po kliknięciu przez użytkownika (usuwamy klasę active z przycisku) i uniemożliwienie kliknięcia drugi raz(sprawdzamy czy przycisk ma klasę active). Przy okazji dla przycisku obrazka, który nie ma klasy active ustawiamy regułę ze skalą szarości 100% (czyli przycisk staje się czarno biały).

Inne zmiany na stronie

Poza wspomnianymi już zmianami gra Szybkie Palce! ma też tytuł i przycisk START na środku oraz dziennik zdarzeń na dole po lewej. Informacje dla graczy mają takie same tło jak cała strona, więc mamy wrażenie że tekst wyświetla się bezpośrednio na obrazku tła. Został też zmieniony kolor tekstu na brązowy, co bardziej odpowiada ogólnej kolorystyce gry.

Dodatkowo dźwięki w grze również uległy zmianie. Wprowadzony został dźwięk w tle, który odtwarzany jest cały czas kiedy gracze są na stronie. Wszystkie dźwięki zostały w zmienione na takie w kontekście westernu i pojedynku kowbojów.

Różne przeglądarki

Tworząc strony internetowe należy wziąć pod uwagę, że nasi użytkownicy będą korzystać z wielu różnych przeglądarek internetowych  i to w różnych wersjach. Przeglądarka to np. Internet Explorer, Edge, Firefox czy Chrome. Każda z tych przeglądarek trochę inaczej interpretuje różne rzeczy. Z językiem CSS jest tak, że to samo polecenie może inaczej wyglądać na dwóch różnych przeglądarkach.

Dlatego też stosuje się nadmiarowość. Upraszczając, nie wystarczy napisać raz: “ustaw przycisk w centrum strony”, ale trzeba napisać: “ustaw przycisk w centrum strony w Firefoxie”, “ustaw przycisk w centrum strony w Chrome” i tak dalej. Niestety nie jest to zbyt intuicyjne i wymaga od programistów trochę pracy.

Na szczęście są narzędzia (IDE) które bardzo to upraszczają i dbają o dodawanie instrukcji dla poszczególnych przeglądarek.

Dlatego też zachęcam do zainstalowania IDE które znacząco ułatwiają programowanie, niezależnie od stosowanego języka.

Na koniec

Język CSS jest bogatszy i posiada dużo więcej funkcji niż te opisane w tym poście. Dodatkowo przeglądarki ciągle się rozwijają i my jako programiści mamy dostępne coraz fajniejsze efekty.

W tym poście chciałem pokazać, że atrakcyjny wygląd można uzyskać znając zaledwie podstawy CSSa. Dzięki temu nasza gra może przyciągnąć jeszcze więcej osób. Zapraszam do pogrania w grę i przekonania się osobiście 🙂

Gra jest dostępna pod linkiem: Szybkie Palce!

Zbliżamy się już do końca pracy nad samą grą, następnym krokiem jest jej wypromowanie. O tym w kolejnych postach.