На этом уроке мы научимся ставить правильные фигуры в ячейках игрового поля. В зависимости от выбранной нами фигуры мы будем получать в нужной ячейке крестик или нолик. Поехали!
Прежде всего, давайте вспомним как работают скрипты. Когда браузер загружает страницу он читает ее и, дойдя до скриптов начинает их выполнение, Сейчас в разделе скриптов у нас объявлены функции. Функции браузер не вызывает до тех пор пока мы сами не укажем ему их вызвать, он просто сохраняет их в памяти под своими именами. Поэтому при загрузке у нас ничего не происходит, только при нажатии на кнопку вызываются функции и выполняются соответствующие действия.
Мы можем назначать функции элементам не только в атрибутах, но и в коде. Смотрите:
В строке, отмеченной оранжевым, мы удалили атрибут onclick, а в строке, отмеченной зеленым, мы добавили код, который делает то же самое, что и делалось при помощи атрибута.
Теперь смотрите, когда мы используем такую запись, мы можем использовать ключевое слово this вместо имени ячейки:
В переменной с именем this хранится элемент, которому мы назначили данную функцию. Это позволяет нам повторно использовать код, написанный ранее, в смысле, что мы можем сопоставить эту функцию любой ячейке:
Проверьте, как это работает для второй ячейки. Да, в ней тоже ставится крестик, отлично. Это можно сделать и для всех остальных ячеек, но есть путь короче. Дело в том, что javascript позволяет нам извлекать элементы сразу по несколько штук. Например, функция document.getElementsByClassName позволяет извлечь все элементы с определенным классом в массив. Массив - это тип значения, который позволяет хранить несколько значений упорядоченно, то есть под номерами. Чтобы получить значение из массива с определенным номером используются квадратные скобки - massiv[1] - получает значение из массива massiv с номером 1. В массивах значения нумеруются от нуля, первое значение имеет номер 0, второе - номер 1.
Вы можете убедиться, что это работает точно так же, как предыдущий код. Но и в этом случае нам необходимо повторить операцию девять раз. И здесь на на помощь приходят циклы. Циклы - такие конструкции, которые позволяют выполнить нужный набор инструкций, нужно количество раз:
Теперь клик по любой из ячеек рисует в ней крестик:
Как работают циклы? Цикл состоит из ключевого слова for, далее в круглых скобках находятся три инструкции, разделенные точкой с запятой, в первой инструкции мы объявляем переменную-счетчик, во второй инструкции стоит условие продолжения цикла, в третьей - действие по окончанию одного прохождения цикла. Далее в фигурных скобках следуют действия, которые будут повторяться в цикле.
Как выполняется цикл? Сначала выполняется первая инструкция из скобок, затем выполняется проверка из второй инструкции, после этого выполняются все инструкции из фигурных скобок, затем выполняется третья инструкция из скобок, после этого выполняется проверка и снова выполняются инструкции из фигурных скобок.
Вот так работает цикл. В нашем случае цикл будет выполняться и переменная-счетчик примет значения от 0 до 8 и мы пройдем по всем значениям из массива. Таким образом для каждой из ячеек будет присвоена функция-обработчик клика по ячейке.
Теперь давайте сделаем так, чтобы при клике появлялся крестик или нолик, в зависимости от того по какой кнопке мы кликнули на первом экране. Как это сделать?
Нам необходимо запомнить, то есть сохранить в переменной, по какой кнопке мы кликнули в начале, то есть, какая фигура наша. Для обозначения фигур будем использовать буквы x и o, это будет удобно. Давайте объявим переменную с именем myFigure:
Теперь мы знаем, какая была нажата кнопка и какая фигура была выбрана, смотрите, как просто теперь поставить при клике на ячейку именно ту фигуру, которая нам нужна:
Проверьте, как это работает. Работает, как надо!
Друзья, на следующем уроке мы будем разбирать стратегию игры. Так что с программированием придется завязать на пару дней, вместо этого будет немного логики, много рассуждений и картинок с пробными партиями.
Если остались вопросы - обязательно пишите их в комментариях.
Предыдущий урок | Содержание курса | Следующий урок
Подпишитесь на наш канал, чтобы не пропустить следующие уроки.
Новые уроки, новые курсы будут на моем блоге здесь: keklik.me.