C# Professional

Формула программиста
основатель — Волосатов Евгений Витольдович

НаноШахматы

На этом фотокурсе мы создадим простой шахматный скрипт
для разбора позиций или для игры вдвоём.

План фотокурса:
1. Рисуем шахматную доску с фигурами на HTML+CSS+Unicode
2. Помещаем фигуры в массив и формируем доску на PHP.
3. Делаем перемещение фигур на JavaScript.

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



Хочу купить!

Купить в рассрочку за мегахеши

Цена: 500 p.


Список уроков | фото | видео

# Название видеоурока Решило Рейтинг Доступ
1 HTML - Шахматные фигуры 74 чел. ★ 4.9 Done
  Мы начинаем ФОТОКУРС по созданию игры "шахматы".
Здесь не будет видео, только картинки.

На первом уроке мы выведем все фигуры на экран.

Отчёт отправил: 10558. Иван Воронин Выполнено за 4 мин. [Показать отчёт]
Научился: использовать айди уникод символов в теле html 
Сложности: ничего 
Комментарии: Спасибо, начало уже радует, ведь символы меньше весят, чем грузить текстурки даже если через CSS 
2 CSS - Шахматная доска 67 чел. ★ 5 Done
  На этом уроке мы создадим файл стиля chess.css
для доски и белых/чёрных клеток.
Далее создадим HTML для всей доски.
Отчёт отправил: 10558. Иван Воронин Выполнено за 17 мин. [Показать отчёт]
Научился: повторение div-вёрстки 
Сложности: ничего 
Комментарии: спасибо за урок, интрига растёт 
3 HTML - Фигуры на Доске 67 чел. ★ 5 Done
  На этом уроке мы совместим первые два урока и разместим все фигуры на доске.
Отчёт отправил: 10558. Иван Воронин Выполнено за 5 мин. [Показать отчёт]
Научился: ничему новому 
Сложности: ничего 
Комментарии: красота =) 
4 PHP - Установка EasyPHP 22 чел. ★ 4.9 Done
  Далее для работы нам потребуется технология PHP.
Для этого можно скачать и установить EasyPHP.

Отчёт отправил: 10558. Иван Воронин Выполнено за 5 мин. [Показать отчёт]
Научился: повторил пройденное 
Сложности: ничего 
Комментарии: данный урок был выполнен ещё при прохождении курса "Интернет-магазин" 
5 PHP - Запуск скрипта 21 чел. ★ 5 Done
  На этом уроке мы запустим первый скрипт на РНР.
Отчёт отправил: 10558. Иван Воронин Выполнено за 10 мин. [Показать отчёт]
Научился: повторил пройденное 
Сложности: ничего 
Комментарии: Очень важные уроки (это и прошлый) правильно сделали, что их добавили, курс стал более полноценным для новичков 
6 PHP - Циклы для клеток 58 чел. ★ 4.9 Done
  На этом уроке мы добавим щепотку РНР -
для вывода клеток будем использовать два вложенных цикла.
Функция ord() возвращает номер буквы/символа в таблице ASCII.
Отчёт отправил: 10558. Иван Воронин Выполнено за 5 мин. [Показать отчёт]
Научился: узнал о функции ord() 
Сложности: ничего 
Комментарии: спасибо, очень интересная функция, пригодится в будущем, ранее не попадались задачи для этой функции, а я всё изучаю по мере надобности так как времени нет штудировать всё подрят, спасибо ещё раз, идём дальше 
7 PHP - Массив для фигур 48 чел. ★ 4.9 Done
  На этом уроке мы создадим массив шахматной доски.
И запишем в него начальное расположение фигур.
Каждая фигура обозначается одной буквой,
согласно нотации Форсайта — Эдвардса.

Отчёт отправил: 10558. Иван Воронин Выполнено за 15 мин. [Показать отчёт]
Научился: повторение массивов 
Сложности: ничего 
Комментарии: отличный урок, подменил один одни массивы другими и вуаля =) 
8 PHP - Превращение букв 46 чел. ★ 5 Done
  На этом уроке мы напишем функцию GetFigureHTML,
которая будет переводить буквы фигур в HTML-коды.
Можно написать длинный и правильный код, либо короткий-хакерский вариант.
При выводе доски на экран нужно добавить вызов созданной функции.
Отчёт отправил: 10558. Иван Воронин Выполнено за 10 мин. [Показать отчёт]
Научился: ничего нового 
Сложности: ничего 
Комментарии: в прошлом уроке сразу подумал о switch, но решил просто подменить массивы, так как задача была вывести вместо буков иконки фигур, но лучше конечно так, чтобы в массиве хранились FEN коды, а визуализация была более наглядная, на будущее пригодится при работе с FEN кодами 
9 HTML5 - Поднятие фигур 42 чел. ★ 5 Done
  На этом уроке мы подготовим фигуры к переносу.
