Programowanie w JavaScript Rusz głową!

350

Rozdział 8.

Dodawanie do gry stylów CSS

Dodawanie stylów

Gdybyś teraz wyświetlił stronę (zrób to!), większość elementów będzie

umieszczona w niewłaściwych miejscach i będzie mieć nieodpowiednią

wielkość. Potrzebujemy zatem kodu CSS, który rozmieści elementy

w odpowiednich miejscach i zadba o to, by wszystkie elementy, takie jak

komórki tabeli, miały odpowiedni rozmiar, dostosowany do obrazu tła.

Aby rozmieścić elementy we właściwych miejscach, skorzystamy

z możliwości ich pozycjonowania, jakie daje CSS. Element

<div>

o identyfikatorze

ĵERDUGĵ

ulokowaliśmy z wykorzystaniem umiejscawiania

względnego, dzięki czemu teraz możemy precyzyjnie umieścić obszar

powiadomień, tabelę oraz formularz w dowolnych, ale precyzyjnie

określonych miejscach elementu

<div>

o identyfikatorze

ĵERDUGĵ

.

Zacznijmy od obszaru powiadomień — elementu

<div>

o identyfikatorze

ĵPHVVDJH$UHDĵ

. Jest on zagnieżdżony wewnątrz elementu

<div>

o identyfikatorze

ĵERDUGĵ

, a chcemy, by był widoczny w samym lewym,

górnym rogu planszy do gry.

body {

background-color: black;

}

div#board {

position: relative;

width: 1024px;

height: 863px;

margin: auto;

background: url(”board.jpg”) no-repeat;

}

div#messageArea {

position: absolute;

top: 0px;

left: 0px;

color: rgb(83, 175, 19);

}

Obszar powiadomień

umieszczamy

w lewym, górnym

wierzchołku planszy.

Element <div>

o identyfikatorze „board”

jest umiejscowiony

w sposób względny,

zatem wszystkie

elementy w nim

zagnieżdżone mogą być

umiejscawiane względem

niego.

Chcemy, by obszar powiadomień

został umiejscowiony w lewym,

górnym wierzchołku planszy do gry.

Element <div> „messageArea” jest zagnieżdżony

wewnątrz elementu <div> o identyfikatorze „board”,

więc jego położenie może być określane względem

elementu <div> planszy. A zatem zostanie on

umieszczony 0 pikseli poniżej górnej krawędzi

elementu <div> planszy oraz 0 pikseli na prawo

od jego lewej krawędzi.

CELNE SPOSTRZEŻENIA

Q

Reguła ĵSRVLWLRQUHODWLYHĵ

umieszcza element w jego normalnym

położeniu, wynikającym z rozkładu

elementów strony.

Q

Reguła ĵSRVLWLRQDEVROXWHĵ

rozmieszcza element względem położenia

najbliższego w hierarchii nadrzędnego

elementu rozmieszczonego względnie

(ĵSRVLWLRQUHODWLYHĵ).

Q

Właściwości top oraz OHIW pozwalają

określić wielkość przesunięcia elementu

w pionie oraz poziomie od jego domyślnego

położenia i są wyrażone w pikselach.

jesteś tutaj

351

Łączenie wszystkiego w całość

Możemy także określić położenie tabeli oraz formularza, które są umieszczone

wewnątrz elementu

<div>

o identyfikatorze

ĵERDUGĵ

. Także tym razem skorzystamy

z umiejscawiania bezwzględnego, które pozwoli precyzyjnie określić położenie elementów.

Poniżej przedstawiliśmy pozostałe reguły CSS.

body {

background-color: black;

}

div#board {

position: relative;

width: 1024px;

height: 863px;

margin: auto;

background: url(”board.jpg”) no-repeat;

}

div#messageArea {

position: absolute;

top: 0px;

left: 0px;

color: rgb(83, 175, 19);

}

table {

position: absolute;

left: 173px;

top: 98px;

border-spacing: 0px;

}

td {

width: 94px;

height: 94px;

}

form {

position: absolute;

bottom: 0px;

right: 0px;

padding: 15px;

background-color: rgb(83, 175, 19);

}

form input {

background-color: rgb(152, 207, 113);

border-color: rgb(83, 175, 19);

font-size: 1em;

}

Element <table> umieściliśmy 173 piksele

na prawo od lewej krawędzi planszy oraz

98 pikseli poniżej jego górnej krawędzi,

zatem dokładnie pokrywa się z siatką

narysowaną na obrazie tła.

Każdy element <td> ma ściśle określoną

szerokość i wysokość, więc komórki

elementu <table> dokładnie pokrywają się

z komórkami na narysowanej siatce.

Element <form> umieszczamy w prawym,

dolnym rogu planszy. Nieznacznie przesłania

dolne cyfry, ale to nie przeszkadza (i tak

wiemy, jakie to cyfry). Dodatkowo nadaliśmy

mu ładny zielony kolor, który doskonale

pasuje do obrazu radaru.

I w końcu trochę stylów określających

wygląd dwóch elementów <input>, by

pasowały do tematu graficznego naszej gry.

I to już koniec!

352

Rozdział 8.

Zastosowanie CSS do wyświetlania trafień i pudeł

Krok 4. Wyświetlanie celnych i chybionych strzałów

Plansza do gry wygląda rewelacyjnie, nie sądzisz? Jednak wciąż musimy określić,

w jaki sposób będziemy na planszy wizualnie oznaczać celne oraz chybione strzały,

czyli jak dodawać do odpowiednich komórek planszy obrazki

ship.png oraz miss.png.

Na razie zajmiemy się określeniem, jak przygotować odpowiedni kod HTML

lub CSS, nieco później użyjemy tej techniki w autentycznym kodzie.

W jaki sposób będziemy wyświetlać na planszy obrazki

ship.png oraz miss.png?

Bardzo prostym sposobem może być wyświetlenie odpowiedniego obrazka jako

tła elementu

<td>

, przy użyciu stylów CSS. Spróbujmy zaimplementować to

rozwiązanie. Zaczniemy od utworzenia dwóch klas. Pierwsza z nich, o nazwie

hit

,

będzie wyświetlać w tle elementu obraz

ĵVKLSSQJĵ

, natomiast druga,

PLVV

, będzie

wyświetlać w tle elementu obraz

ĵPLVVSQJĵ

. Oto kod CSS definiujący te klasy.

Jazda próbna

Nadszedł czas na kolejne sprawdzenie postępów w pracy nad grą. Wpisz kody

HTML i CSS w pliku HTML, zapisz go, a następnie wyświetl stronę w przeglądarce.

To właśnie powinieneś zobaczyć.

.hit {

background: url(”ship.png”) no-repeat center center;

}

.miss {

background: url(”miss.png”) no-repeat center center;

}

Tabela dokładnie pokrywa się

z graficzną siatką, choć nie

możesz jej zobaczyć (bo jest

niewidoczna).

Elementy formularza są

gotowe do wprowadzania

współrzędnych

strzałów, choć dopóki

nie napiszemy kodu

JavaScript, nic się nie

będzie działo.

ship.png

miss.png

Każda z tych

reguł wyświetla

w tle wybranego

elementu jeden,

wyśrodkowany

obrazek.

Jeśli element należy do klasy hit, w jego tle zostanie wyświetlony

obrazek ship.png. Jeśli z kolei element będzie należeć do klasy miss,

w jego tle zostanie wyświetlony obrazek miss.png.