Есть 9 блоков для расстановки крестиков и ноликов, при расстановке добавляется класс "х" (крестик) или "о"(нолик). mainBox - родитель. Функция, которая проверяет выигрыш:
function check() {
if (mainBox.children[0].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[8].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if (mainBox.children[1].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[7].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if (mainBox.children[2].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[6].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if (mainBox.children[0].classList.contains("x") && mainBox.children[3].classList.contains("x") && mainBox.children[6].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if (mainBox.children[0].classList.contains("x") && mainBox.children[1].classList.contains("x") && mainBox.children[2].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if(mainBox.children[3].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[5].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if (mainBox.children[6].classList.contains("x") && mainBox.children[7].classList.contains("x") &&
mainBox.children[8].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if(mainBox.children[2].classList.contains("x") && mainBox.children[5].classList.contains("x") && mainBox.children[8].classList.contains("x")) {
winner = "X";
exitGame(winner);
}
////////////////
else if (mainBox.children[0].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[8].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if (mainBox.children[1].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[7].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if (mainBox.children[2].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[6].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if (mainBox.children[0].classList.contains("o") && mainBox.children[3].classList.contains("o") && mainBox.children[6].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if (mainBox.children[0].classList.contains("o") && mainBox.children[1].classList.contains("o") && mainBox.children[2].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if(mainBox.children[3].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[5].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if (mainBox.children[6].classList.contains("o") && mainBox.children[7].classList.contains("o") &&
mainBox.children[8].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if(mainBox.children[2].classList.contains("o") && mainBox.children[5].classList.contains("o") && mainBox.children[8].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else {
winner = "Draw";
return;
};
}
Всё поэтапно и очень много кода. Как бы сделали функцию проверки Вы ?
P.S. Если вместо mainBox.children[0].classList.contains(class)
написать mainBox.childNodes[0].classList.contains(class)
, то будет ошибка - нельзя узнать наличие класса у undefined
. Почему childNodes[0]
будет undefined?
Рабочий пример:
var mainBox = document.getElementById("main");
var winner = null;
var steps = 0;
mainBox.onclick = function(e) {
var targetBox = e.target;
if (targetBox == mainBox) return false;
if (targetBox.classList.contains("x") || targetBox.classList.contains("o")) return false;
targetBox.classList.add("x");
computerStep();
steps++;
check();
if (steps == 4 && winner == 'Draw') {
// winner = "Draw";
exitGame(winner);
}
console.log(steps + " step")
}
function computerStep() {
var computerChoose = Rand(0, 8);
console.log(computerChoose);
console.log(mainBox.children[computerChoose]);
if (mainBox.children[computerChoose].classList.contains("x") || mainBox.children[computerChoose].classList.contains("o")) {
computerStep();
} else {
mainBox.children[computerChoose].classList.add('o');
}
}
function Rand(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function check() {
if (mainBox.children[0].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[8].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if (mainBox.children[1].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[7].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if (mainBox.children[2].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[6].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if (mainBox.children[0].classList.contains("x") && mainBox.children[3].classList.contains("x") && mainBox.children[6].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if (mainBox.children[0].classList.contains("x") && mainBox.children[1].classList.contains("x") && mainBox.children[2].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if (mainBox.children[3].classList.contains("x") && mainBox.children[4].classList.contains("x") && mainBox.children[5].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if (mainBox.children[6].classList.contains("x") && mainBox.children[7].classList.contains("x") &&
mainBox.children[8].classList.contains("x")) {
winner = "X";
exitGame(winner);
} else if (mainBox.children[2].classList.contains("x") && mainBox.children[5].classList.contains("x") && mainBox.children[8].classList.contains("x")) {
winner = "X";
exitGame(winner);
}
////////////////
else if (mainBox.children[0].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[8].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if (mainBox.children[1].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[7].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if (mainBox.children[2].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[6].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if (mainBox.children[0].classList.contains("o") && mainBox.children[3].classList.contains("o") && mainBox.children[6].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if (mainBox.children[0].classList.contains("o") && mainBox.children[1].classList.contains("o") && mainBox.children[2].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if (mainBox.children[3].classList.contains("o") && mainBox.children[4].classList.contains("o") && mainBox.children[5].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if (mainBox.children[6].classList.contains("o") && mainBox.children[7].classList.contains("o") &&
mainBox.children[8].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else if (mainBox.children[2].classList.contains("o") && mainBox.children[5].classList.contains("o") && mainBox.children[8].classList.contains("o")) {
winner = "O";
exitGame(winner);
} else {
winner = "Draw";
return;
};
}
function exitGame(winner) {
// if(winner == 'undefined') winner=="Draw";
alert("Game over. Winner: " + winner);
window.location.href = window.location.href;
}
#main {
position: relative;
margin: 2% auto;
width: 470px;
height: auto;
text-align: center;
background-color: #fff;
}
.box {
position: relative;
padding: 10px;
border: 1px solid #ccc;
width: 120px;
height: 120px;
display: inline-block;
cursor: pointer;
background-color: floralwhite;
}
.box:hover {
background-color: aliceblue;
}
.x {
background: url('https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png');
background-size: cover;
}
.o {
background: url('https://upload.wikimedia.org/wikipedia/commons/b/be/Sundanese_digit_0.png');
background-size: cover;
}
<div id="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
children
- это уElement
,childNodes
- это уNode
.