# | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
---|---|---|---|---|---|
1 |
![]() |
1 тест |
|||
Мы начинаем «МикроШахматы на JavaScript». В начале было поле. И было на поле 64 клетки. Цель курса - запрограммировать все правила игры в шахматы. На выходе мы получим скрипт для игры в шахматы для двух игроков, с соблюдением всех правил. На этом уроке мы выведем на экран доску, используя JavaScript и HTML. В каждом уроке кроме видео есть фото-инструкция по изменению кода. Отчёт отправил: 24765. Anatoli Выполнено за 1 час. 31 мин. [Показать отчёт] Научился: Нарисовал в браузере шахматную доску. Сложности: Это вторая или третья попытка начать что-то писать на js. |
|||||
2 | Координатное поле |
|
|||
На этом уроке мы увеличим клетки нашей доски, чтобы они были одинаковыми в любой ситуации. Уберём зазор между клетками. Так же мы раскрасим доску по правилам игры, чтобы правая-нижняя клетка была светлой. Добавим координаты слева и снизу доски, а для полноты картины добавил заголовок. Отчёт отправил: 24765. Anatoli Выполнено за 32 мин. [Показать отчёт] Научился: Добавили стили. |
|||||
3 | Шахматные буквы |
1 тест |
|||
На этом уроке мы отобразим «шахматные» буквы на доске. Для этого мы создадим массив, заполним его буквами, которые кодируют фигуры по нотации FEN и сделаем их отображение в таблице. Отчёт отправил: 24765. Anatoli Выполнено за 20 мин. [Показать отчёт] Научился: Вывели на поле символы шахматных фигур. |
|||||
4 | Фигуры на доске |
1 тест |
|||
На этом уроке наши фигуры обретут свой облик, для этого нам потребуется вспомогательная функция figure_to_html(), которая будет возвращать облик нужной нам фигуры в формате HTML-Unicode. Поиграемся с размером и цветом фигур. Отчёт отправил: 24765. Anatoli Выполнено за 16 мин. [Показать отчёт] Научился: Вывели на экран шахматные символы из таблицы Юникода. |
|||||
5 | Светофор для фигур |
|
|||
На этом уроке мы будем отмечать, какими фигурами можно ходить и куда можно ходить. Пока реализуем простое правило: можно ходить на пустую клетку или клетку врага. Для этого мы добавим ещё один массив inf, для хранения возможных ходов выбранной фигуры. Так же мы доработаем функцию show_map (), чтобы она отображала подсказки из массива inf. Отчёт отправил: 24765. Anatoli Выполнено за 22 мин. [Показать отчёт] Научился: Создали массив информирующий о доступных ходах. Нормальный вариант, подсветки фоном доступных ходов. |
|||||
6 | Фигурная перекличка |
2 теста |
|||
На прошлом уроке мы статично отобразили выбранную фигуру и поля, куда эта фигура может пойти. Теперь наша задача реализовать это программно. Для этого нам понадобится переменная для хранения цвета хода и реализуем функции: mark_moves_from(), can_move_from() и get_color(). Протестируем результат изменив цвет хода. Отчёт отправил: 24765. Anatoli Выполнено за 49 мин. [Показать отчёт] Научился: Написали функции отметить какими фигурами можно ходить, реализовали только проверку по цвету. |
|||||
7 | Шахматные выборы |
|
|||
На этом уроке мы реализуем выбор фигуры для хода через клик левой кнопкой мышки по нужной клетке. Для этого мы сформируем вызов функции click_box() с координатами клетки, по которой было нажато. Отчёт отправил: 24765. Anatoli Выполнено за 30 мин. [Показать отчёт] Научился: Добавили обработку по нажатию на ячейку. Если с фигурой, показать доступный ход. |
|||||
8 | Завершение хода |
1 тест |
|||
На этом уроке мы напишем функцию click_box_to(), для движения фигуры в указанную клетку - нужно будет поменять место фигуры в матрице map. Ещё напишем функцию turn_move() для передачи права хода. Отчёт отправил: 24765. Anatoli Выполнено за 16 мин. [Показать отчёт] Научился: Реализовали куда ходить и переход хода. |
|||||
9 | ЧЕТВЕРТЬФИНАЛЬНЫЙ УРОК |
без видео |
|||
Поздравляю, четверть курса позади. Предлагаю немножко передохнуть и развлечься. Напиши, чему ты научился за первую часть этого курса. Нравится ли тебе такой способ изложения материала. Какие видишь преимущества и недостатки курса. Разыграй любую партию и запиши на видео. Можно без голоса. Отчёт отправил: 24765. Anatoli Выполнено за 3 мин. [Показать отчёт] Научился: Вливаюсь в изучение js, очень интересно, никогда не писал на js. Так что надеюсь изучить, через этот курс js. Видеообзор: YnVvw7xNhQU |
|||||
10 | Шахматная бюрократия |
1 тест |
|||
На этом уроке мы создадим функцию, которая будет проверять, может ли фигура сходить так, как её попросят - то есть реализовать алгоритмы передвижения для каждой фигуры Отчёт отправил: 24765. Anatoli Выполнено за 1 час. 6 мин. [Показать отчёт] Научился: Начали писать метод можно ли ходить фигурой. Тут надо узнать какой фигурой хотят ходить, проверить правила по которым ходит фигура и выдать результат возможен ли такой ход. |
|||||
11 | Кто есть кто? |
1 тест |
|||
На этом уроке мы реализуем функцию is_correct_move() и добавим в неё проверку всех возможных фигур. Так же добавим заглушки корректности хода для каждой фигуры. Протестируем функции, найдём ошибку в коде и исправим её. Отчёт отправил: 24765. Anatoli Выполнено за 3 час. 25 мин. [Показать отчёт] Научился: Запланировали проверку корректности хода выбранной фигурой. Пока есть только заглушки. Сложности: К найденой ошибке, еще добавил свою, прописал такой код var figure = map[sx, sy](правильно var figure = map[sx][sy] ) и долго потом искал эту опечатку, недоумевал почему передается не элемент, а ряд, узнал о различии var let const в js, а когда начал узнавать как в js работают массивы увидел, что у меня присваивается элемент, как в шарпе. Вот и учись теперь на шарпе и яваскрипте сразу! |
|||||
12 | Лошадью ходи! |
1 тест |
|||
На этом уроке мы реализуем самую простую функцию: is_correct_knight_move() - конь ходит буквой Г :) Отчёт отправил: 24765. Anatoli Выполнено за 45 мин. [Показать отчёт] Научился: Показываем теперь куда может ходить конь и король. |
|||||
13 | Королевские шаги |
|
|||
На этом уроке мы реализуем функцию is_correct_king_move() Потом немного повеселимся. Увидим самый быстрый мат и отрывок из к/ф "Джентльмены удачи". Отчёт отправил: 24765. Anatoli Выполнено за 1 час. 5 мин. [Показать отчёт] Научился: Реализовали ход королем. |
|||||
14 | Горизонтальная вертикаль |
1 тест |
|||
На этом уроке мы реализуем функцию: is_correct_rook_move() Ладья ходит по вертикали или горизонтали. Отчёт отправил: 24765. Anatoli Выполнено за 1 час. 21 мин. [Показать отчёт] Научился: Теперь можно видеть куда можно ходить ладья. |
|||||
15 | Не стой на пути! |
|
|||
На этом уроке мы доработаем функцию is_correct_rook_move(). Добавим проверку, находится ли кто-то на пути фигуры. Так же мы добавим функцию on_map() для проверки нахождения координат в пределах доски. Отчёт отправил: 24765. Anatoli Выполнено за 15 мин. [Показать отчёт] Научился: Теперь доступный ход ладьей уже показывается корректно. |
|||||
16 | Слоновья тропа |
|
|||
На этом уроке мы реализуем функцию: is_correct_bishop_move(), она будет похожа на is_correct_rook_move(), но с небольшими изменениями. Также оптимизируем циклы, добавим проверку границ доски. Добавим функцию is_empty(), которая будет проверять доступность хода на эту клетку. Отчёт отправил: 24765. Anatoli Выполнено за 16 мин. [Показать отчёт] Научился: Теперь показываются корректные ходы слоном. |
|||||
17 | Дорогу Королеве! |
1 тест |
|||
На этом уроке мы ещё раз скопируем алгоритм проверки хода в функцию is_correct_queen_move(). С третьей попытки мы догадаемся вообще убрать проверку на корректность значений delta_x/delta_y. Ваше задание - предложить свой вариант выделения общего алгоритма из эти трёх функций - is_correct_move_queen/bishop/rook(). Отчёт отправил: 24765. Anatoli Выполнено за 16 мин. [Показать отчёт] Научился: Теперь видны ходы ферзем тоже. Можно выделить ходы по диагонали отдельно, и по горизонтали и вертикали отдельно, а у ферзя вызывать обе функции. |
|||||
18 | Мелочь пузатая |
1 тест |
|||
На этом уроке мы порефакторим наш код, выделив общий алгоритм из трёх функций: is_correct_move_queen/bishop/rook(). Отчёт отправил: 24765. Anatoli Выполнено за 1 час. 8 мин. [Показать отчёт] Научился: Рефактор кода. |
|||||
19 | ПОЛУФИНАЛЬНЫЙ УРОК |
без видео |
|||
Поздравляю, половина курса позади. Предлагаю немножко передохнуть и развлечься. Напиши, чему ты научился за вторую часть этого курса. Нравится ли тебе такой способ изложения материала. Какие видишь преимущества и недостатки курса. Разыграй любую партию и запиши на видео. Можно без голоса. Отчёт отправил: 24765. Anatoli Выполнено за 4 мин. [Показать отчёт] Научился: Интересовал js, потому этот курс и стал изучать, но тут мало ооп, а хотелось узнать и об ооп на js. Решать все только в процедурном стиле, можно тоже, но хотелось и большего, ведь возможностей в js намного больше. |
|||||
20 | Пешкины законы |
|
|||
На этом уроке мы поговорим о пешках: + чем она отличается от других фигур? + какие у неё правила? + какие у неё исключения? Мы реализуем функцию is_correct_pawn_move() и заглушки для вспомогательных функций: is_correct_white_pawn_move() и is_correct_black_pawn_move(). Лирическое задание - найти/нарисовать интересную картинку о пешках. Отчёт отправил: 24765. Anatoli Выполнено за 26 мин. [Показать отчёт] Научился: Алгоритм пешки: Ход пешкой 1. Можно ходить от начальной позиции на одну две клетки вперед. Нет ничего не делаем. 2. Да делаем ход. 3. Есть ли фигура справа на клетку впереди? нет. 4. Да, делаем ход на клетку справа или слева. 5. Уже можно стать другой фигурой? нет, повторяем шаг 3. 6. Да становимся другой фигурой. Пословица: Вовремя пешка дороже ферзя. |
|||||
21 | Судьба пешки |
1 тест |
|||
На этом уроке мы воспользуемся сайтом draw.io для рисования схемы алгоритма пешки. На схеме отобразим следующие правила для пешек: 1. направление зависит от цвета; 2. положение может быть на горизонталях 1-6; 3. могут ходить только прямо и только на одну клетку; 4. с 1/6 горизонтали могут ходить на две клетки через пустую; 5. рубят наискосок на одно поле вперёд-влево/вправо; 6. могут рубить на битое поле (взятие на проходе); 7. на последней линии превращается в слона/коня/ладью/ферзя своего цвета. Превращение пешки будет реализовано в функции завершения хода box_click_to(). Отчёт отправил: 24765. Anatoli Выполнено за 54 мин. [Показать отчёт] Научился: Порисовал блок схемы. |
|||||
22 | Пешка на охоте |
1 тест |
|||
На этом уроке мы реализуем часть алгоритма для функции is_correct_white_pawn_move() на основе схемы, созданной на прошлом уроке. Добавим заглушку для функции is_pawn_passant(). Отчёт отправил: 24765. Anatoli Выполнено за 15 мин. [Показать отчёт] Научился: Пешка белая умеет кушать фигуры, и еще на каком поле может находиться. |
|||||
23 | Пешка в сапогах |
|
|||
На этом уроке мы доработаем алгоритм для функции is_correct_white_pawn_move() на основе блок-схемы. Так же подкорректируем нашу схему. Отчёт отправил: 24765. Anatoli Выполнено за 33 мин. [Показать отчёт] Научился: Теперь показывает правильно, возможные ходы пешкой. |
|||||
24 | Взятие на проходе шустрых пешек |
1 тест |
|||
На этом уроке мы реализуем алгоритм взятия на проходе. Для этого мы доработаем ранее созданную заглушку is_pawn_passant(). Добавим вспомогательные переменные для хранения координат возможного взятия на проходе, они нам пригодится на следующем уроке. Отчёт отправил: 24765. Anatoli Выполнено за 51 мин. [Показать отчёт] Научился: Еще только готовиться почва для реализации алгоритма взятие пешки на проходе. Белая пешка ходит на поле 5 и если рядом пешка ходит на тоже поле рядом слева или справа можно сьесть эту пешку, то есть можно сделать ход не только вперед, но и влево или вправо. |
|||||
25 | Радар для быстрых пешек |
1 тест |
|||
-- Куда торопимся? -- Почему превышаем? -- Покажите ваши координатики... -- Пройдёмте, пешечка, в отделение... На этом уроке мы доработаем функцию click_box_to(), добавив проверку прыгнула ли пешка через клетку.прыгнула, то мы сохраняем координаты, по которым её можно поймать. Вынесем написанный алгоритм в отдельную функцию check_pawn_attack() После чего мы уберём пешку противника в отделение для сбитых фигур. Отчёт отправил: 24765. Anatoli Выполнено за 2 час. 9 мин. [Показать отчёт] Научился: Белая пешка берет черную пешку на проходе. |
|||||
26 | Афроамериканская пешка |
|
|||
На этом уроке мы реализуем правила движения чёрных пешек по аналогии с белыми. Для начала мы перенесём общую проверку из функций is_correct_*_pawn_move() в функцию is_correct_pawn_move(). Доработаем функцию is_pawn_passant(). Объединим функции is_correct_*_pawn_move() в общую функцию is_correct_sign_pawn_move(). Отчёт отправил: 24765. Anatoli Выполнено за 1 час. 6 мин. [Показать отчёт] Научился: Черные берут на проходе, но вот пешка остается на поле. У белых все ок, работает, на проходе пешка забирается с поля. |
|||||
27 | Пешкина мечта |
1 тест |
|||
На этом уроке мы исправим ошибку в функции click_box_to(), чтобы чёрные пешки тоже могли съедать после взятия на проходе. После чего мы перенесём рабочий код в функцию check_pawn_attack(). Отчёт отправил: 24765. Anatoli Выполнено за 16 мин. [Показать отчёт] Научился: Теперь и черная пешка берет на проходе и небольшой рефакторинг. |
|||||
28 | Волшебное превращение пешки |
|
|||
На этом уроке мы реализуем алгоритм превращения пешки. Для этого нам понадобится новая функция promote_pawn(). Выбор фигуры реализуем через функцию prompt(). Добавим проверку, чтобы можно было выбирать только разрешённые фигуры. Доработаем функцию click_box_to() - добавим вызов превращения пешки если это необходимо. Отчёт отправил: 24765. Anatoli Выполнено за 3 час. 23 мин. [Показать отчёт] Научился: Реализовали превращение из пешки, через промпт. Сложности: Найти опечатку. |
|||||
29 | ТРЕТИЙ ЧЕТВЕРТЬФИНАЛЬНЫЙ УРОК |
без видео 1 тест |
|||
Поздравляю, три четверти курса позади. Предлагаю немножко передохнуть. Напиши, чему ты научился за третью часть этого курса. Нравится ли тебе такой способ изложения материала. Какие видишь преимущества и недостатки курса. Приложи к отчёту любую шахматную карикатуру. Отчёт отправил: 24765. Anatoli Выполнено за 17 мин. [Показать отчёт] Научился: Изучали больше программирование в процедурном стиле, но тоже толково, эту парадигму нужно знать. Хотелось узнать больше об ооп в js, но курс еще не до конца пройден увидим. Сложности: Вылавливать опечатки, причем js проглатывает все переменные инициализированы они или нет, бардак полный не соскучишься. |
|||||
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 . |