Стань программистом!

До конца остается все меньше и меньше. Уже сейчас наше приложение вполне работоспособно. Есть несколько недочетов, которые мешают свободно пользоваться игрой. Перечислим их: Пока так, разберемся с первой проблемой. Сейчас программа, определив победителя не успевает показать финальную игровую ситуацию, потому что сразу выкидывает сообщение. Давайте сделаем так: не будем показывать сообщение, вместо этого подкрасим выигрышную линию красным цветом, если игрок кликнет по ячейке - то перейдем к третьему экрану, если игрок не кликнет, то автоматически перейдем на третий экран через пять секунд...

Мы приближаемся к финишу, друзья. На прошлом уроке мы научили компьютер играть в крестики-нолики. При этом научившись играть сами на уровне мастера. Действительно, пользуясь этой стратегией проиграть невозможно. Сейчас компьютер отвечает на наши ходы и сам отвечает на наши. Но сейчас игра не заканчивается, то есть компьютер продолжает совершать ходы когда это уже бессмысленно. Поэтому на этом уроке займемся определением победителя. Как это сделать? После каждого хода мы должны проверять игровое поле...

Продолжаем реализовывать стратегию одновременно изучая javascript. На прошлых уроках мы реализовали первые два шага стратегии. Сейчас перейдем к третьему. Согласно третьем у шагу стратегии мы должны занять самую выгодную позицию. Там есть также дополнительное условие - линия не должна быть занята противником. С этим условием разберемся позже, а сейчас просто займем самую выгодную позицию. Здесь отрабатывается вся наша стратегия. Сейчас наш код выглядит вот так: Как это работает? После нажатия на кнопку играть крестиком сменяется экран и наше приложение ожидает нашего хода...

На прошлом уроке мы остановились на том, что проверили по первому условие стратегии верхнюю горизонтальную линию. На этот урок мы поставили цель сократить этот код. В первую очередь в условия вместо переменных подставим функции: Лучше не стало, конечно, зато теперь вместо безликих переменных a, b и т.п. там стоят вполне понимаемые функции. Давайте, кстати, сделаем отдельную функцию для проверки занятости ячейки: Стало немного покороче. Сейчас мы проверяем, что ячейка пуста, проверяя наличие в ней крестика и затем нолика...

На прошлом уроке мы сыграли сами с собой несколько партий и выработали стратегию игры. Сейчас Будем ее реализовывать, точнее, начнем реализовывать. Итак, после нажатия на кнопку "Играть крестиком" прячется первый экран, появляется второй и наша программа ждет, пока мы выполним ход. Когда мы выполним ход программа анализирует по нашей стратегии игровую ситуацию и принимает решение о следующем ходе. Если мы нажмем "Играть ноликом", то программа сразу делает ход сама а затем ждет нашего хода. Выполнение хода - это несколько инструкций, которые можно и нужно сгруппировать в функцию...

Наконец мы добрались до момента, когда будем разбирать стратегию игры. Мы будем играть с компьютером, поэтому должны научить его играть, но прежде, должны научиться сами. Итак, давайте разбираться. Смысл игры в том, чтобы последовательно, друг за другом выставляя фигуры на игровом поле, сделать так, чтобы из трех одинаковых фигур сложилась линия. Линия должна проходить по вертикали, горизонтали или диагонали. Давайте сыграем несколько партий сами с собой, чтобы выявить четкий алгоритм действий. Окей, рисуем игровое поле и ставим крестик в центре...

На этом уроке мы научимся ставить правильные фигуры в ячейках игрового поля. В зависимости от выбранной нами фигуры мы будем получать в нужной ячейке крестик или нолик. Поехали! Прежде всего, давайте вспомним как работают скрипты. Когда браузер загружает страницу он читает ее и, дойдя до скриптов начинает их выполнение, Сейчас в разделе скриптов у нас объявлены функции. Функции браузер не вызывает до тех пор пока мы сами не укажем ему их вызвать, он просто сохраняет их в памяти под своими именами...

На прошлом уроке мы познакомились с основами языка javascript. На этот раз мы продолжим его изучение и сможем сделать что-то полезное. В прошлом уроке мы научились обрабатывать событие нажатия на кнопку "Играть крестиком". Сейчас при нажатии на кнопку мы показываем окошко, а что должно происходить на самом деле? На самом деле должен прятаться первый экран и показываться второй. После этого мы можем кликать мышкой по ячейкам игрового поля, то есть играть. Когда мы с вами разбирались со стилями и классами мы узнали, что можно прятать и показывать элементы при помощи стилей...

Итак, приступаем к программированию. Для начала немного теории. Нашу программу мы будем писать прямо внутри файла нашего проекта. Если помните, для хранения стилей мы использовали специальный элемент style, в котором хранили все наши стили. То же самое мы будем делать и для программы. Вся программа будет храниться в элементе script. Этот элемент мы расположим в конце файла, перед закрывающим тегом </body>: Этот элемент никак не отображается на странице, в нем просто хранится наша программа. Давайте напишем какую-нибудь простую программу: Сохраните файл и перезагрузите страницу в браузере...

А как же крестики и нолики? Действительно, я совсем забыл о самих фигурах, о крестиках и ноликах. Давайте это исправим. В этом уроке мы познакомимся с технологией SVG и посмотрим какие мощные возможности открываются перед нами при совместном использовании SVG и CSS. Поехали! SVG - Scalable Vector Graphic - масштабируемая векторная графика. Эта технология позволяет нам создавать изображения используя текстовый редактор. Давайте создадим новый файл и сохраним его под именем x.svg. Все делайте как в первом уроке, где мы сохраняли html файл, только поменяйте имя...

Продолжаем наши экзерсисы. В этом уроке мы создадим третий экран. Он простой, как и первый. Допишем еще один элемент в конец нашего файла для третьего экрана: Я сразу указал класс. На этом экране у нас должно быть сообщение о том, кто выиграл партию и одна кнопка "Начать сначала". Предлагаю не мудрить и просто скопировать содержимое первого экрана. При это мы изменим текст надписи, уберем одну кнопку и изменим ее текст: Я еще добавил класс hidden ко второму экрану, чтобы не мешался. Смотрите, что...

Итак, друзья, мы создали первый экран нашего приложения и оформили ее по нашему вкусу (точнее, по моему вкусу). Сейчас наше приложение выглядит вот так: А вот так выглядит наш исходный код: У нас готов первый экран, на этом уроке мы займемся вторым экраном. Напомню, что на втором экране находится игровое поле и кнопка "Начать заново". Ну, что ж, приступим. Первым делом спрячем первый экран, чтобы он не мешался. Это делается при помощи стилевого свойства display. Мы уже знакомы с ним, а точнее с двумя его значениями: block и inline-block...