C# Professional

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

НаноШахматы

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

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

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



Хочу купить!

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

Цена: 500 p.


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

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

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

Отчёт отправил: 9567. Максим Выполнено за 10 мин. [Показать отчёт]
Научился: Ничему 
Сложности: Ничего 
Комментарии: Ещё раз, зачем писать "
", если можно просто "
"? 
2 CSS - Шахматная доска 68 чел. ★ 5 Done
  На этом уроке мы создадим файл стиля chess.css
для доски и белых/чёрных клеток.
Далее создадим HTML для всей доски.
Отчёт отправил: 9567. Максим Выполнено за 10 мин. [Показать отчёт]
Научился: Узнал, как работать с CSS 
Сложности: Ничего 
Комментарии: Ура, я понял, что такое CSS 
3 HTML - Фигуры на Доске 68 чел. ★ 5 Done
  На этом уроке мы совместим первые два урока и разместим все фигуры на доске.
Отчёт отправил: 9567. Максим Выполнено за 5 мин. [Показать отчёт]
Научился: Ничему 
Сложности: Текст почему-то не по центру 
Комментарии: Вроде всё правильно списал 
4 PHP - Установка EasyPHP 22 чел. ★ 4.9 $
  Далее для работы нам потребуется технология PHP.
Для этого можно скачать и установить EasyPHP.
5 PHP - Запуск скрипта 21 чел. ★ 5 $
  На этом уроке мы запустим первый скрипт на РНР.
6 PHP - Циклы для клеток 58 чел. ★ 4.9 Done
  На этом уроке мы добавим щепотку РНР -
для вывода клеток будем использовать два вложенных цикла.
Функция ord() возвращает номер буквы/символа в таблице ASCII.
Отчёт отправил: 9567. Максим Выполнено за 10 мин. [Показать отчёт]
Научился: В PHP можно инкриминировать строку 
Сложности: Ничего 
Комментарии: Всё хорошо 
7 PHP - Массив для фигур 48 чел. ★ 4.9 Done
  На этом уроке мы создадим массив шахматной доски.
И запишем в него начальное расположение фигур.
Каждая фигура обозначается одной буквой,
согласно нотации Форсайта — Эдвардса.

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

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

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

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

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

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

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

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

Какой курс ты будешь проходить следующим?
Отчёт отправил: 9567. Максим Выполнено за 10 мин. [Показать отчёт]
Научился: Использовать CSS, JavaScript и перемещать элементы 
Сложности: Ничего 
Комментарии: Если не сравнивать фото-курс с видеокурсом, а писать отзыв именно о нём, то это просто нечто! Для человека, который до этого курса о CSS и JavaScript знал только названия, я на удивление много узнал об их синтаксисе и основах применения в связке с PHP и HTML, да ещё и остался с работающей программой на выходе. И хотя используемые шаблоны вряд ли получится где-нибудь приминать, это и не нужно, так как целью этого курса (как мне кажется) было показать, как в принципе все эти языки работают и сочетаются между собой. Что удалось ему на отлично! 
15 VIP. PHP - Создание картинки 39 чел. ★ 5 $
  На этом уроке мы воспользуемся GD библиотекой
для создания картинки и рисования линий в РНР скрипте.
16 VIP. PAINT - Координаты отрезков 40 чел. ★ 5 $
  На этом уроке мы поработаем с программой MS Paint.
Запустите mspaint, можете включить сетку (в старых версиях не доступно).
Используя инструмент «Линия» нарисовать 2 или 3 буквы своих инициалов.
Выписать координаты каждой линии, для этого наведите мышку
на конец каждой линии и выпишите последовательно координаты всех отрезков.
17 VIP. PHP - Рисуем буквы 36 чел. ★ 5 $
  На этом уроке мы нарисуем ваши инициалы в РНР.
  Итого:   17 видеоуроков общей продолжительностью 02 мин. 12 чел. ★ 4.98  
  Финалисты:   Сергей Соколов,   Новопашин Владимир,   Алексей В.,   Иван Воронин,   Кирилл Шмойлов,   Tekashnik,   Елена,   Константин,   Максим Лапшинов,   Дмитрий,   Николай Денисов,   Yefim .

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




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

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

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

Ты в любой момент сможешь отписаться от рассылки.


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


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