C# Professional

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

НаноШахматы

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

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

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



Хочу купить!

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

Цена: 500 p.


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

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

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

Отчёт отправил: 8275. Tekashnik Выполнено за 12 мин. [Показать отчёт]
Научился: Узнал коды шахматных фигур 
Сложности: Придумывать, что было самым сложным 
Комментарии: Картинка в масштабе 500% Как сделать фигуры побольше? 
2 CSS - Шахматная доска 67 чел. ★ 5 Done
  На этом уроке мы создадим файл стиля chess.css
для доски и белых/чёрных клеток.
Далее создадим HTML для всей доски.
Отчёт отправил: 8275. Tekashnik Выполнено за 29 мин. [Показать отчёт]
Научился: Рисовать шахматную доску 
Сложности: Копи пастом заниматься) 
Комментарии: Теперь 25% масштаб. Эта вам не Entity FrameWork 
3 HTML - Фигуры на Доске 67 чел. ★ 5 Done
  На этом уроке мы совместим первые два урока и разместим все фигуры на доске.
Отчёт отправил: 8275. Tekashnik Выполнено за 23 мин. [Показать отчёт]
Научился: Рисовать фигуры на поле 
Сложности: Придумывать, что было самое сложное 
Комментарии: Вообще я люблю шахматы, жду когда ребенок подрастёт что бы научить его играть) 
4 PHP - Установка EasyPHP 22 чел. ★ 4.9 Done
  Далее для работы нам потребуется технология PHP.
Для этого можно скачать и установить EasyPHP.

Отчёт отправил: 8275. Tekashnik Выполнено за 17 мин. [Показать отчёт]
Научился: Устанавливать WAMP сервер 
Сложности: Установить EasyPHP 
Комментарии: Предпочитаю для таких дел WAMP-server ;) 
5 PHP - Запуск скрипта 21 чел. ★ 5 Done
  На этом уроке мы запустим первый скрипт на РНР.
Отчёт отправил: 8275. Tekashnik Выполнено за 23 мин. [Показать отчёт]
Научился: Запустил, а всё уже работает ;) 
Сложности: Придумывать, что было самым сложным 
Комментарии: Я уже давно сделал и этот курс и мат конём и слоном, только вот заметил, что уроки эти у меня почему то не сделаны, не люблю когда не 100% 
6 PHP - Циклы для клеток 58 чел. ★ 4.9 Done
  На этом уроке мы добавим щепотку РНР -
для вывода клеток будем использовать два вложенных цикла.
Функция ord() возвращает номер буквы/символа в таблице ASCII.
Отчёт отправил: 8275. Tekashnik Выполнено за 23 мин. [Показать отчёт]
Научился: всякое с php делать 
Сложности: Придумывать, что было самое сложное 
Комментарии: А искуственный интелект тоже напишем? 
7 PHP - Массив для фигур 48 чел. ★ 4.9 Done
  На этом уроке мы создадим массив шахматной доски.
И запишем в него начальное расположение фигур.
Каждая фигура обозначается одной буквой,
согласно нотации Форсайта — Эдвардса.

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

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

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

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

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

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

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

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

Какой курс ты будешь проходить следующим?
Отчёт отправил: 8275. Tekashnik Выполнено за 22 мин. [Показать отчёт]
Научился: HTML+CSS+JS+PHP как это всё вместе увязывать 
Сложности: Делать дополнительные задания 
Комментарии: Спасибо за курс, очень познавательно и интересно) Следующий шаг, чтобы срубленные фигуры сбоку появлялись) ну и контролировать как ходят фигуры 
15 VIP. PHP - Создание картинки 38 чел. ★ 5 Done
  На этом уроке мы воспользуемся GD библиотекой
для создания картинки и рисования линий в РНР скрипте.
Отчёт отправил: 8275. Tekashnik Выполнено за 31 мин. [Показать отчёт]
Научился: Рисовать в php 
Сложности: Лень рисовать инициалы 
Комментарии: А я думал нано шахматы закончились 
16 VIP. PAINT - Координаты отрезков 39 чел. ★ 5 Done
  На этом уроке мы поработаем с программой MS Paint.
Запустите mspaint, можете включить сетку (в старых версиях не доступно).
Используя инструмент «Линия» нарисовать 2 или 3 буквы своих инициалов.
Выписать координаты каждой линии, для этого наведите мышку
на конец каждой линии и выпишите последовательно координаты всех отрезков.
Отчёт отправил: 8275. Tekashnik Выполнено за 34 мин. [Показать отчёт]
Научился: Рисовать в пэинте 
Сложности: Координаты точек писать 
Комментарии: Чуть не уснул, пока это делал 
17 VIP. PHP - Рисуем буквы 35 чел. ★ 5 Done
  На этом уроке мы нарисуем ваши инициалы в РНР.

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

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




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

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

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

Ты в любой момент сможешь отписаться от рассылки.
Научился: На курсе я научился с помощью HTML+CSS+PHP+JavaScript создать неплохую основу для игры в шахматы. Правда ещё многое нужно дописать для полноценной игры: правила ходов для фигур, отображение побитых фигур, прикрутить базу данных для результатов игры и регистрацию игроков, сделать возможной игру по сети и т.д. Очень хочу реализовать игру по сети. Возможно когда-то это произойдет.
Трудности: К сожалению не имею возможности записать видео по poзыгpышy любoй партии c матовым окончанием.
Автору большое спасибо!!!. Пользователям сайта успехов в выполнении заданий!!!
Научился: Курс в целом прикольный, но, имхо, от такого фотокурса толку мало и для начинающих (а я таковым и являюсь) он скорее вреден чем полезен. Хотя, если призадуматься, кое-чему все-таки я научился: - Азы HTML - тут без наворотов; - Азы CSS - тут тоже минимум; - Азы PHP - тут уже посерьезнее, работа с циклами, массивами, функциями, пришлось даже по мелочи погуглить; - Азы JS - тут очень поверхностно и написанный код новичку не понятен, не понятны используемые сущности и их методы; - также, для абсолютного новичка в вебе, мне пришлось покопаться чтобы понять как запустить php-скрипт, не все очевидно, в какую папку положить файл, что должно быть запущено, по какому адресу запускать в браузере...
Что можно сделать? Из "красоты" самое первостепенное - чтобы фигура хваталась за середину, а не за нижний правый угол. Далее, для начала, проверку правильности ходов Консоль для вывода ходов Часы ...