Создайте базовые крестики-нолики за 7 шагов - для абсолютных новичков в HTML, CSS, JavaScript и jQuery

Это быстрые и грязные крестики-нолики :) Для абсолютных новичков в веб-стеке. Эта реализация крестиков-ноликов использует HTML, CSS, JavaScript и jQuery в 7 шагов.

Скачайте и посмотрите финальный код в действии

  1. Загрузите код из репозитория Automation School на GitHub: tictactoe-basic-in-7-steps-for-absolute-beginners
  2. Заходим в папку Шаг 7
  3. Откройте файл game7.html в браузере Chrome.
  4. Начни играть.
  5. Чтобы играть снова, просто обновите страницу в браузере и начните заново.

Пошаговая разработка кода за 7 шагов

Шаг 1

  • Используя простой HTML, создайте стартовую сетку Tic Tac Toe с некоторыми фиктивными данными и базовым стилем.
  • Концепции HTML: заголовок html, тело html, таблица, строка, столбец, заголовок h1, div, span (метка)
  • Концепции CSS: высота, ширина, граница и цвет таблицы / ячейки, размер шрифта, выравнивание текста (по центру, по левому краю и т. Д.)
  • Конечный результат: откройте файл Step 1 / game1.html в браузере Chrome, он должен выглядеть, как показано на рисунке ниже.

Шаг 2

  • Добавим в html файл 2 новых элемента: javascript-библиотеку jQuery, загрузочную CSS-библиотеку.
  • Краткий обзор DOM
  • Краткий обзор селекторов CSS по классам, элементам, атрибутам
  • Краткий обзор jQuery: управление DOM с помощью библиотеки jQuery Javascript
  • Конечный результат: откройте файл Step 2 / game2.html в браузере Chrome, он должен выглядеть, как показано на рисунке ниже.

Шаг 3

  • HTML + JS: установите начальный проигрыватель как «X».
  • CSS: задайте кнопкам разные цвета. Светло-синий (X) и светло-зеленый (O) фон.
  • JS + DOM + CSS: чтобы указать, какой игрок играет следующим, добавьте желтое выделение вокруг кнопки для «X» и снимите выделение с кнопки для «O».
  • Конечный результат: откройте файл Step 3 / game3.html в браузере Chrome, он должен выглядеть, как показано на рисунке ниже.

Шаг 4

  • HTML: очистите сетку tictactoe, чтобы она была пустой для начала. Дадим имя каждой строке и столбцу (имя строки: 0, 1, 2, имя столбца: 0, 1, 2)
  • JS + DOM + CSS:
  • Когда игрок нажимает на ячейку tictactoe, ставьте X или O в ячейку в зависимости от текущего игрока.
  • При подготовке к следующему ходу измените текущего игрока на другого игрока (например, X - ›O, O -› X) и выделите / снимите выделение кнопок игроков соответственно.
  • Обновите имя следующего игрока в разделе «Следующий ход:».
  • Конечный результат: откройте файл Step 4 / game4.html в браузере Chrome, он должен выглядеть, как показано на рисунке ниже.

Шаг 5

  • HTML: добавьте html, чтобы отображать сообщение, когда игрок делает выигрышный ход.
  • CSS: для html, который показывает сообщение о завершении игры, добавьте зеленый фон.
  • HTML + CSS: поместите div контейнера игры в html и стилизуйте его с полями в css.
  • JS: Показывать только что добавленный HTML-код для отображения информации «Игра окончена», когда игра фактически окончена! Скрывайте это до этого момента.
  • JS: Напишите логику, чтобы проверить, окончена ли игра. Пока проверяйте только горизонтальные строки и вертикальные столбцы. (Мы поговорим о диагоналях позже.)
  • Конечный результат: откройте файл Step 5 / game5.html в браузере Chrome, он должен выглядеть, как показано на рисунке ниже.

ШАГ 6

  • JS: добавьте логику, чтобы выяснить, окончена ли игра, потому что на диагоналях стоят три крестика или нолика.
  • Конечный результат: откройте файл Step 6 / game6.html в браузере Chrome, он должен выглядеть, как показано на рисунке ниже.

Шаг 7 (Последний шаг!)

  • JS: Если ячейка уже занята X или O, не позволяйте игроку менять ее!
  • JS: По окончании игры игроки больше не могут продолжать играть и менять сетку.
  • JS: Когда игра закончится, скройте строку с надписью «Следующий ход:».
  • Конечный результат: откройте файл Step 7 / game7.html в браузере Chrome, он должен выглядеть, как показано на рисунке ниже.

Следующие шаги

  • Теперь, когда у вас есть базовая игра в крестики-нолики, пришло время проявить себя еще ярче, улучшив код с помощью лучшей логики и следуя лучшим шаблонам кодирования JavaScript, например. удаление глобальных переменных с использованием let вместо var и т. д. (Код на шагах 1-7 выше написан в быстрой и грязной манере, чтобы все двигалось быстро, а также чтобы дать вам следующее упражнение: p)
  • Практикуйте больше HTML / CSS / JavaScript / jQuery

Есть вопросы или нужна помощь?