# | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
---|---|---|---|---|---|
1 |
![]() |
1 тест |
|||
Мы начинаем «МикроШахматы на JavaScript». В начале было поле. И было на поле 64 клетки. Цель курса - запрограммировать все правила игры в шахматы. На выходе мы получим скрипт для игры в шахматы для двух игроков, с соблюдением всех правил. На этом уроке мы выведем на экран доску, используя JavaScript и HTML. В каждом уроке кроме видео есть фото-инструкция по изменению кода. Отчёт отправил: 791. Валерий Жданов Выполнено за 12 мин. [Показать отчёт] Научился: Создавать шахматное поле при помощи вложенного цикла Сложности: ничего Комментарии: На скрине шахматный контраст - черный текстовый редактор и белый браузер с табличкой |
|||||
2 | Координатное поле |
|
|||
На этом уроке мы увеличим клетки нашей доски, чтобы они были одинаковыми в любой ситуации. Уберём зазор между клетками. Так же мы раскрасим доску по правилам игры, чтобы правая-нижняя клетка была светлой. Добавим координаты слева и снизу доски, а для полноты картины добавил заголовок. Отчёт отправил: 791. Валерий Жданов Выполнено за 23 мин. [Показать отчёт] Научился: Прокачал навыки HTML, JS, css Сложности: ничего Комментарии: Ну... люди, простите... не смог удержаться, чтобы не поиграть со стилями, сделал стилевую таблицу прямо в документе. Результат получился, как на уроке ... надеюсь... я очень старался |
|||||
3 | Шахматные буквы |
1 тест |
|||
На этом уроке мы отобразим «шахматные» буквы на доске. Для этого мы создадим массив, заполним его буквами, которые кодируют фигуры по нотации FEN и сделаем их отображение в таблице. Отчёт отправил: 791. Валерий Жданов Выполнено за 15 мин. [Показать отчёт] Научился: Узнал как зовутся фигуры в аннотации, и еще организация двумерного массива в js Сложности: всё просто Комментарии: Всё получилось, буковки стоят в рядах. P.s. a text-align:center у меня в стилях уже с прошлого урока было))) |
|||||
4 | Фигуры на доске |
1 тест |
|||
На этом уроке наши фигуры обретут свой облик, для этого нам потребуется вспомогательная функция figure_to_html(), которая будет возвращать облик нужной нам фигуры в формате HTML-Unicode. Поиграемся с размером и цветом фигур. Отчёт отправил: 791. Валерий Жданов Выполнено за 15 мин. [Показать отчёт] Научился: Работать с аннотацией фигур... ну и их с размерами Сложности: Ничего Комментарии: Спасибо, урок отличный! А управлять размерами фигур из таблицы стилей удобнее))) |
|||||
5 | Светофор для фигур |
|
|||
На этом уроке мы будем отмечать, какими фигурами можно ходить и куда можно ходить. Пока реализуем простое правило: можно ходить на пустую клетку или клетку врага. Для этого мы добавим ещё один массив inf, для хранения возможных ходов выбранной фигуры. Так же мы доработаем функцию show_map (), чтобы она отображала подсказки из массива inf. Отчёт отправил: 791. Валерий Жданов Выполнено за 10 мин. [Показать отчёт] Научился: Прокачал навыки по переделке функции, узнал про то, что top - зарезервированная js переменная Сложности: Ничего Комментарии: Вместо красной предложил сделать "дорожку из желтого кирпича", как будто пешка идет в Изумрудный город. Считаю, что игра с фоновым цветом - самый яркий, простой и оптимальный для выполнения способ "шахматной навигации". |
|||||
6 | Фигурная перекличка |
2 теста |
|||
На прошлом уроке мы статично отобразили выбранную фигуру и поля, куда эта фигура может пойти. Теперь наша задача реализовать это программно. Для этого нам понадобится переменная для хранения цвета хода и реализуем функции: mark_moves_from(), can_move_from() и get_color(). Протестируем результат изменив цвет хода. Отчёт отправил: 791. Валерий Жданов Выполнено за 15 мин. [Показать отчёт] Научился: Прокачка навыков работы с цветами и доработка функций Сложности: Найти ошибочно поставленную запятую,которая приводила к невыполнению кода, но не улавливалась отладчиками Комментарии: Алгоритм работает |
|||||
7 | Шахматные выборы |
|
|||
На этом уроке мы реализуем выбор фигуры для хода через клик левой кнопкой мышки по нужной клетке. Для этого мы сформируем вызов функции click_box() с координатами клетки, по которой было нажато. Отчёт отправил: 791. Валерий Жданов Выполнено за 16 мин. [Показать отчёт] Научился: Добавлять встроенную функцию в код Сложности: Опять найти собственную опечатку Комментарии: Отличный язык javascript - позволяет добавлять функцию в код прямо на лету. Выборы, выборы - все фигуры в лидеры! |
|||||
8 | Завершение хода |
1 тест |
|||
На этом уроке мы напишем функцию click_box_to(), для движения фигуры в указанную клетку - нужно будет поменять место фигуры в матрице map. Ещё напишем функцию turn_move() для передачи права хода. Отчёт отправил: 791. Валерий Жданов Выполнено за 15 мин. [Показать отчёт] Научился: Завершать шахматный ход Сложности: ничего Комментарии: Ну вот теперь и поиграть можно))) |
|||||
9 | ЧЕТВЕРТЬФИНАЛЬНЫЙ УРОК |
без видео |
|||
Поздравляю, четверть курса позади. Предлагаю немножко передохнуть и развлечься. Напиши, чему ты научился за первую часть этого курса. Нравится ли тебе такой способ изложения материала. Какие видишь преимущества и недостатки курса. Разыграй любую партию и запиши на видео. Можно без голоса. Отчёт отправил: 791. Валерий Жданов Выполнено за 20 мин. [Показать отчёт] Научился: В первой части данного курса я научился работать с JS в части игровых стратегий: планировать игру, создавать поле-заготовку, расставлять на ней действующих лиц, совершать действия по клику кнопок, реализовывать базовые действия (ходы и удары), которые потом пригодятся в прикладных моментах Сложности: Сложностей в курсе не было (только время, но это не сложность, это самый дорогой и невосполнимый ресурс) Комментарии: В курсе понравилось - доступность объяснений преподавателя, простота и универсальность инструментов разработки (достаточно текстового редактора с подсветкой и браузера), удобство функций благодаря отсутствию фреймворков. Видеообзор: qfc2YkG9jhU |
|||||
10 | Шахматная бюрократия |
1 тест |
|||
На этом уроке мы создадим функцию, которая будет проверять, может ли фигура сходить так, как её попросят - то есть реализовать алгоритмы передвижения для каждой фигуры Отчёт отправил: 791. Валерий Жданов Выполнено за 20 мин. [Показать отчёт] Научился: Прокачал навыки с циклами и if в js Сложности: Ничего Комментарии: Работа программы действительно стала тяжелее |
|||||
11 | Кто есть кто? |
1 тест |
|||
На этом уроке мы реализуем функцию is_correct_move() и добавим в неё проверку всех возможных фигур. Так же добавим заглушки корректности хода для каждой фигуры. Протестируем функции, найдём ошибку в коде и исправим её. Отчёт отправил: 791. Валерий Жданов Выполнено за 20 мин. [Показать отчёт] Научился: Проработал все функции снова Сложности: Найти свою ошибку при тесте - в операторе сравнения вместо == поставил =, в результате вся 4-я горизонталь оказалась незакрашенной Комментарии: 12 функций за 10 минут - это рекорд!!! а самая сложная будет - наверное связанная с пешкой. |
|||||
12 | Лошадью ходи! |
1 тест |
|||
На этом уроке мы реализуем самую простую функцию: is_correct_knight_move() - конь ходит буквой Г :) Отчёт отправил: 791. Валерий Жданов Выполнено за 10 мин. [Показать отчёт] Научился: Ходить конем и программировать это Сложности: ничего Комментарии: вот честно, не думал, что с конем будет проще всего. ходы у него по шахматам довольно заковыристые. Видеообзор: str9dQWZLpE |
|||||
13 | Королевские шаги |
|
|||
На этом уроке мы реализуем функцию is_correct_king_move() Потом немного повеселимся. Увидим самый быстрый мат и отрывок из к/ф "Джентльмены удачи". Отчёт отправил: 791. Валерий Жданов Выполнено за 5 мин. [Показать отчёт] Научился: Интересной шахматной партии, а также алгоритму движения короля Сложности: Ничего Комментарии: Отличное движение короля получилось, очень простой алгоритм, но очень действенный. Иду дальше))) Видеообзор: MZUBaxHgw-8 |
|||||
14 | Горизонтальная вертикаль |
1 тест |
|||
На этом уроке мы реализуем функцию: is_correct_rook_move() Ладья ходит по вертикали или горизонтали. Отчёт отправил: 791. Валерий Жданов Выполнено за 15 мин. [Показать отчёт] Научился: Ходить ладьёй и программировать это Сложности: разобраться в алгоритме Комментарии: Всё получилось, ладья ходит по перпендикулярам |
|||||
15 | Не стой на пути! |
|
|||
На этом уроке мы доработаем функцию is_correct_rook_move(). Добавим проверку, находится ли кто-то на пути фигуры. Так же мы добавим функцию on_map() для проверки нахождения координат в пределах доски. Отчёт отправил: 791. Валерий Жданов Выполнено за 14 мин. [Показать отчёт] Научился: Ограничивать ладью Сложности: ничего Комментарии: отличное ограничение ладьи |
|||||
16 | Слоновья тропа |
|
|||
На этом уроке мы реализуем функцию: is_correct_bishop_move(), она будет похожа на is_correct_rook_move(), но с небольшими изменениями. Также оптимизируем циклы, добавим проверку границ доски. Добавим функцию is_empty(), которая будет проверять доступность хода на эту клетку. Отчёт отправил: 791. Валерий Жданов Выполнено за 20 мин. [Показать отчёт] Научился: рефакторинг + работа с координатами Сложности: ничего Комментарии: чувствую себя Александром Македонским - могу пустить в атаку армию слонов! |
|||||
17 | Дорогу Королеве! |
1 тест |
|||
На этом уроке мы ещё раз скопируем алгоритм проверки хода в функцию is_correct_queen_move(). С третьей попытки мы догадаемся вообще убрать проверку на корректность значений delta_x/delta_y. Ваше задание - предложить свой вариант выделения общего алгоритма из эти трёх функций - is_correct_move_queen/bishop/rook(). Отчёт отправил: 791. Валерий Жданов Выполнено за 20 мин. [Показать отчёт] Научился: вспомнил реализации функций, в том числе и do while Сложности: что-то придумать с рефакторингом и выносом функций Комментарии: я бы сделал две отдельные функции - 1) заполнение глобальных переменных, там где Math.sign и 2) там где do...while. но могу ошибаться... Программисты могут алгоритмы менять, Пока короли на войне... Уж не обессудьте, снова с видео... Видеообзор: GSHzhGrQOTg |
|||||
18 | Мелочь пузатая |
1 тест |
|||
На этом уроке мы порефакторим наш код, выделив общий алгоритм из трёх функций: is_correct_move_queen/bishop/rook(). Отчёт отправил: 791. Валерий Жданов Выполнено за 16 мин. [Показать отчёт] Научился: Прокачал навыки рефакторинга Сложности: Принять то, что большая функция будет разделена на много маленьких Комментарии: Результат очень понравился. Я был не готов к мелким функциям, но получилось отлично |
|||||
19 | ПОЛУФИНАЛЬНЫЙ УРОК |
без видео |
|||
Поздравляю, половина курса позади. Предлагаю немножко передохнуть и развлечься. Напиши, чему ты научился за вторую часть этого курса. Нравится ли тебе такой способ изложения материала. Какие видишь преимущества и недостатки курса. Разыграй любую партию и запиши на видео. Можно без голоса. Отчёт отправил: 791. Валерий Жданов Выполнено за 15 мин. [Показать отчёт] Научился: прокачал навыки записи шахматной партии Сложности: ничего Комментарии: Отличный курс, очень интересно изучать возможности js на примере знакомой с детства игры. буду продолжать изучение Видеообзор: EHxzMks3Ha4 |
|||||
20 | Пешкины законы |
|
|||
На этом уроке мы поговорим о пешках: + чем она отличается от других фигур? + какие у неё правила? + какие у неё исключения? Мы реализуем функцию is_correct_pawn_move() и заглушки для вспомогательных функций: is_correct_white_pawn_move() и is_correct_black_pawn_move(). Лирическое задание - найти/нарисовать интересную картинку о пешках. |
|||||
21 | Судьба пешки |
1 тест |
|||
На этом уроке мы воспользуемся сайтом draw.io для рисования схемы алгоритма пешки. На схеме отобразим следующие правила для пешек: 1. направление зависит от цвета; 2. положение может быть на горизонталях 1-6; 3. могут ходить только прямо и только на одну клетку; 4. с 1/6 горизонтали могут ходить на две клетки через пустую; 5. рубят наискосок на одно поле вперёд-влево/вправо; 6. могут рубить на битое поле (взятие на проходе); 7. на последней линии превращается в слона/коня/ладью/ферзя своего цвета. Превращение пешки будет реализовано в функции завершения хода box_click_to(). |
|||||
22 | Пешка на охоте |
1 тест |
|||
На этом уроке мы реализуем часть алгоритма для функции is_correct_white_pawn_move() на основе схемы, созданной на прошлом уроке. Добавим заглушку для функции is_pawn_passant(). |
|||||
23 | Пешка в сапогах |
|
|||
На этом уроке мы доработаем алгоритм для функции is_correct_white_pawn_move() на основе блок-схемы. Так же подкорректируем нашу схему. |
|||||
24 | Взятие на проходе шустрых пешек |
1 тест |
|||
На этом уроке мы реализуем алгоритм взятия на проходе. Для этого мы доработаем ранее созданную заглушку is_pawn_passant(). Добавим вспомогательные переменные для хранения координат возможного взятия на проходе, они нам пригодится на следующем уроке. |
|||||
25 | Радар для быстрых пешек |
1 тест |
|||
-- Куда торопимся? -- Почему превышаем? -- Покажите ваши координатики... -- Пройдёмте, пешечка, в отделение... На этом уроке мы доработаем функцию click_box_to(), добавив проверку прыгнула ли пешка через клетку.прыгнула, то мы сохраняем координаты, по которым её можно поймать. Вынесем написанный алгоритм в отдельную функцию check_pawn_attack() После чего мы уберём пешку противника в отделение для сбитых фигур. |
|||||
26 | Афроамериканская пешка |
|
|||
На этом уроке мы реализуем правила движения чёрных пешек по аналогии с белыми. Для начала мы перенесём общую проверку из функций is_correct_*_pawn_move() в функцию is_correct_pawn_move(). Доработаем функцию is_pawn_passant(). Объединим функции is_correct_*_pawn_move() в общую функцию is_correct_sign_pawn_move(). |
|||||
27 | Пешкина мечта |
1 тест |
|||
На этом уроке мы исправим ошибку в функции click_box_to(), чтобы чёрные пешки тоже могли съедать после взятия на проходе. После чего мы перенесём рабочий код в функцию check_pawn_attack(). |
|||||
28 | Волшебное превращение пешки |
|
|||
На этом уроке мы реализуем алгоритм превращения пешки. Для этого нам понадобится новая функция promote_pawn(). Выбор фигуры реализуем через функцию prompt(). Добавим проверку, чтобы можно было выбирать только разрешённые фигуры. Доработаем функцию click_box_to() - добавим вызов превращения пешки если это необходимо. |
|||||
29 | ТРЕТИЙ ЧЕТВЕРТЬФИНАЛЬНЫЙ УРОК |
без видео 1 тест |
|||
Поздравляю, три четверти курса позади. Предлагаю немножко передохнуть. Напиши, чему ты научился за третью часть этого курса. Нравится ли тебе такой способ изложения материала. Какие видишь преимущества и недостатки курса. Приложи к отчёту любую шахматную карикатуру. |
|||||
30 | Случайный шах |
|
|||
На этом уроке мы реализуем функцию is_check(), чтобы король не ходил на клетку, которая под боем. На время теста вы уберём все пешки и добавим функцию is_check() с генерируемой случайностью шаха для всех фигур на поле. |
|||||
31 | Возврат хода |
1 тест |
|||
На этом уроке мы опишем псевдокод для функции is_check(). Добавим две глобальных переменных: move_figure и to_figure. Так же добавим функции: move_figure() и back_figure(). Модернизируем функции click_box_to() и promote_pawn() для поддержки новой системы передвижения фигур по доске. |
|||||
32 | Король в розыске |
1 тест |
|||
На этом уроке мы добавим в функцию is_check() вызов move_figure() и back_figure(). Реализуем вспомогательную функцию find_figure() и поэкспериментируем. |
|||||
33 | Служба безопасности короля |
1 тест |
|||
На этом уроке мы продолжим дорабатывать функцию is_check(). Переберём все ходы противника, чтобы исключить из возможных ходов короля клетки, которые под боем. |
|||||
34 | Шах вперёд - шаг назад |
1 тест |
|||
На этом уроке мы выделим часть кода из функции is_check() в новую функцию: is_check_after_move(), которая будет вызываться для проверки возможности хода. Сама же функция is_check() останется независимой и может вызываться тогда, когда нам будет нужно. |
|||||
35 | Информационная панель |
1 тест |
|||
На этом уроке мы выведем информацию о текущем состоянии игры. Для этого мы реализуем функцию show_info(), которая будет вызываться при каждой генерации доски. Так же нам надо будет реализовать вспомогательные функции: is_checkmate() и is_stalemate(). Доработаем функцию mark_moves_from() для подсчёта количества возможных ходов текущего игрока. Оптимизируем определение очерёдности хода. |
|||||
36 | Подвиг безымянной пешки |
1 тест |
|||
На этом уроке мы добавим проверку на пешечный подвиг по спасению короля: может ли она взять на проходе вражескую пешку, которая угрожает королю шахом. Для этого вынесем проверку взятия на проходе в отдельную функцию move_pawn_attack(). Для корректной работы кода нам понадобится ещё одна функция back_pawn_attack(). |
|||||
37 | ФИНИШНАЯ ПРЯМАЯ |
без видео 1 тест |
|||
Быстро сказка сказывается, не быстро дело делается. Наша программа практически завершена, осталось самую малость - научить короля прятаться за ладьёй, это таинство называется "рокировка". Ваше задание. 1. Найти/нарисовать хорошую картинку на тему "Рокировки" и приложить её к отчёту. 2. Выписать все правила, при которых возможна рокировка. |
|||||
38 | Правила рокировки |
1 тест |
|||
На этом уроке мы обсудим правила рокировки короля. Так же обсудим необходимы действия для её совершения. Найти интересную картинку на тему рокировки. |
|||||
39 | Флаг над замком |
1 тест |
|||
На этом уроке мы создадим 4 глобальных флага: can_white_castle_left, can_white_castle_right, can_black_castle_left, can_black_castle_right. Реализуем вспомогательную функцию update_castle_flags(). |
|||||
40 | Король всемогущий |
1 тест |
|||
На этом уроке мы добавим проверку для короля, может ли он сделать рокировку - can_castle(). Добавим заглушки для вспомогательных функций: can_white_castle() и can_black_castle(). |
|||||
41 | Рокировка под шахом |
1 тест |
|||
На этом уроке мы доработаем функцию can_castle(), добавив проверку на шах и оптимизируем is_check(). |
|||||
42 | Белолевая рокировка |
1 тест |
|||
На этом уроке мы отрефакторим функцию can_castle(), добавив заглушки вспомогательных функций can_white/black_cl/cr(). |
|||||
43 | Рокировка на все времена |
1 тест |
|||
На этом уроке мы реализуем функции can_white/black_cl/cr(). | |||||
44 | Ладейный паркур |
1 тест |
|||
На этом уроке мы реализуем функцию move_castling_rook(), чтобы при рокировке наши ладьи тоже перемещались. |
|||||
45 | ФИНАЛЬНЫЙ УРОК |
без видео |
|||
Поздравляю с завершением курса! Оставь, пожалуйста, отзыв об этом курсе. Запиши видеообзор созданной программы. Напиши, что ещё можно добавить в эту программу. |
|||||
46 | VIP урок - Минное поле |
|
|||
На этом уроке мы реализуем функцию mark_attack(), чтобы отображать все битые поля на шахматной доске, куда может атаковать противник сразу после вашего хода. Доработаем функцию show_map() для отображения полей. |
|||||
47 | VIP урок - Бестолковый интеллект |
|
|||
На этом уроке мы реализуем функцию doRandMove(), для случайного выбор какой фигурой пойти, Так же столкнём два "рандомайзера" на шахматной доске. |
|||||
Итого: 47 видеоуроков |
7 час. 14 мин. 32 теста |
13 чел. | |||
Финалисты: Иван Воронин, Алексей В., Tekashnik, Артём, Сергей Соколов, Yefim, Константин, Елена, Дмитрий, Andrew, Tom, Александр Шлома, MaxB . |