346
Rozdział 8.
Planowanie kodu HTML gry
Tworzenie strony HTML: postać ogólna
To plan ataku mającego doprowadzić do zbudowania strony HTML dla gry w okręty.
Formularz HTML,
w którym użytkownik
wprowadza dane.
W tle strony umieszczamy
obraz tła, który
zapewni grze wygląd
fosforyzującego na zielono
ekranu radarowego.
Tabela HTML
umieszczona ponad
tłem tworzy planszę
gry, z której
będziemy korzystali
podczas rozgrywki.
Będziemy używali
tych obrazków, by
w miarę potrzeb
wyświetlać je
w tabeli.
Twoja wiedza zwietrzała?
Jeśli czujesz, że Twoja wiedza dotycząca języków
HTML i CSS nieco zwietrzała, skorzystaj
z książki Head First HTML with CSS & XHTML.
Edycja polska.
Na początku skoncentrujemy się na tle strony, co
będzie obejmowało zastosowanie obrazu tła oraz
umieszczenie na stronie obrazu siatki radaru.
Następnie utworzymy tabelę HTML i umieścimy ją
ponad obrazem tła. Każda komórka tabeli będzie
reprezentować jedno pole planszy do gry.
Kolejnym krokiem będzie dodanie elementu
formularza, w którym gracz wpisze ostrzeliwane
pole, np. A4. Dodamy także obszar, w którym
będą wyświetlane komunikaty, takie jak
Zatopiłeś
mój okręt!
I w końcu określimy, jak należy używać tabeli
HTML do wyświetlania na planszy obrazków
okrętów (w przypadku trafienia) oraz chybionych
strzałów.
1
2
3
4
Krok 1. Podstawowy kod HTML
Do roboty! Najpierw potrzebujemy strony
HTML. Zaczniemy od utworzenia prostej
strony zgodnej ze standardem HTML5;
dodamy do niej style CSS określające obraz
tła. Na stronie wewnątrz elementu
<body>
ulokujemy element
<div>
, w którym z kolei
umieszczona zostanie siatka gry.
Przejdź na następną stronę, na której
przedstawiliśmy wyjściowy kod HTML i CSS.
Spokojnie
jesteś tutaj
347
Łączenie wszystkiego w całość
<!doctype html>
<html lang=”pl”>
<head>
<meta charset=”utf-8”>
<title>Gra w okrÚty</title>
<style>
body {
background-color: black;
}
div#board {
position: relative;
width: 1024px;
height: 863px;
margin: auto;
background: url(”board.jpg”) no-repeat;
}
</style>
</head>
<body>
<div id=”board”>
</div>
<script src=”battleship.js”></script>
</body>
</html>
To jest zwyczajna
strona WWW.
Chcemy, by plansza do gry pozostawała
w środku strony, dlatego szerokość
ustawiamy na 1024 piksele (bo tyle
wynosi szerokość planszy), a marginesom
przypisujemy wartość auto.
Chcemy, żeby tło tej
strony było czarne.
To właśnie tutaj dodajemy do strony
obraz board.jpg — będzie on stanowił
tło elementu <div> o identyfikatorze
board. Element ten jest umiejscowiony
względnie, by można było umiejscowić
także tabelę, którą w następnym kroku
dodamy wewnątrz elementu <div>.
Na stronie umieścimy
tabelę pełniącą rolę planszy
do gry oraz formularz,
w którym użytkownik
będzie wprowadzał dane.
Kod JavaScript umieścimy w pliku
battleship.js. Już teraz możesz
utworzyć pusty plik o tej nazwie.
Nie ociągaj się — wpisz powyższy kod (lub pobierz z serwera FTP wydawnictwa Helion),
zapisz go w pliku
battleship.html
, a następnie wyświetl w przeglądarce.
Wynik jazdy próbnej przedstawiliśmy poniżej.
A tak wygląda nasza
strona na obecnym
etapie prac.
Jazda próbna
348
Rozdział 8.
Tworzenie kodu HTML strony
Krok 2. Tworzenie tabeli
Druga w kolejce jest tabela. Nałożymy ją na siatkę widoczną na obrazie tła, co zapewni
możliwość wyświetlania na planszy obrazków reprezentujących trafione okręty oraz
chybione strzały. Każda komórka tabeli (bądź też, jeśli pamiętasz język HTML, każdy
element
<td>
) zostanie umieszczona bezpośrednio ponad odpowiadającą jej komórką
tabeli widocznej na obrazie tła. Oto cała sztuczka: każda komórka tej tabeli HTML
będzie miała unikalny identyfikator, zatem będziemy mogli modyfikować jej wygląd
za pomocą języków CSS i JavaScript.
<div id=”board”>
<table>
<tr>
<td id=”00”></td><td id=”01”></td><td id=”02”></td><td id=”03”>
</td><td id=”04”></td> <td id=”05”></td><td id=”06”></td>
</tr>
<tr>
<td id=”10”></td><td id=”11”></td><td id=”12”></td><td id=”13”></td>
<td id=”14”></td> <td id=”15”></td><td id=”16”></td>
</tr>
...
<tr>
<td id=”60”></td><td id=”61”></td><td id=”62”></td><td id=”63”></td>
<td id=”64”></td><td id=”65”></td><td id=”66”></td>
</tr>
</table>
</div>
Każda komórka siatki
odpowiada elementowi
<td> tabeli.
Każdy identyfikator
reprezentuje położenie
komórki w siatce. A zatem
lewa górna komórka ma
identyfikator „00”, a prawa
dolna — identyfikator „66”.
W grze wiersze są reprezentowane
przez litery (A, B, C itd.), jednak
w identyfikatorach litery te zostaną
zastąpione odpowiadającymi im cyframi
(0, 1, 2 itd.) Dlatego też pierwszy wiersz
siatki jest teraz oznaczony przez cyfrę
0 (reprezentującą A), a ostatni przez 6
(reprezentującą G).
Ta komórka ma
identyfikator „66”.
Tabela zostaje umieszczona wewnątrz elementu
<div> o identyfikatorze „board”.
Upewnij się, że każdy
element <td> otrzymał
odpowiedni identyfikator
odpowiadający jego
położeniu w siatce.
Pominęliśmy tutaj resztę wierszy,
by ochronić kilka drzew, jednak
jesteśmy pewni, że będziesz
potrafił sam je uzupełnić.
Ta komórka ma
identyfikator „60”.
Poniżej zamieściliśmy kod HTML tabeli. Dodaj go pomiędzy znacznikami
<div>
.
Get Programowanie w JavaScript Rusz głową! now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
