Kółko i krzyżyk to popularna gra wykorzystująca siatkę 3×3. Celem gry jest bycie pierwszym graczem, który umieści trzy symbole w prostym poziomym, pionowym lub ukośnym rzędzie.
Możesz stworzyć grę w kółko i krzyżyk, która działa w przeglądarce internetowej, używając HTML, CSS i JavaScript. Możesz użyć HTML, aby dodać zawartość zawierającą siatkę 3 × 3, a CSS, aby dodać trochę stylu do projektu gry.
Następnie możesz użyć JavaScript dla funkcjonalności gry. Obejmuje to umieszczanie symboli, rozgrywanie tur między graczami i decydowanie, kto wygra.
Jak stworzyć interfejs użytkownika do gry w kółko i krzyżyk
Możesz przeczytać i pobrać pełny kod źródłowy tej gry z jej Repozytorium GitHub.
Kółko i krzyżyk to jedna z wielu gier, które możesz wykonać podczas nauki programowania. Dobrze jest ćwiczyć nowy język lub środowisko, na przykład silnik do tworzenia gier PICO-8.
Aby utworzyć grę w kółko i krzyżyk, która działa w przeglądarce internetowej, musisz dodać kod HTML do zawartości strony. Następnie możesz nadać temu styl za pomocą CSS.
- Utwórz nowy plik o nazwie „index.html”.
- W pliku „index.html” dodaj podstawową strukturę pliku HTML:
HTML>
<HTMLlang=„en-US”>
<głowa>
<tytuł>Gra w kółko i krzyżyktytuł>
głowa>
<ciało>
ciało>
HTML> - Wewnątrz znacznika HTML body dodaj tabelę zawierającą trzy wiersze, z trzema komórkami w każdym wierszu:
<dzklasa="pojemnik">
<tabela>
<tr>
<tdID="1">td>
<tdID="2">td>
<tdID="3">td>
tr>
<tr>
<tdID="4">td>
<tdID="5">td>
<tdID="6">td>
tr>
<tr>
<tdID="7">td>
<tdID="8">td>
<tdID="9">td>
tr>
tabela>
dz> - W tym samym folderze co plik HTML utwórz nowy plik o nazwie „styles.css”.
- W pliku CSS dodaj stylizację do siatki 3 na 3:
tabela {
upadek granicy: zawalić się;
margines: 0 automatyczny;
}td {
szerokość: 100piks;
wysokość: 100piks;
wyrównanie tekstu: Centrum;
wyrównanie w pionie: środek;
granica: 1pikssolidnyczarny;
} - Połącz plik CSS z plikiem HTML, dodając go do tagu head:
<połączyćrel=„arkusz stylów”typ="tekst/css"href="style.css">
Jak na zmianę dodawać symbole do planszy
W grze będzie dwóch graczy, każdy z symbolem „X” lub „O”. Możesz dodać symbol „X” lub „O”, klikając jedną z komórek siatki. Będzie to trwało, dopóki jedno z was nie utworzy prostego poziomego, pionowego lub ukośnego rzędu.
Możesz dodać tę funkcjonalność za pomocą JavaScript.
- W tym samym folderze co pliki HTML i CSS utwórz plik JavaScript o nazwie „script.js”.
- Połącz plik JavaScript z plikiem HTML, dodając skrypt na dole tagu body:
<ciało>
Twój kod tutaj
<scenariuszźródło=„skrypt.js”>scenariusz>
ciało> - Wewnątrz pliku JavaScript dodaj ciąg reprezentujący symbol gracza. Może to być „X” lub „O”. Domyślnie pierwszy gracz wstawi „X”:
pozwalać graczSymbol = "X"; - Dodaj kolejną zmienną, aby śledzić, czy gra się zakończyła:
pozwalać graZakończona = FAŁSZ - Każda komórka w tabeli HTML ma identyfikator z zakresu od 1 do 9. Do każdej komórki w tabeli dodaj detektor zdarzeń, który będzie uruchamiany za każdym razem, gdy użytkownik kliknie komórkę:
Do (pozwalać ja = 1; ja <= 9; i++) {
dokument.getElementById (i.toString()).addEventListener(
"Kliknij",
funkcjonować() {
}
);
} - Wewnątrz detektora zdarzeń zmień wewnętrzny kod HTML, aby wyświetlić bieżący symbol. Upewnij się, że używasz instrukcja warunkowa JavaScript aby najpierw upewnić się, że komórka jest pusta i że gra jeszcze się nie zakończyła:
Jeśli (Ten.innerHTML "" && !gra zakończona) {
Ten.innerHTML = playerSymbol;
} - Dodaj klasę do elementu HTML, aby nadać styl symbolowi, który będzie wyświetlany na siatce. Nazwą klas CSS będzie „X” lub „O”, w zależności od symbolu:
Ten.classList.add (playerSymbol.toLowerCase()); - W pliku „styles.css” dodaj te dwie nowe klasy dla symboli „X” i „O”. Symbole „X” i „O” będą wyświetlane w różnych kolorach:
.X {
kolor: niebieski;
rozmiar czcionki: 80piks;
}.o {
kolor: czerwony;
rozmiar czcionki: 80piks;
} - W pliku JavaScript, po zmianie innerHTML, aby wyświetlić symbol, zamień symbol. Na przykład, jeśli gracz właśnie umieścił „X”, zmień następny symbol na „O”:
Jeśli (graczSymbol "X")
graczSymbol = "O"
w przeciwnym razie
graczSymbol = "X" - Aby uruchomić grę, otwórz plik „index.html” w przeglądarce internetowej, aby wyświetlić siatkę 3 na 3:
- Rozpocznij umieszczanie symboli na siatce, klikając komórki. Gra będzie wyświetlać naprzemiennie symbole „X” i „O”:
Jak określić zwycięzcę
W tej chwili gra będzie kontynuowana, nawet jeśli gracz umieści trzy kolejne symbole. Będziesz musiał dodać warunek końcowy, aby to sprawdzić po każdej turze.
- Wewnątrz pliku JavaScript dodaj nową zmienną, aby przechowywać wszystkie możliwe „zwycięskie” pozycje dla siatki 3 na 3. Na przykład „[1,2,3]” to górny rząd, a „[1,4,7]” to rząd ukośny.
pozwalać wygranaPoz = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - Dodaj nową funkcję o nazwie checkWin():
funkcjonowaćSprawdź wygraną() {
} - Wewnątrz funkcji przejdź przez każdą z możliwych zwycięskich pozycji:
Do (pozwalać ja = 0; i < winPos.długość; i++) {} - Wewnątrz pętli for sprawdź, czy wszystkie komórki zawierają symbol gracza:
Jeśli (
dokument.getElementById (winPos[i][0]).innerHTML playerSymbol &&
dokument.getElementById (winPos[i][1]).innerHTML playerSymbol &&
dokument.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - Jeśli warunek ma wartość true, wszystkie symbole są w linii prostej. Wewnątrz instrukcji if wyświetl komunikat dla użytkownika. Możesz także zmienić styl elementu HTML, dodając klasę CSS o nazwie „win”:
dokument.getElementById (winPos[i][0]).classList.add("wygrać");
dokument.getElementById (winPos[i][1]).classList.add("wygrać");
dokument.getElementById (winPos[i][2]).classList.add("wygrać");
graZakończona = PRAWDA;setTimeout(funkcjonować() {
ostrzeżenie (graczSymbol + "wygrywa!");
}, 500); - Dodaj tę klasę CSS „win” do pliku „styles.css”. Gdy gracz wygra, zmieni kolor tła zwycięskich komórek na żółty:
.wygrać {
kolor tła: żółty;
} - Wywołaj funkcję checkWin() za każdym razem, gdy gracz ma turę, wewnątrz procedury obsługi zdarzenia dodanej w poprzednich krokach:
Do (pozwalać ja = 1; ja <= 9; i++) {
// Za każdym razem, gdy gracz kliknie komórkę
dokument.getElementById (i.toString()).addEventListener(
"Kliknij",
funkcjonować() {
Jeśli (Ten.innerHTML "" && !gra zakończona) {
// Wyświetl w komórce „X” lub „O” i nadaj jej styl
Ten.innerHTML = playerSymbol;
Ten.classList.add (playerSymbol.toLowerCase());
// Sprawdź, czy gracz wygrał
sprawdźWin();
// Zamień symbol na inny dla następnej tury
Jeśli (graczSymbol "X")
graczSymbol = "O"
w przeciwnym razie
graczSymbol = "X"
}
}
);
}
Jak zresetować planszę do gry
Gdy gracz wygra grę, możesz zresetować planszę. Możesz także zresetować planszę w przypadku remisu.
- W pliku HTML, po tabeli, dodaj przycisk resetowania:
<przyciskID="Resetowanie">Resetowanieprzycisk> - Dodaj styl do przycisku resetowania:
.pojemnik {
wyświetlacz: przewód;
kierunek zginania: kolumna;
}#Resetowanie {
margines: 48piks 40%;
wyściółka: 20piks;
} - W pliku JavaScript dodaj procedurę obsługi zdarzeń, która będzie uruchamiana za każdym razem, gdy użytkownik kliknie przycisk resetowania:
dokument.getElementById("Resetowanie").addEventListener(
"Kliknij",
funkcjonować() {}
); - Dla każdej komórki w siatce pobierz element HTML za pomocą funkcji getElementById(). Zresetuj innerHTML, aby usunąć symbole „O” i „X” oraz usunąć wszystkie inne style CSS:
Do (pozwalać ja = 1; ja <= 9; i++) {
dokument.getElementById (i.toString()).innerHTML = "";
dokument.getElementById (i.toString()).classList.remove("X");
dokument.getElementById (i.toString()).classList.remove("o");
dokument.getElementById (i.toString()).classList.remove("wygrać");
graZakończona = FAŁSZ;
} - Uruchom grę, otwierając plik „index.html” w przeglądarce internetowej.
- Zacznij umieszczać symbole „X” i „O” na siatce. Postaraj się, aby jeden z symboli wygrał.
- Naciśnij przycisk resetowania, aby zresetować planszę.
Nauka JavaScript poprzez tworzenie gier
Możesz nadal doskonalić swoje umiejętności programistyczne, tworząc więcej projektów w JavaScript. Łatwo jest tworzyć proste gry i narzędzia w środowisku internetowym, korzystając z wieloplatformowych, otwartych technologii, takich jak JavaScript i HTML.
Nie ma lepszego sposobu na doskonalenie programowania niż ćwiczenie pisania programów!
