Всем привет, статью пишет Прописатель Владислав.
И сегодня я вам расскажу и покажу как сделать крестики-нолики.
1.Создание файла
Так как игра получится маловесная, мы будем работать с одним файлом. Назовем его "KrestsNulls.html".
Для работы над этим файлом нам понадобится простой блокнот, правда это не самый лучший вариант. Лучшим вариантом окажется любой текстовый IDE редактор. Я буду использовать "Atom", он бесплатный и удобный.
2.Шаблон
Чтобы написать какую-либо игру, нам нужно создать шаблон. Вот шаблон, в котором я буду работать. <script> и <style> - в них я буду писать код.
Вы могли заметить на изображении <div class="all_div" id="all_div"> </div>. В нем потом будет сама сетка для игры в крестики-нолики, мы в нем ничего писать не будем.
3. Создание сетки
Теперь начнем написание кода. Это не так сложно, как могло бы казаться.
Давайте сделаем так, чтобы в <div class="all_div" id="all_div"> </div> появилась сетка. Для этого нам нужно указать размер квадрата, где будет располагаться наша сетка. Еще не мало важно, чтобы размер квадрата делился на 3, ведь размер сетки 3х3. Для этого мы прибегаем к <style> и пишем туда вот это:
Теперь нам следует заполнить этот большой квадрат девятью маленькими квадратами 100х100. float: left мы пишем для того, чтобы квадратики собрались в одну строчку/линию. Для этого мы снова идем к <style> и пишем туда стиль наших квадратиков:
После этого заполняем квадрат более мелкими квадратиками с помощью <script>:
Открываем файл "KrestsNulls.html" и видим это:
4.Создание игры
При исследовании элемента можно увидеть как устроена сетка. Это нам пригодится в дальнейшем:
Мы хотим, чтобы при нажатии на квадратик ставился крестик или нолик. Также не забываем про счет игроков. Для этого пишем так:
Также добавим в <body> строчку, где будет счет:
При клике добавляем проверку - победил игрок или нет? При победе будет все обнуляться, кроме счета.
На всякий случай добавляем кнопку "Обнулить" .
В итоге получаем такой код:
<!DOCTYPE html><html lang="ru" dir="ltr"> <head> <meta charset="utf-8"> <title>Крестики-нолики</title> </head> <body> <div class="all_div" id="all_div">
</div>
<h id="scoreO">0</h> <h>:</h> <h id="scoreX">0</h>
<input type="button" value="Обнулить" onclick="for (var i = 0 ; i < 9 ; i++) {document.getElementById(`div${i}`).innerHTML = ''}"/>
<script type="text/javascript"> for (var i = 0 ; i < 3 * 3 ; i++) { all_div.innerHTML += `<div class="div" id="div${i}"> </div>`; }
var hod = 2; var scoreo = 0; var scorex = 0;
all_div.onclick = e => { if (e.target.id[3] != "_") { if (document.getElementById(e.target.id).innerHTML != "0" && document.getElementById(e.target.id).innerHTML != "X") { if (hod % 2 == 0) { document.getElementById(e.target.id).innerHTML = "0"; } else { document.getElementById(e.target.id).innerHTML = "X"; } hod++; } } if ((document.getElementById('div0').innerHTML == 'X' && document.getElementById('div1').innerHTML == 'X' && document.getElementById('div2').innerHTML == 'X') || (document.getElementById('div3').innerHTML == 'X' && document.getElementById('div4').innerHTML == 'X' && document.getElementById('div5').innerHTML == 'X') || (document.getElementById('div6').innerHTML == 'X' && document.getElementById('div7').innerHTML == 'X' && document.getElementById('div8').innerHTML == 'X') || (document.getElementById('div0').innerHTML == 'X' && document.getElementById('div3').innerHTML == 'X' && document.getElementById('div6').innerHTML == 'X') || (document.getElementById('div1').innerHTML == 'X' && document.getElementById('div4').innerHTML == 'X' && document.getElementById('div7').innerHTML == 'X') || (document.getElementById('div2').innerHTML == 'X' && document.getElementById('div5').innerHTML == 'X' && document.getElementById('div8').innerHTML == 'X') || (document.getElementById('div0').innerHTML == 'X' && document.getElementById('div4').innerHTML == 'X' && document.getElementById('div8').innerHTML == 'X') || (document.getElementById('div2').innerHTML == 'X' && document.getElementById('div4').innerHTML == 'X' && document.getElementById('div6').innerHTML == 'X')){ scorex++; scoreX.innerHTML = scorex; hod = 0; for (var i = 0 ; i < 9 ; i++) { document.getElementById(`div${i}`).innerHTML = ""; } } if ((document.getElementById('div0').innerHTML == '0' && document.getElementById('div1').innerHTML == '0' && document.getElementById('div2').innerHTML == '0') || (document.getElementById('div3').innerHTML == '0' && document.getElementById('div4').innerHTML == '0' && document.getElementById('div5').innerHTML == '0') || (document.getElementById('div6').innerHTML == '0' && document.getElementById('div7').innerHTML == '0' && document.getElementById('div8').innerHTML == '0') || (document.getElementById('div0').innerHTML == '0' && document.getElementById('div3').innerHTML == '0' && document.getElementById('div6').innerHTML == '0') || (document.getElementById('div1').innerHTML == '0' && document.getElementById('div4').innerHTML == '0' && document.getElementById('div7').innerHTML == '0') || (document.getElementById('div2').innerHTML == '0' && document.getElementById('div5').innerHTML == '0' && document.getElementById('div8').innerHTML == '0') || (document.getElementById('div0').innerHTML == '0' && document.getElementById('div4').innerHTML == '0' && document.getElementById('div8').innerHTML == '0') || (document.getElementById('div2').innerHTML == '0' && document.getElementById('div4').innerHTML == '0' && document.getElementById('div6').innerHTML == '0')){ scoreo++; scoreO.innerHTML = scoreo; hod = 0; for (var i = 0 ; i < 9 ; i++) { document.getElementById(`div${i}`).innerHTML = ""; } } }
</script>
<style> .all_div { width: 306px; height: 306px; border: 1px solid black; } .div { width: 100px; height: 100px; border: 1px solid black; float: left; text-align: center; font-size: 50px; } </style> </body></html>
5.Наслаждаться игрой
Открываем файл "KrestsNulls.html".
