Создайте базовые крестики-нолики за 7 шагов - для абсолютных новичков в HTML, CSS, JavaScript и jQuery
Это быстрые и грязные крестики-нолики :) Для абсолютных новичков в веб-стеке. Эта реализация крестиков-ноликов использует HTML, CSS, JavaScript и jQuery в 7 шагов.
Скачайте и посмотрите финальный код в действии
- Загрузите код из репозитория Automation School на GitHub: tictactoe-basic-in-7-steps-for-absolute-beginners
- Заходим в папку Шаг 7
- Откройте файл game7.html в браузере Chrome.
- Начни играть.
- Чтобы играть снова, просто обновите страницу в браузере и начните заново.
Пошаговая разработка кода за 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
Есть вопросы или нужна помощь?
- Напишите нам, и мы свяжемся с вами.