Tic-tac-toe е популярна игра, която използва мрежа 3×3. Целта на играта е да бъдете първият играч, който постави три символа в прав хоризонтален, вертикален или диагонален ред.
Можете да създадете Tic-tac-toe игра, която се изпълнява в уеб браузър, като използвате HTML, CSS и JavaScript. Можете да използвате HTML, за да добавите съдържанието, което съдържа мрежата 3 × 3, и CSS, за да добавите малко стил към дизайна на играта.
След това можете да използвате JavaScript за функционалността на играта. Това включва поставяне на символи, редуване между играчите и решаване кой печели.
Как да създадете потребителския интерфейс за играта Tic-Tac-Toe
Можете да прочетете и изтеглите пълния изходен код за тази игра от GitHub хранилище.
Tic-tac-toe е една от многото игри, които можете да правите, когато се научите да програмирате. Добре е да практикувате нов език или среда, като например двигателят за разработка на игри PICO-8.
За да създадете Tic-tac-toe игра, която работи в уеб браузър, ще трябва да добавите HTML за съдържанието на страницата. След това можете да стилизирате това с помощта на CSS.
- Създайте нов файл, наречен "index.html".
- Вътре в "index.html" добавете основната структура на HTML файл:
html>
<htmlезик="en-US">
<глава>
<заглавие>Игра Tic Tac Toeзаглавие>
глава>
<тяло>
тяло>
html> - Вътре в HTML етикета body добавете таблица, която съдържа три реда, с три клетки във всеки ред:
<дивклас="контейнер">
<маса>
<тр>
<tdдокумент за самоличност="1">td>
<tdдокумент за самоличност="2">td>
<tdдокумент за самоличност="3">td>
тр>
<тр>
<tdдокумент за самоличност="4">td>
<tdдокумент за самоличност="5">td>
<tdдокумент за самоличност="6">td>
тр>
<тр>
<tdдокумент за самоличност="7">td>
<tdдокумент за самоличност="8">td>
<tdдокумент за самоличност="9">td>
тр>
маса>
див> - В същата папка като вашия HTML файл създайте нов файл, наречен "styles.css".
- Вътре в CSS файла добавете малко стил към вашата мрежа 3 на 3:
маса {
граница-колапс: колапс;
марж: 0 Автоматичен;
}td {
ширина: 100px;
височина: 100px;
подравняване на текст: център;
вертикално подравняване: средата;
граница: 1pxтвърдочерен;
} - Свържете CSS файла с вашия HTML файл, като го добавите към head тага:
<връзкаотн="стилов лист"Тип="текст/css"href="styles.css">
Как да се редувате в добавянето на символи към дъската за игра
В играта ще има двама играчи, всеки със символ "X" или "O". Можете да добавите символ "X" или "O", като щракнете върху една от клетките на мрежата. Това ще продължи, докато един от вас създаде прав хоризонтален, вертикален или диагонален ред.
Можете да добавите тази функционалност с помощта на JavaScript.
- В същата папка като вашите HTML и CSS файлове създайте JavaScript файл, наречен „script.js“.
- Свържете JavaScript файла с вашия HTML файл, като добавите скрипта в долната част на етикета body:
<тяло>
Вашият код тук
<сценарийsrc="script.js">сценарий>
тяло> - Вътре в JavaScript файла добавете низ, който да представлява символа на играча. Това може да бъде "X" или "O". По подразбиране първият играч ще постави "X":
позволявам playerSymbol = "Х"; - Добавете друга променлива, за да следите дали играта е приключила:
позволявам gameEnded = невярно - Всяка клетка в HTML таблицата има ID между 1 и 9. За всяка клетка в таблицата добавете слушател на събития, който ще се изпълнява всеки път, когато потребител кликне върху клетката:
за (позволявам аз = 1; аз <= 9; i++) {
документ.getElementById (i.toString()).addEventListener(
"клик",
функция() {
}
);
} - Вътре в слушателя на събития променете вътрешния HTML, за да покажете текущия символ. Уверете се, че използвате условен израз на JavaScript за да се уверите първо, че клетката е празна и че играта все още не е приключила:
ако (това.innerHTML "" && !gameEnded) {
това.innerHTML = playerSymbol;
} - Добавете клас към HTML елемента, за да оформите символа, който ще се показва в мрежата. Името на CSS класовете ще бъде "X" или "O", в зависимост от символа:
това.classList.add (playerSymbol.toLowerCase()); - Във файла "styles.css" добавете тези два нови класа за символите "X" и "O". Символите "X" и "O" ще се показват в различни цветове:
.х {
цвят: син;
размер на шрифта: 80px;
}.о {
цвят: червен;
размер на шрифта: 80px;
} - В JavaScript файла, след промяна на innerHTML за показване на символа, разменете символа. Например, ако играчът току-що постави "X", променете следващия символ на "O":
ако (символ на играча "Х")
playerSymbol = "О"
друго
playerSymbol = "Х" - За да стартирате играта, отворете файла "index.html" в уеб браузър, за да се покаже мрежата 3 на 3:
- Започнете да поставяте символи върху мрежата, като щракнете върху клетките. Играта ще редува символи "X" и "O":
Как да определите победителя
В момента играта ще продължи, дори ако играч е поставил три последователни символа. Ще трябва да добавите крайно условие, за да проверявате това след всеки ход.
- Във вашия JavaScript файл добавете нова променлива, за да съхраните всички възможни „печеливши“ позиции за мрежата 3 на 3. Например "[1,2,3]" е горният ред или "[1,4,7]" е диагонален ред.
позволявам winPos = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - Добавете нова функция, наречена checkWin():
функцияcheckWin() {
} - Вътре във функцията преминете през всяка от възможните печеливши позиции:
за (позволявам аз = 0; i < winPos.length; i++) {} - Вътре в цикъла for проверете дали всички клетки съдържат символа на играча:
ако (
документ.getElementById (winPos[i][0]).innerHTML playerSymbol &&
документ.getElementById (winPos[i][1]).innerHTML playerSymbol &&
документ.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - Ако условието е вярно, тогава всички символи са в права линия. В оператора if покажете съобщение на потребителя. Можете също така да промените стила на HTML елемента, като добавите CSS клас, наречен "win":
документ.getElementById (winPos[i][0]).classList.add("печеля");
документ.getElementById (winPos[i][1]).classList.add("печеля");
документ.getElementById (winPos[i][2]).classList.add("печеля");
gameEnded = вярно;setTimeout(функция() {
предупреждение (playerSymbol + "печели!");
}, 500); - Добавете този "win" CSS клас към файла "styles.css". Когато играчът спечели, той ще промени цвета на фона на печелившите клетки на жълт:
.печеля {
Цвят на фона: жълто;
} - Извиквайте функцията checkWin() всеки път, когато играч има ход, в манипулатора на събития, добавен в предишните стъпки:
за (позволявам аз = 1; аз <= 9; i++) {
// Всеки път, когато играч кликне върху клетка
документ.getElementById (i.toString()).addEventListener(
"клик",
функция() {
ако (това.innerHTML "" && !gameEnded) {
// Показване на "X" или "O" в клетката и стилизиране
това.innerHTML = playerSymbol;
това.classList.add (playerSymbol.toLowerCase());
// Проверете дали даден играч е спечелил
checkWin();
// Разменете символа с другия за следващия ход
ако (символ на играча "Х")
playerSymbol = "О"
друго
playerSymbol = "Х"
}
}
);
}
Как да нулирате таблото за игра
След като играч спечели играта, можете да нулирате таблото за игра. Можете също така да нулирате таблото за игра в случай на равенство.
- В HTML файла, след таблицата, добавете бутон за нулиране:
<бутондокумент за самоличност="нулиране">Нулиранебутон> - Добавете малко стил към бутона за нулиране:
.контейнер {
дисплей: flex;
flex-direction: колона;
}#нулиране {
марж: 48px 40%;
подплата: 20px;
} - В JavaScript файла добавете манипулатор на събития, който ще се изпълнява всеки път, когато потребителят щракне върху бутона за нулиране:
документ.getElementById("нулиране").addEventListener(
"клик",
функция() {}
); - За всяка клетка в мрежата вземете HTML елемента с помощта на функцията getElementById(). Нулирайте вътрешния HTML, за да премахнете символите "O" и "X" и да премахнете всички други CSS стилове:
за (позволявам аз = 1; аз <= 9; i++) {
документ.getElementById (i.toString()).innerHTML = "";
документ.getElementById (i.toString()).classList.remove("х");
документ.getElementById (i.toString()).classList.remove("о");
документ.getElementById (i.toString()).classList.remove("печеля");
gameEnded = невярно;
} - Стартирайте играта, като отворите файла "index.html" в уеб браузър.
- Започнете да поставяте символи "X" и "O" върху мрежата. Опитайте се да накарате един от символите да спечели.
- Натиснете бутона за нулиране, за да нулирате дъската за игра.
Изучаване на JavaScript чрез създаване на игри
Можете да продължите да подобрявате уменията си по програмиране, като създавате повече проекти в JavaScript. Лесно е да създавате прости игри и инструменти в уеб среда, като използвате междуплатформени отворени технологии като JavaScript и HTML.
Няма по-добър начин да подобрите програмирането си от това да практикувате писането на програми!