Для этого нам понадобятся возможности HTML 5.0 и JavaScript.
(1) Для переноса фигур нужно их поместить в отдельный блок span.
(2) Каждому span-блоку нужно выдать разрешение на перенос draggable.
(3) Каждому блоку нужно присвоить уникальный id-код, мы будем использовать координаты клеток.
После этого вы сможете хватать фигуру и таскать её по полю.

Отчёт отправил: 10558. Иван Воронин Выполнено за 5 мин. [Показать отчёт]
Научился: атрибуту draggable в теге span 
Сложности: ничего 
Комментарии: полезная вещь, с каждым уроком интрига только растёт =) 
10 JavaScript - Тронул? Коди! 40 чел. ★ 5 Done
  На этом уроке мы напишем функцию drag(), которая вызывается в самом начале переноса фигуры.
Цель этой функции - сохранить id-код span-объекта, в котором фигура расположена.
Эта информация нам понадобится при опускании фигуры.

Внимательно прочитайте все комментарии и протестируйте работу программы.
Отчёт отправил: 10558. Иван Воронин Выполнено за 10 мин. [Показать отчёт]
Научился: обработке события ondragstart 
Сложности: ничего 
Комментарии: отлично, идём дальше 
11 JavaScript - Посадку давай! 38 чел. ★ 5 Done
  Карлсон заметил, что во время таскания фигуры по доске всё время виден значок «стоянка запрещена».
Так происходит потому, что ни одна площадка не разрешает посадку нашей фигуре.
Чтобы разрешить посадку - нужно написать функцию allowDrop()
и вызывать её в атрибуте ondragover каждого divа на шахматной доске.
Теперь посадка будет разрешена, правда, пока ещё приземляться мы не умеем.
Отчёт отправил: 10558. Иван Воронин Выполнено за 15 мин. [Показать отчёт]
Научился: работе с событием ondragover 
Сложности: ничего 
Комментарии: обычным способом курсор не захватывался, пришлось снять на видео, потом нужный кадр сохранить в файл и перенести курсор в фотошопе куда надо, получилось не фонтан, но нагляднее, чем без курсора, а я так понял, что в этом уроке именно это означает, что посадка разрешена... 
12 JavaScript - Завершение хода 36 чел. ★ 5 Done
  На этом уроке мы завершим посадку фигуры на новую клетку шахматной доски.
При отпускании фигуры происходит событие ondrop,
в атрибуте которого мы сделаем вызов функции drop().
Эта функция принимает событие event.
Нам опять нужно отменить действие по умолчанию и принять полученный объект.
Помните, мы сохраняли id-код span'a, фигуру которого мы переносим?
Теперь мы получаем этот код, чтобы получить доступ к span элементу.
На этот раз в event.target находится площадка приземления,
мы используем её метод appendChild() для размещения объекта.

Отчёт отправил: 10558. Иван Воронин Выполнено за 10 мин. [Показать отчёт]
Научился: работе с событем ondrop 
Сложности: ничего 
Комментарии: не думал, что всё настолько просто, видимо уже многое делается автоматически, остаётся лишь указать пуль 
13 JavaScript - Я тебя съем! 00:02:54 36 чел. ★ 5 Done
  На этом уроке мы реализуем съедание фигур.
Для этого перед посадкой нам нужно проверить,
есть ли кто-нибудь на аэродроме? hasChildNodes()?
используем функцию removeChild() для его удаления.
Используем 0-ой номер для доступа к первому и единственному элементу.
ЗАДАНИЕ: Поставить мат и сделать скриншот.

Останется ещё один баг - если мы попробуем приземлить
фигуру на исходную клетку - она самоуничтожится.
Чтобы избежать этого добавим проверку -
если на площадке точно такая же фигура - то ничего делать не нужно.

Отчёт отправил: 10558. Иван Воронин Выполнено за 15 мин. [Показать отчёт]
Научился: работать с дочерними нодами (проверять наличие, удалять, добавлять) 
Сложности: ничего 
Комментарии: очень полезное знание, спасибо за урок 
14 ФИНАЛЬНЫЙ УРОК 29 чел. ★ 5 Done
  Мы с вами закончили создание нано Шахмат.
Для создания доски мы использовали следующие технологии:
HTML - для отображения доски
CSS - для оформления клеток
PHP - для формирования повторяющихся строк
JavaScript - для перемещения фигур.

