# | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
---|---|---|---|---|---|
1 |
![]() |
без видео 7 тестов |
|||
Мы начинаем ФОТОКУРС по созданию игры "шахматы". Здесь не будет видео, только картинки. На первом уроке мы выведем все фигуры на экран. Отчёт отправил: 10558. Иван Воронин Выполнено за 4 мин. [Показать отчёт] Научился: использовать айди уникод символов в теле html Сложности: ничего Комментарии: Спасибо, начало уже радует, ведь символы меньше весят, чем грузить текстурки даже если через CSS |
|||||
2 |
![]() |
без видео 4 теста |
|||
На этом уроке мы создадим файл стиля chess.css для доски и белых/чёрных клеток. Далее создадим HTML для всей доски. Отчёт отправил: 10558. Иван Воронин Выполнено за 17 мин. [Показать отчёт] Научился: повторение div-вёрстки Сложности: ничего Комментарии: спасибо за урок, интрига растёт |
|||||
3 |
![]() |
без видео 2 теста |
|||
На этом уроке мы совместим первые два урока и разместим все фигуры на доске.
Отчёт отправил: 10558. Иван Воронин Выполнено за 5 мин. [Показать отчёт] Научился: ничему новому Сложности: ничего Комментарии: красота =) |
|||||
4 | PHP - Установка EasyPHP |
без видео 1 тест |
|||
Далее для работы нам потребуется технология PHP. Для этого можно скачать и установить EasyPHP. Отчёт отправил: 10558. Иван Воронин Выполнено за 5 мин. [Показать отчёт] Научился: повторил пройденное Сложности: ничего Комментарии: данный урок был выполнен ещё при прохождении курса "Интернет-магазин" |
|||||
5 | PHP - Запуск скрипта |
без видео 2 теста |
|||
На этом уроке мы запустим первый скрипт на РНР.
Отчёт отправил: 10558. Иван Воронин Выполнено за 10 мин. [Показать отчёт] Научился: повторил пройденное Сложности: ничего Комментарии: Очень важные уроки (это и прошлый) правильно сделали, что их добавили, курс стал более полноценным для новичков |
|||||
6 | PHP - Циклы для клеток |
без видео 1 тест |
|||
На этом уроке мы добавим щепотку РНР - для вывода клеток будем использовать два вложенных цикла. Функция ord() возвращает номер буквы/символа в таблице ASCII. Отчёт отправил: 10558. Иван Воронин Выполнено за 5 мин. [Показать отчёт] Научился: узнал о функции ord() Сложности: ничего Комментарии: спасибо, очень интересная функция, пригодится в будущем, ранее не попадались задачи для этой функции, а я всё изучаю по мере надобности так как времени нет штудировать всё подрят, спасибо ещё раз, идём дальше |
|||||
7 | PHP - Массив для фигур |
без видео 2 теста |
|||
На этом уроке мы создадим массив шахматной доски. И запишем в него начальное расположение фигур. Каждая фигура обозначается одной буквой, согласно нотации Форсайта — Эдвардса. Отчёт отправил: 10558. Иван Воронин Выполнено за 15 мин. [Показать отчёт] Научился: повторение массивов Сложности: ничего Комментарии: отличный урок, подменил один одни массивы другими и вуаля =) |
|||||
8 | PHP - Превращение букв |
без видео 1 тест |
|||
На этом уроке мы напишем функцию GetFigureHTML, которая будет переводить буквы фигур в HTML-коды. Можно написать длинный и правильный код, либо короткий-хакерский вариант. При выводе доски на экран нужно добавить вызов созданной функции. Отчёт отправил: 10558. Иван Воронин Выполнено за 10 мин. [Показать отчёт] Научился: ничего нового Сложности: ничего Комментарии: в прошлом уроке сразу подумал о switch, но решил просто подменить массивы, так как задача была вывести вместо буков иконки фигур, но лучше конечно так, чтобы в массиве хранились FEN коды, а визуализация была более наглядная, на будущее пригодится при работе с FEN кодами |
|||||
9 | HTML5 - Поднятие фигур |
без видео 1 тест |
|||
На этом уроке мы подготовим фигуры к переносу. Для этого нам понадобятся возможности HTML 5.0 и JavaScript. (1) Для переноса фигур нужно их поместить в отдельный блок span. (2) Каждому span-блоку нужно выдать разрешение на перенос draggable. (3) Каждому блоку нужно присвоить уникальный id-код, мы будем использовать координаты клеток. После этого вы сможете хватать фигуру и таскать её по полю. Отчёт отправил: 10558. Иван Воронин Выполнено за 5 мин. [Показать отчёт] Научился: атрибуту draggable в теге span Сложности: ничего Комментарии: полезная вещь, с каждым уроком интрига только растёт =) |
|||||
10 | JavaScript - Тронул? Коди! |
без видео 2 теста |
|||
На этом уроке мы напишем функцию drag(), которая вызывается в самом начале переноса фигуры. Цель этой функции - сохранить id-код span-объекта, в котором фигура расположена. Эта информация нам понадобится при опускании фигуры. Внимательно прочитайте все комментарии и протестируйте работу программы. Отчёт отправил: 10558. Иван Воронин Выполнено за 10 мин. [Показать отчёт] Научился: обработке события ondragstart Сложности: ничего Комментарии: отлично, идём дальше |
|||||
11 | JavaScript - Посадку давай! |
без видео 1 тест |
|||
Карлсон заметил, что во время таскания фигуры по доске всё время виден значок «стоянка запрещена». Так происходит потому, что ни одна площадка не разрешает посадку нашей фигуре. Чтобы разрешить посадку - нужно написать функцию allowDrop() и вызывать её в атрибуте ondragover каждого divа на шахматной доске. Теперь посадка будет разрешена, правда, пока ещё приземляться мы не умеем. Отчёт отправил: 10558. Иван Воронин Выполнено за 15 мин. [Показать отчёт] Научился: работе с событием ondragover Сложности: ничего Комментарии: обычным способом курсор не захватывался, пришлось снять на видео, потом нужный кадр сохранить в файл и перенести курсор в фотошопе куда надо, получилось не фонтан, но нагляднее, чем без курсора, а я так понял, что в этом уроке именно это означает, что посадка разрешена... |
|||||
12 | JavaScript - Завершение хода |
без видео 1 тест |
|||
На этом уроке мы завершим посадку фигуры на новую клетку шахматной доски. При отпускании фигуры происходит событие ondrop, в атрибуте которого мы сделаем вызов функции drop(). Эта функция принимает событие event. Нам опять нужно отменить действие по умолчанию и принять полученный объект. Помните, мы сохраняли id-код span'a, фигуру которого мы переносим? Теперь мы получаем этот код, чтобы получить доступ к span элементу. На этот раз в event.target находится площадка приземления, мы используем её метод appendChild() для размещения объекта. Отчёт отправил: 10558. Иван Воронин Выполнено за 10 мин. [Показать отчёт] Научился: работе с событем ondrop Сложности: ничего Комментарии: не думал, что всё настолько просто, видимо уже многое делается автоматически, остаётся лишь указать пуль |
|||||
13 | JavaScript - Я тебя съем! |
1 тест |
|||
На этом уроке мы реализуем съедание фигур. Для этого перед посадкой нам нужно проверить, есть ли кто-нибудь на аэродроме? hasChildNodes()? используем функцию removeChild() для его удаления. Используем 0-ой номер для доступа к первому и единственному элементу. ЗАДАНИЕ: Поставить мат и сделать скриншот. Останется ещё один баг - если мы попробуем приземлить фигуру на исходную клетку - она самоуничтожится. Чтобы избежать этого добавим проверку - если на площадке точно такая же фигура - то ничего делать не нужно. Отчёт отправил: 10558. Иван Воронин Выполнено за 15 мин. [Показать отчёт] Научился: работать с дочерними нодами (проверять наличие, удалять, добавлять) Сложности: ничего Комментарии: очень полезное знание, спасибо за урок |
|||||
14 | ФИНАЛЬНЫЙ УРОК |
без видео 1 тест |
|||
Мы с вами закончили создание нано Шахмат. Для создания доски мы использовали следующие технологии: HTML - для отображения доски CSS - для оформления клеток PHP - для формирования повторяющихся строк JavaScript - для перемещения фигур. Напиши в отчёте, понравился ли тебе этот миникурс, что нового ты узнал, как ты ещё будешь дорабатывать свои шахматы. Задание: Записать видео, на котором разыграть матовую комбинацию. Какой курс ты будешь проходить следующим? Отчёт отправил: 10558. Иван Воронин Выполнено за 3 час. 25 мин. [Показать отчёт] Научился: работе с нодами, чилдренами и иже с ними при событиях перетаскивания объектов Сложности: найти идеальное решение с переносом съеденых фигур в коробку Комментарии: да, пришлось повозиться с формированием идеальной структуры элемента перед тем как положить его в коробку, то пустышки лезли, изза того, что пустые клетки на поле, всё же имеют ноды, просто они пустые, пришлось дописать доп. проверки для того, чтобы в коробку добавлялись теги только в том случае, если они имеют данные з.ы замечательный курс, много полезного для себя изучил, спасибо огромное, Евгений Витольдович, ко всем урокам подходите легко играючи =) Видеообзор: https://youtu.be/mSER-lCfo68 |
|||||
15 | VIP. PHP - Создание картинки |
без видео 1 тест |
|||
На этом уроке мы воспользуемся GD библиотекой для создания картинки и рисования линий в РНР скрипте. Отчёт отправил: 10558. Иван Воронин Выполнено за 1 час. 00 мин. [Показать отчёт] Научился: повторение мать учения Сложности: ничего Комментарии: хех, прикольный урок, давно я линиями ничего не рисовал со времён ZX-Spectrum и БК-0010 =) спасибо, поностальгировал |
|||||
16 | VIP. PAINT - Координаты отрезков |
без видео 1 тест |
|||
На этом уроке мы поработаем с программой MS Paint. Запустите mspaint, можете включить сетку (в старых версиях не доступно). Используя инструмент «Линия» нарисовать 2 или 3 буквы своих инициалов. Выписать координаты каждой линии, для этого наведите мышку на конец каждой линии и выпишите последовательно координаты всех отрезков. Отчёт отправил: 10558. Иван Воронин Выполнено за 23 мин. [Показать отчёт] Научился: отображать сетку и линейки побокам Сложности: ничего Комментарии: прикольный урок, пейнтом почти не пользуюсь с тех пор, как начал пользоваться фотошопом ещё лет 16 назад минимум, поэтому даже не знал или из-за того, что это было давно, не помню чтобы была возможность отображать сетку и линейки. полезные вещи =) з.ы. много времени ушло на прицеливание, чтобы координаты были красивые =) |
|||||
17 | VIP. PHP - Рисуем буквы |
без видео 1 тест |
|||
На этом уроке мы нарисуем ваши инициалы в РНР. Отчёт отправил: 10558. Иван Воронин Выполнено за 4 мин. [Показать отчёт] Научился: ничему новому Сложности: ничего Комментарии: в прошлом уроки приходилось мысленно представлять координаты и формировать координаты инициалов относительно размеров картинки, тут же после того как в пейнте сформировали список координат, очень легко и быстро скопипастить статичные данные, этот урок вторая часть, а урок в пейнте первая =) они дополняют друг-друга идеально з.ы. спасибо за уроки, очень интересные, даже если ранее уже это знал. всё равно приятно напомнить самому себе о том, что давно не использовал |
|||||
Итого: 17 видеоуроков |
02 мин. 30 тестов |
18 чел. | |||
Финалисты: Сергей Соколов, Новопашин Владимир, Алексей В., Иван Воронин, Кирилл Шмойлов, Tekashnik, Елена, Константин, Максим Лапшинов, Дмитрий, Николай Денисов, Yefim, Andrew, Слава, Dmitry Sinitsin, Tom, Александр Шлома, MaxB . |