Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.12.2017, 22:57
Интересующийся
Отправить личное сообщение для plug-ugly Посмотреть профиль Найти все сообщения от plug-ugly
 
Регистрация: 21.08.2017
Сообщений: 27

Крестики-Нолики
Всем доброго времени суток!

Ошибка "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>
Ответить с цитированием
  #2 (permalink)  
Старый 05.12.2017, 00:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

plug-ugly,
Цитата:
не бывает элементов массива(списка элементов) с индексом равной длине массива!!!
Ответить с цитированием
  #3 (permalink)  
Старый 05.12.2017, 01:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

крестики нолики
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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Крестики нолики на js Lukashev Ваши сайты и скрипты 0 19.06.2017 06:10
Крестики нолики DivMan Events/DOM/Window 2 30.09.2016 14:37
Сравнение элементов массива по столбцам ghost200607 Общие вопросы Javascript 2 01.07.2014 10:05