Напиши в отчёте, понравился ли тебе этот миникурс,
что нового ты узнал, как ты ещё будешь дорабатывать свои шахматы.

Задание: Записать видео, на котором разыграть матовую комбинацию.

Какой курс ты будешь проходить следующим?
Отчёт отправил: 10558. Иван Воронин Выполнено за 3 час. 25 мин. [Показать отчёт]
Научился: работе с нодами, чилдренами и иже с ними при событиях перетаскивания объектов 
Сложности: найти идеальное решение с переносом съеденых фигур в коробку 
Комментарии: да, пришлось повозиться с формированием идеальной структуры элемента перед тем как положить его в коробку, то пустышки лезли, изза того, что пустые клетки на поле, всё же имеют ноды, просто они пустые, пришлось дописать доп. проверки для того, чтобы в коробку добавлялись теги только в том случае, если они имеют данные з.ы замечательный курс, много полезного для себя изучил, спасибо огромное, Евгений Витольдович, ко всем урокам подходите легко играючи =) 
Видеообзор: https://youtu.be/mSER-lCfo68
15 VIP. PHP - Создание картинки 38 чел. ★ 5 Done
  На этом уроке мы воспользуемся GD библиотекой
для создания картинки и рисования линий в РНР скрипте.
Отчёт отправил: 10558. Иван Воронин Выполнено за 1 час. 00 мин. [Показать отчёт]
Научился: повторение мать учения 
Сложности: ничего 
Комментарии: хех, прикольный урок, давно я линиями ничего не рисовал со времён ZX-Spectrum и БК-0010 =) спасибо, поностальгировал  
16 VIP. PAINT - Координаты отрезков 39 чел. ★ 5 Done
  На этом уроке мы поработаем с программой MS Paint.
Запустите mspaint, можете включить сетку (в старых версиях не доступно).
Используя инструмент «Линия» нарисовать 2 или 3 буквы своих инициалов.
Выписать координаты каждой линии, для этого наведите мышку
на конец каждой линии и выпишите последовательно координаты всех отрезков.
Отчёт отправил: 10558. Иван Воронин Выполнено за 23 мин. [Показать отчёт]
Научился: отображать сетку и линейки побокам 
Сложности: ничего 
Комментарии: прикольный урок, пейнтом почти не пользуюсь с тех пор, как начал пользоваться фотошопом ещё лет 16 назад минимум, поэтому даже не знал или из-за того, что это было давно, не помню чтобы была возможность отображать сетку и линейки. полезные вещи =) з.ы. много времени ушло на прицеливание, чтобы координаты были красивые =) 
17 VIP. PHP - Рисуем буквы 35 чел. ★ 5 Done
  На этом уроке мы нарисуем ваши инициалы в РНР.

Отчёт отправил: 10558. Иван Воронин Выполнено за 4 мин. [Показать отчёт]
Научился: ничему новому 
Сложности: ничего 
Комментарии: в прошлом уроки приходилось мысленно представлять координаты и формировать координаты инициалов относительно размеров картинки, тут же после того как в пейнте сформировали список координат, очень легко и быстро скопипастить статичные данные, этот урок вторая часть, а урок в пейнте первая =) они дополняют друг-друга идеально з.ы. спасибо за уроки, очень интересные, даже если ранее уже это знал. всё равно приятно напомнить самому себе о том, что давно не использовал 
  Итого:   17 видеоуроков общей продолжительностью 02 мин. 11 чел. ★ 4.98  
  Финалисты:   Сергей Соколов,   Новопашин Владимир,   Алексей В.,   Иван Воронин,   Кирилл Шмойлов,   Tekashnik,   Елена,   Константин,   Максим Лапшинов,   Дмитрий,   Николай Денисов .

Начинаем практику по языку C#




Чтобы стать хорошим программистом — нужно писать программы. На нашем сайте очень много практических упражнений.

После заполнения формы ты будешь подписан на рассылку «C# Вебинары и Видеоуроки», у тебя появится доступ к видеоурокам и консольным задачам.

Несколько раз в неделю тебе будут приходить письма — приглашения на вебинары, информация об акциях и скидках, полезная информация по C#.

Ты в любой момент сможешь отписаться от рассылки.
Научился: научилась новым интересным функциям.
Трудности: особых сложностей во время его выполнения не возникло. все было легко и интересно.
мне очень понравился этот курс, узнала много нового и интересного. спасибо большое за этот курс. :)
Можно было бы еще сделать правила для каждый фигуры. Внимание, спойлер: в шахматы я не любитель играть. поэтому в конце будет очень неожиданный ход ;) Приятного просмотра