Крестики-Нолики
Всем доброго времени суток!
Ошибка "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:56. |