Programowanie w JavaScript Rusz głową!

386

Rozdział 8.

Testowanie kontrolera

Przekazywanie współrzędnych do kontrolera

W tym miejscu wszystko ostatecznie się połączy. Mamy już gotowy kontroler, który

wprost nie może się doczekać na współrzędne pola wskazanego przez użytkownika.

Musimy przekazać te współrzędne do kontrolera. A zatem, do roboty.

function handleFireButton() {

var guessInput = document.getElementById(”guessInput”);

var guess = guessInput.value;

controller.processGuess(guess);

guessInput.value = ””;

}

Jazda próbna

Już nie będzie więcej jazd próbnych. W końcu możesz zagrać w prawdziwą grę!

Upewnij się, że dodałeś cały nowy kod do pliku

battleship.js

, a następnie odśwież

w przeglądarce stronę

battleship.html

. Musisz pamiętać, że położenie okrętów jest na

razie podane na stałe, więc nie powinieneś mieć większego problemu z wygraniem.

Poniżej znajdziesz współrzędne, które zapewnią Ci zwycięstwo. Wpisz także kilka

niecelnych strzałów oraz parę nieprawidłowych współrzędnych.

A6

B6

C6

C4

D4

E4

B0

B1

B2

To są wygrywające

współrzędne pogrupowane

według okrętów. Nie trzeba

jednak wpisywać ich w takiej

kolejności. Spróbuj je

trochę wymieszać. Wpisz

także kilka nieprawidłowych

współrzędnych, przeplatając

je prawidłowymi. Dodatkowo

wpisz kilka niecelnych

strzałów. To wszystko będzie

stanowiło element testowania

gry i zapewniania jej

wysokiej jakości.

Przekazujemy współrzędne podane

przez użytkownika do kontrolera i od

tego momentu cała reszta magicznie

powinna wydarzyć się sama!

Ten prosty wiersz kodu czyści pole tekstowe

formularza, zapisując w nim pusty łańcuch znaków.

W ten sposób gracz nie będzie musiał samodzielnie

zaznaczać tekstu i usuwać go przed wpisaniem

współrzędnych kolejnego strzału, gdyż mogłoby to być

uciążliwe.

jesteś tutaj

387

Łączenie wszystkiego w całość

.RGRZDQLHQDSRZDĝQLH

Czy nie uważasz, że ciągłe klikanie przycisku Ognia! za każdym razem po

wpisaniu współrzędnych jest bardzo niewygodne? No jasne, takie klikanie działa,

jednak jednocześnie jest wolne i uciążliwe. Czy nie byłoby wygodniej, gdyby

wystarczyło nacisnąć klawisz

Enter? Poniżej przedstawiliśmy krótki fragment kodu,

który pozwala na obsługę naciśnięcia tego klawisza.

function handleKeyPress(e) {

var fireButton = document.getElementById(”fireButton”);

if (e.keyCode === 13) {

fireButton.click();

return false;

}

}

Dodaj nową procedurę obsługi zdarzeń.

Ta będzie obsługiwać zdarzenia naciśnięcia

klawisza w polu formularza.

function init() {

var fireButton = document.getElementById(”fireButton”);

fireButton.onclick = handleFireButton;

var guessInput = document.getElementById(”guessInput”);

guessInput.onkeypress = handleKeyPress;

}

Zaktualizuj kod funkcji

init

, a następnie dodaj funkcję

KDQGOH.H\3UHVV

w dowolnym miejscu kodu. Odśwież stronę i zacznij zabawę!

Oto nasza nowa procedura obsługi

zdarzeń. Będzie ona wywoływana

za każdym razem, kiedy po

umieszczeniu kursora w polu

formularza naciśniesz jakiś klawisz.

Przeglądarka przekazuje do procedury

obsługi obiekt zdarzenia. Obiekt ten

zawiera informację, który klawisz

został naciśnięty.

Jeśli naciśniesz klawisz Enter, we

