Крестики-Нолики
Всем доброго времени суток!
Ошибка "index.html:85 Uncaught TypeError: Cannot read property '0' of undefined" Никак не пойму в чем дело, помогите советом, пожалуйста( Вот код:
<html>
<head>
<title>Крестики-Нолики</title>
<link href = "css/style.css" type = "text/css" rel = "stylesheet"/>
<script src = "https://code.jquery.com/jquery-2.1.0.js"></script> <!--Подключили библиотеку jQuery-->
</head>
<body id = "table">
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script>
//Объявление переменных
var td = document.getElementsByTagName('td');
var firstPlayer = 'X';
var secondPlayer = 'O';
//Пробег по ячейкам
for (let i = 0; i <= td.length; i++) {
hightlighted(td[i]);
showX(td[i]);
checkWin(td[i]);
}
//Подсветка ячеек
function hightlighted(cell) {
$(cell).each(function() {
$(cell).mouseover(function() {
$(cell).css('background', '#87CEEB');
});
});
$(cell).each(function() {
$(cell).mouseout(function() {
$(cell).css('background', 'white');
});
});
}
//Отображение Х и О
function showX(cell) {
$(cell).each(function() {
$(cell).click(function() {
$(cell).text(firstPlayer).unbind('click'); //поставили значение в ячейку и сразу отвязали событие по клику
if (firstPlayer === 'X') {
firstPlayer = secondPlayer;
} else {
firstPlayer = 'X';
}
});
});
}
//Определение победителя
function checkWin(cell) {
var winningCombinations = [
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6],
];
for (let i = 0; i <= winningCombinations.length; i++) {
var combination = winningCombinations[i];
if ($(cell[combination[0]]).text() === $(cell[combination[1]]).text() &&
$(cell[combination[1]]).text() === $(cell[combination[2]]).text() &&
$(cell[combination[0]]).text() !== '') {
alert('WIN!');
}
}
}
</script>
</html>
|
plug-ugly,
Цитата:
|
крестики нолики
plug-ugly,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td{
height: 40px;
border: #800080 1px solid;
width: 40px;
text-align: center;
line-height: 40px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var td = $("td");
var firstPlayer = "X";
var secondPlayer = "O";
var text = [secondPlayer, firstPlayer];
td.each(function(indx, el) {
el = $(el);
el.mouseenter(function() {
el.css("backgroundColor", "#87CEEB")
}).mouseleave(function() {
el.css("backgroundColor", "#FFFFFF")
}).click(function() {
var txt = text.reverse()[0];
el.css("backgroundColor", "#FFFFFF").text(txt);
var win = checkWin(indx, txt);
if (win) {
td.off();
alert("WIN " + txt + " !!!")
} else el.off()
})
});
function checkWin(indx, txt) {
var winningCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
return winningCombinations.some(function(el) {
return el.indexOf(indx) !== -1 && td.eq(el[0]).text() == txt && td.eq(el[1]).text() == txt && td.eq(el[2]).text() == txt
})
};
});
</script>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
|
| Часовой пояс GMT +3, время: 15:06. |