До конца остается все меньше и меньше. Уже сейчас наше приложение вполне работоспособно. Есть несколько недочетов, которые мешают свободно пользоваться игрой. Перечислим их:
- не видно последнего хода, просто появляется сообщение, но в этот момент на экране видно предыдущее состояние игры;
- не переключается на третий экран;
- если кликнуть на непустую клетку, то программа воспринимает этот клик, как по свободной;
- не работает кнопка под игровым полем.
Пока так, разберемся с первой проблемой. Сейчас программа, определив победителя не успевает показать финальную игровую ситуацию, потому что сразу выкидывает сообщение. Давайте сделаем так: не будем показывать сообщение, вместо этого подкрасим выигрышную линию красным цветом, если игрок кликнет по ячейке - то перейдем к третьему экрану, если игрок не кликнет, то автоматически перейдем на третий экран через пять секунд.
Удалим вот эти строки:
Если сыграть теперь, то сообщение не появляется. Сделаем окраску выигравшей линии:
То есть, мы добавляем к ячейкам выигравшей линии еще один класс, который, по нашей задумке, должен менять цвет наших фигур. Такой класс можно сделать, например, вот так:
Стилевое свойство filter позволяет изменить внешний вид изображения элемента, наложив на него различные фильтры. Не будем углубляться в это здесь, просто попробуйте самостоятельно поиграть значениями и посмотреть, что получится.
Сейчас давайте проверим, как все работает. Да, по окончанию игры фигуры окрашиваются:
Теперь, если кликнуть по любой ячейке должен выполниться переход на третий экран, либо, по прошествии 5 секунд также должен выполниться переход.
Сделаем это так:
Функция переключения экранов:
Если кликнуть по ячейке, то экран переключится, пришлось немного переписать функцию обработки клика по ячейке:
Да, забыл сказать, нужно добавить переменную timer.
Теперь третье замечание, если кликнуть на непустую клетку, то программа воспринимает этот клик, как по свободной. Смысл в том, что если в ячейке стоит нолик, а мы играем крестиком, то класс x все равно добавляется и в последствии ячейка воспринимается программой как ячейка с крестиком. Здесь все просто, нужно запретить установку фигур на непустых ячейках:
Дальше, не работает кнопка "Закончить игру". Здесь все очень просто, даже не стоит писать какую-то функцию, напишем в атрибутах:
Так, все поправили. Теперь надо сделать так, чтобы на третьем экране правильно отображался результат игры. Ну и сделать кнопку, по аналогии с той, которую сделали только что:
Добавляем текст. Теперь обрабатываем клик по кнопке:
Все)
Все готово, проверяйте. Наша игра работает в полном объеме. Работают все кнопки, все переключается, стратегия отрабатывается, обыграть почти нереально. Можете попробовать поиграть на смартфоне, должно работать
Если остались вопросы - обязательно пишите их в комментариях.
Предыдущий урок | Содержание курса
Дальше мы немного доработаем эту игру, ну и напишем следующие) Новые уроки, новые курсы будут на моем блоге здесь: keklik.me.