właściwości keyCode obiektu zdarzenia

zostanie zapisana wartość 13. W takim

przypadku chcemy, by przycisk Ognia!

zachował się tak, jak byśmy go kliknęli.

W tym celu wystarczy wywołać metodę

click elementu fireButton (co sprawi,

że przycisk uzna, iż został kliknięty).

W końcu zwracamy false, aby

formularz nie robił już nic więcej

(szczególnie, by nie próbował

gdzieś wysyłać danych).

388

Rozdział 8.

Planowanie rozmieszczania okrętów

Co nam jeszcze zostało?

A tak… Położenie okrętów jest podane na stałe!

Obecnie dysponujesz zupełnie niesamowitą grą internetową, utworzoną przy użyciu

bardzo prostej strony WWW, kilku obrazków i nie więcej niż 100 wierszy kodu. Jednak

jest pewien aspekt tej gry, który sprawia, że nie jest ona w pełni satysfakcjonująca.

Chodzi o to, że okręty zawsze znajdują się w tym samym miejscu. Musisz zatem napisać

kod, który podczas rozpoczynania każdej nowej gry będzie rozmieszczał wszystkie okręty

w losowych miejscach (inaczej gra będzie wyjątkowo nudna).

Zanim zaczniemy, chcemy, żebyś wiedział, że opiszemy kod nieco bardziej pobieżnie —

dochodzisz już do takiego etapu, w którym znacznie lepiej potrafisz czytać i rozumieć

kod, a poza tym, nie ma w nim zbyt wielu nowych elementów. A zatem zaczynajmy.

Co musimy wziąć pod uwagę?

A

B

C

D

E

F

G

0 1 2 3 4 5 6

Okręt

Okręt

Okręt

Okręt

Każdy okręt musi

się znaleźć w takim

miejscu, gdzie nie

będzie się pokrywał

z żadnym innym

okrętem.

Tu mamy

miejsce na

okręt.

Okręty można

umieszczać

w pionie lub

w poziomie.

A tu jest kolejny okręt.

Jednak kolejnego okrętu nie możemy

umieścić w taki sposób, gdyż okręty

nałożyłyby się na siebie — wystąpiłaby

kolizja z istniejącym okrętem. Położenie

tego okrętu trzeba będzie zmienić.

No dobrze, to jest trzecie

miejsce, gdzie można

umieścić okręt, tym razem

jest w porządku.

jesteś tutaj

389

Łączenie wszystkiego w całość

Dodaj poïoĝenie nowego okrÚtu

do tablicy ships.

Wygeneruj losowy kierunek (pionowy lub

poziomy), w jakim zostanÈ rozmieszczone

poszczegölne pola zajmowane przez okrÚt.

Wygeneruj losowe miejsce

do umieszczenia okrÚtu.

W pÚtli obsïuĝ wszystkie okrÚty,

ktöre majÈ byÊ uĝywane w grze.

Sprawdě, czy poïoĝenie nowego

okrÚtu nie koliduje z ĝadnym

z juĝ istniejÈcych okrÚtöw.

Magnesiki z kodem

$OJRU\WPUR]PLHV]F]DQLDRNUĐWyZQDSODQV]\]RVWDâ]DSLVDQ\QDPDJQHVLNDFK

SU]\F]HSLRQ\FKGRORGyZNLZORVRZHMNROHMQRĤFL&]\SRWUDILV]SRQRZQLHSRXNâDGDþ

PDJQHVLNLZHZâDĤFLZHMNROHMQRĤFLE\RGWZRU]\þG]LDâDMċF\DOJRU\WP"=DQLPSU]HMG]LHV]

GDOHMVSUDZGĮQDV]ċRGSRZLHGĮ]DPLHV]F]RQċSRGNRQLHFUR]G]LDâX

Algorytm to jedynie wymyślne

słowo określające sekwencję

czynności wykonywanych w celu

rozwiązania problemu.