Тиц-тац-тое је популарна игра која користи мрежу 3×3. Циљ игре је да буде први играч који ће поставити три симбола у прави хоризонтални, вертикални или дијагонални ред.
Можете креирати игру Тиц-тац-тое која ради у веб претраживачу користећи ХТМЛ, ЦСС и ЈаваСцрипт. Можете користити ХТМЛ да додате садржај који садржи мрежу 3×3, а ЦСС да додате стил у дизајн игре.
Затим можете користити ЈаваСцрипт за функционалност игре. Ово укључује постављање симбола, смењивање између играча и одлучивање ко ће победити.
Како направити кориснички интерфејс за игру Тиц-Тац-Тое
Можете прочитати и преузети комплетан изворни код за ову игру са њеног ГитХуб спремиште.
Тиц-тац-тое је једна од многих игара које можете да направите када научите да програмирате. Добро је вежбати нови језик или окружење, нпр мотор за развој игара ПИЦО-8.
Да бисте креирали игру Тиц-тац-тое која ради у веб претраживачу, мораћете да додате ХТМЛ за садржај странице. Затим можете да стилизујете ово користећи ЦСС.
- Направите нову датотеку под називом "индек.хтмл".
- Унутар „индек.хтмл“ додајте основну структуру ХТМЛ датотеке:
хтмл>
<хтмлланг="ен-УС">
<глава>
<наслов>Игра Тиц Тац Тоенаслов>
глава>
<тело>
тело>
хтмл> - Унутар ХТМЛ ознаке тела додајте табелу која садржи три реда, са три ћелије у сваком реду:
<дивкласа="контејнер">
<сто>
<тр>
<тдид="1">тд>
<тдид="2">тд>
<тдид="3">тд>
тр>
<тр>
<тдид="4">тд>
<тдид="5">тд>
<тдид="6">тд>
тр>
<тр>
<тдид="7">тд>
<тдид="8">тд>
<тдид="9">тд>
тр>
сто>
див> - У истој фасцикли као и ваша ХТМЛ датотека, направите нову датотеку под називом „стилес.цсс“.
- Унутар ЦСС датотеке додајте мало стила вашој мрежи 3 по 3:
сто {
граница-урушавање: колапс;
маргина: 0 ауто;
}тд {
ширина: 100пк;
висина: 100пк;
Поравнање текста: центар;
вертикално поравнати: средњи;
граница: 1пкчврстцрн;
} - Повежите ЦСС датотеку са својом ХТМЛ датотеком додавањем у ознаку хеад:
<линкрел="стилесхеет"тип="текст/цсс"хреф="стилес.цсс">
Како се смењивати додавањем симбола на таблу за игру
У игри ће бити два играча, сваки са симболом "Кс" или "О". Можете додати симбол "Кс" или "О" кликом на једну од ћелија мреже. Ово ће се наставити све док неко од вас не направи прави хоризонтални, вертикални или дијагонални ред.
Ову функционалност можете додати користећи ЈаваСцрипт.
- У истој фасцикли као и ваше ХТМЛ и ЦСС датотеке, направите ЈаваСцрипт датотеку под називом „сцрипт.јс“.
- Повежите ЈаваСцрипт датотеку са својом ХТМЛ датотеком додавањем скрипте на дно ознаке тела:
<тело>
Ваш код овде
<скриптасрц="сцрипт.јс">скрипта>
тело> - Унутар ЈаваСцрипт датотеке додајте стринг који представља симбол играча. Ово може бити "Кс" или "О". Подразумевано, први играч ће ставити "Кс":
дозволити плаиерСимбол = "ИКС"; - Додајте још једну променљиву да бисте пратили да ли је игра завршена:
дозволити гамеЕндед = лажно - Свака ћелија у ХТМЛ табели има ИД између 1 и 9. За сваку ћелију у табели додајте слушалац догађаја који ће се покренути сваки пут када корисник кликне на ћелију:
за (дозволити и = 1; и <= 9; и++) {
документ.гетЕлементБиИд (и.тоСтринг()).аддЕвентЛистенер(
"кликни",
функција() {
}
);
} - Унутар слушаоца догађаја промените унутрашњи ХТМЛ да прикаже тренутни симбол. Обавезно користите ЈаваСцрипт условни исказ да прво проверите да ли је ћелија празна и да игра још није завршена:
ако (ово.иннерХТМЛ "" && !гамеЕндед) {
ово.иннерХТМЛ = плаиерСимбол;
} - Додајте класу ХТМЛ елементу да бисте стилизовали симбол који ће се приказати на мрежи. Име ЦСС класа ће бити или "Кс" или "О", у зависности од симбола:
ово.цлассЛист.адд (плаиерСимбол.тоЛоверЦасе()); - Унутар датотеке "стилес.цсс" додајте ове две нове класе за симболе "Кс" и "О". Симболи "Кс" и "О" ће се приказати у различитим бојама:
.Икс {
боја: Плави;
фонт-сизе: 80пк;
}.о {
боја: црвена;
фонт-сизе: 80пк;
} - У ЈаваСцрипт датотеци, након што промените иннерХТМЛ да прикаже симбол, замените симбол. На пример, ако је играч управо ставио "Кс", промените следећи симбол у "О":
ако (Симбол играча "ИКС")
плаиерСимбол = "О"
друго
плаиерСимбол = "ИКС" - Да бисте покренули игру, отворите датотеку „индек.хтмл“ у веб претраживачу да бисте приказали мрежу 3 по 3:
- Почните да постављате симболе на мрежу тако што ћете кликнути на ћелије. Игра ће се мењати између симбола "Кс" и "О":
Како одредити победника
У овом тренутку, игра ће се наставити чак и ако играч стави три узастопна симбола. Мораћете да додате крајњи услов да бисте ово проверили након сваког окрета.
- Унутар ваше ЈаваСцрипт датотеке додајте нову променљиву да бисте сачували све могуће „победничке“ позиције за мрежу 3 са 3. На пример, „[1,2,3]“ је горњи ред, или „[1,4,7]“ је дијагонални ред.
дозволити винПос = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - Додајте нову функцију под називом цхецкВин():
функцијацхецкВин() {
} - Унутар функције прођите кроз сваку од могућих добитних позиција:
за (дозволити и = 0; и < винПос.ленгтх; и++) {} - Унутар петље фор проверите да ли све ћелије садрже симбол играча:
ако (
документ.гетЕлементБиИд (винПос[и][0]).иннерХТМЛ плаиерСимбол &&
документ.гетЕлементБиИд (винПос[и][1]).иннерХТМЛ плаиерСимбол &&
документ.гетЕлементБиИд (винПос[и][2]).иннерХТМЛ плаиерСимбол
) {} - Ако је услов тачан, онда су сви симболи у правој линији. Унутар иф наредбе, прикажите поруку кориснику. Такође можете променити стил ХТМЛ елемента додавањем ЦСС класе под називом „вин“:
документ.гетЕлементБиИд (винПос[и][0]).цлассЛист.адд("победити");
документ.гетЕлементБиИд (винПос[и][1]).цлассЛист.адд("победити");
документ.гетЕлементБиИд (винПос[и][2]).цлассЛист.адд("победити");
гамеЕндед = истина;сетТимеоут(функција() {
упозорење (плаиерСимбол + "побеђује!");
}, 500); - Додајте ову "вин" ЦСС класу у датотеку "стилес.цсс". Када играч победи, промениће боју позадине победничких ћелија у жуту:
.победити {
боја позадине: жута;
} - Позовите функцију цхецкВин() сваки пут када играч дође у ред, унутар обрађивача догађаја који је додат у претходним корацима:
за (дозволити и = 1; и <= 9; и++) {
// Кад год играч кликне на ћелију
документ.гетЕлементБиИд (и.тоСтринг()).аддЕвентЛистенер(
"кликни",
функција() {
ако (ово.иннерХТМЛ "" && !гамеЕндед) {
// Прикажите или „Кс“ или „О“ у ћелији и стилизујте је
ово.иннерХТМЛ = плаиерСимбол;
ово.цлассЛист.адд (плаиерСимбол.тоЛоверЦасе());
// Проверите да ли је играч победио
цхецкВин();
// Заменити симбол другим за следеће окретање
ако (Симбол играча "ИКС")
плаиерСимбол = "О"
друго
плаиерСимбол = "ИКС"
}
}
);
}
Како ресетовати плочу за игру
Када играч победи у игри, можете ресетовати таблу за игру. Такође можете ресетовати таблу за игру у случају нерешеног резултата.
- У ХТМЛ датотеци, после табеле, додајте дугме за ресетовање:
<дугмеид="ресетовати">Ресетоватидугме> - Додајте мало стила дугмету за ресетовање:
.контејнер {
приказ: флек;
флек-дирецтион: колона;
}#ресетовати {
маргина: 48пк 40%;
паддинг: 20пк;
} - У ЈаваСцрипт датотеци додајте руковалац догађаја који ће се покретати сваки пут када корисник кликне на дугме за ресетовање:
документ.гетЕлементБиИд("ресетовати").аддЕвентЛистенер(
"кликни",
функција() {}
); - За сваку ћелију у мрежи, узмите ХТМЛ елемент помоћу функције гетЕлементБиИд(). Ресетујте иннерХТМЛ да бисте уклонили симболе „О“ и „Кс“ и уклонили све остале ЦСС стилове:
за (дозволити и = 1; и <= 9; и++) {
документ.гетЕлементБиИд (и.тоСтринг()).иннерХТМЛ = "";
документ.гетЕлементБиИд (и.тоСтринг()).цлассЛист.ремове("Икс");
документ.гетЕлементБиИд (и.тоСтринг()).цлассЛист.ремове("о");
документ.гетЕлементБиИд (и.тоСтринг()).цлассЛист.ремове("победити");
гамеЕндед = лажно;
} - Покрените игру отварањем датотеке "индек.хтмл" у веб претраживачу.
- Почните да постављате симболе "Кс" и "О" на мрежу. Покушајте да један од симбола победи.
- Притисните дугме за ресетовање да бисте ресетовали таблу за игру.
Учење ЈаваСцрипт-а прављењем игара
Можете наставити да побољшавате своје вештине програмирања креирањем више пројеката у ЈаваСцрипт-у. Лако је направити једноставне игре и алате у веб окружењу, користећи отворене технологије на више платформи као што су ЈаваСцрипт и ХТМЛ.
Не постоји бољи начин да побољшате своје програмирање него да вежбате писање програма!
