C# Professional

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

НаноШахматы

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

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

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



Хочу купить!

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

Цена: 500 p.


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

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

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

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

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

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

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

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

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

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

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

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

Какой курс ты будешь проходить следующим?
Отчёт отправил: 10233. Виталий Выполнено за 5 мин. [Показать отчёт]
Научился: На курсе я научился с помощью HTML+CSS+PHP+JavaScript создать неплохую основу для игры в шахматы. Правда ещё многое нужно дописать для полноценной игры: правила ходов для фигур, отображение побитых фигур, прикрутить базу данных для результатов игры и регистрацию игроков, сделать возможной игру по сети и т.д. Очень хочу реализовать игру по сети. Возможно когда-то это произойдет. 
Сложности: К сожалению не имею возможности записать видео по poзыгpышy любoй партии c матовым окончанием. 
Комментарии: Автору большое спасибо!!!. Пользователям сайта успехов в выполнении заданий!!! 
15 VIP. PHP - Создание картинки 39 чел. ★ 5 Done
  На этом уроке мы воспользуемся GD библиотекой
для создания картинки и рисования линий в РНР скрипте.
Отчёт отправил: 10233. Виталий Выполнено за 30 мин. [Показать отчёт]
Научился: Научился работать с координатами для рисования своего ник-нейм. Очень интересно!!! 
Сложности: Подобрать правильные координаты чтоб было красиво 
Комментарии: Интересно! 
16 VIP. PAINT - Координаты отрезков 40 чел. ★ 5 Done
  На этом уроке мы поработаем с программой MS Paint.
Запустите mspaint, можете включить сетку (в старых версиях не доступно).
Используя инструмент «Линия» нарисовать 2 или 3 буквы своих инициалов.
Выписать координаты каждой линии, для этого наведите мышку
на конец каждой линии и выпишите последовательно координаты всех отрезков.
Отчёт отправил: 10233. Виталий Выполнено за 5 мин. [Показать отчёт]
Научился: Запускать Пеинт :-) :-) :-) p.s. поскольку я уже на предыдущем уроке нарисовал свой ник-нейм на php то сейчас в paint я нарисовал только одну букву имени. 
Сложности: ничего 
Комментарии: :-) :-) :-) 
17 VIP. PHP - Рисуем буквы 36 чел. ★ 5 Done
  На этом уроке мы нарисуем ваши инициалы в РНР.

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

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




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

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

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

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


Научился: Записывать видео
Интересный курс. Узнал много нового. Хотя курс и без видео, но оказывается и по фото можно успешно выполнять все задания. Познакомился с технологиями HTML+CSS+PHP+JavaScript. Выполнил этот курс вне очереди только потому, что он нужен для выполнения "Мат конем и слоном", который я сейчас и продолжу выполнять. На видео показан модернизированный мат Легаля. Один раз только удалось мне его поставить при игре в шахматы.


Научился: курс пойдет на зубок ) прикладываю видео шахматной партии между Билом Гейтсом и Магнусом Карлсеном вот, что значит оттавивать каждый день свои навыки. так что решайте задачи и проходите курсы каждый день. )