Крестики-нолики

Крестики-нолики #

О проекте #

В детстве ты, возможно, играл в крестики-нолики на бумаге. А теперь представь, что эта бумага превращается в экран, и ты сам создаешь игру! Этот проект — твоя первая встреча с JavaScript. Мы пройдем через переменные, функции и анимации, чтобы твоя версия крестиков-ноликов стала не просто рабочей, но стильной и впечатляющей!

img.png

Чему научишься #

  • Переменные, функции и условия. Основы программирования, которые превратят твои идеи в работающий код.
  • Работа с DOM. Узнаешь, как JavaScript может оживить элементы твоего HTML.
  • БЭМ. Научишься осмысленно именовать классы.
  • Анимации. Добавишь еще больше зрелищности странице.

Материалы для подготовки #

Последовательный список материалов в разделе Список задач ниже.

Техническое задание #

В правом верхнем углу Figma есть кнопка Play, по нажатию на которую можно запустить интерактивный макет.

Макет приложения

  1. Программа должна соответствовать оригинальным правилам.
  2. CSS классы должны быть названы в соответствии с БЭМ методологией.
  3. При наведении на пустую клетку должна происходить анимация в соответствии с макетом: тень клетки уменьшается, а внутри клетки появляется полупрозрачный крестик или нолик, в зависимости от очереди хода. Когда пользователь убирает курсор с клетки анимация должна быть проиграна в обратном порядке.
  4. При победе одной из сторон вместо надписи “Result” должен появиться победитель “X Win!!!” или “O Win!!!”, а вместо надписи “Tic Tac Toe” кнопка “Restart”
  5. По нажатию кнопки “Restart” игра должна сброситься в исходное состояние

Заметки #

  1. Начни с верстки. Сначала сделай статически элементы с помощью HTML/CSS, а после этого добавь к ним логику на JS

Список задач #

Задания построены так, чтобы ты двигался маленькими шагами и сразу видел результат. Это снижает тревожность, помогает не перегореть и держать фокус. Эти задачи лучше выписать в заметки или напоминания и отмечать, чтобы легче видеть прогресс

Изучение технологий #

Основы программирования #

  1. Посмотреть Основы программирования для начинающих. Урок 1. Как работают программы. Решить практическое задание. Решить домашние задания.
  2. Посмотреть Основы программирования. Урок 2. Массивы. Решить домашние задания.
  3. Посмотреть Основы программирования. Урок 3. Как работает компьютер. Решить домашние задания.
  4. Посмотреть Основы программирования. Урок 4. Теория вычислимости. Решить домашние задания.
  5. Посмотреть Основы программирования. Урок 5. Функции в программировании для начинающих
  6. Побочное задание: прочитать книгу “Грокаем Алгоритмы”. Автор рассказывает про подходы к решению алгоритмов простым языком. Читай параллельно со следующими заданиями

JavaScript тренажер #

  1. Пройти Зачем нужен JavaScript?
  2. Пройти задание “Знакомимся с переключением тем”
  3. Пройти задание “Находим элемент с помощью querySelector”
  4. Пройти задание “Выводим элемент в консоль”
  5. Пройти задание “Добавляем класс элементу с помощью classList.add”
  6. Пройти задание “Объявляем переменную”
  7. Пройти задание “Знакомимся с обработчиком событий”
  8. Пройти задание “Переключаем тему по клику”
  9. Пройти задание “Знакомимся с classList.toggle”
  10. Пройти задание “Завершаем переключатель тем”
  11. Пройти задание “Знакомимся со свойством textContent”
  12. Пройти задание “Меняем текстовое содержимое элемента”
  13. Пройти задание “Раскомментируем код”
  14. Пройти задание “Получаем данные из поля ввода с помощью input.value”
  15. Пройти задание “Используем конкатенацию”
  16. Сохранить “Конспект «Основы JavaScript»” в закладки

JavaScript. Основные конструкции #

  1. Создать пустую папку для практики и инициализировать в ней git репозиторий
  2. Переменные и типы данных. Таймкоды: 0:00-17:16. Посмотреть, повторить за автором
  3. Сделать коммит
  4. Операции с переменными. Таймкоды: 17:16-28:32. Посмотреть, повторить за автором
  5. Сделать коммит
  6. Условия и конструкция switch case. Таймкоды: 28:32-41:08. Посмотреть, повторить за автором
  7. Сделать коммит
  8. Работа с массивами. Таймкоды: 41:08-1:07:53. Посмотреть, повторить за автором
  9. Сделать коммит
  10. Функции. Таймкоды: 1:07:53-1:25:05. Посмотреть, повторить за автором
  11. Сделать коммит
  12. Объекты. Таймкоды: 1:25:05-1:57:07. Посмотреть, повторить за автором
  13. Сделать коммит

Если остались вопросы, то обращайся к JavaScript учебнику. В нем теория разобрана более подробно

JavaScript. Практика #

  1. Решить задачу Конвертор температур
  2. Решить задачу Изменение IP-адреса
  3. Решить задачу Количество пассажиров на рейсе
  4. Решить задачу Сортировка людей по росту
  5. Решить задачу Драгоценности и камни

Выполнение проекта #

Коммиты бесплатные. Чем чаще ты делаешь коммиты - тем больше возможностей откатится к нужной версии в случае поломки или тупика

Верстка #

  1. Прочитать Быстрый старт БЭМ методологии. Остальные разделы опциональны
  2. Ознакомится с ТЗ и Макетом
  3. Создать проект с тремя файлами: index.html, styles.css и main.js. Подключить стили и js в html файл
  4. Подключить нормализующие стили (см. Резюме героя)
  5. Инициализировать git репозиторий и сделать коммит с текущими изменениями
  6. Создать задний фон
  7. Создать блок для игрового поля
  8. Создать элемент пустой клетки
  9. Добавить модификатор для клетки с Крестиком
  10. Добавить модификатор для клетки с Ноликом
  11. Сделать коммит с версткой без анимаций
  12. Добавить анимацию при наведении на пустую клетку
  13. Заполнить пустыми клетками игровое поле 3х3. Скорректировать стили игрового поля
  14. Добавить блок для отображения победителя с текстом “Result” по умолчанию
  15. Добавить блок с названием игры “Tic Tac Toe”
  16. Добавить кнопку “Restart”
  17. Сделать коммит с финальной версткой

Программирование #

  1. Прочитать Десять основных соглашений об именовании JavaScript. Перепроверяй себя всякий раз когда объявляешь функцию или переменную.
  2. Посмотреть методы массивов. Они помогут решить задачу проще
  3. Создать переменные для хранения состояний игры: чей сейчас ход, завершена ли игры, текущее состояние поля
  4. Добавить обработчик клика на каждую ячейку.
  5. Написать логику обработки хода (нажатия на ячейку).
    1. Определить чей сейчас ход
    2. Поставить нужную картинку на поле
    3. Проверить остались ли свободные ячейки на поле, завершена ли игра?
    4. Сменить активного игрока
  6. Сделать коммит
  7. Написать функцию проверки победителя
  8. Использовать функцию проверки победителя в обработке хода
  9. Сделать коммит
  10. Добавить обработчик кнопки “Restart”
  11. Сделать коммит
  12. Создать репозиторий на GitHub
  13. Загрузить свой проект на GitHub следуя шагам на странице репозитория

Готовые работы #

Обратная связь и контакты #

По любым вопросам пиши в чат Испытания багами, и подписывайся на канал @js_is_easy