C# Professional

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

НаноШахматы

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

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

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



Хочу купить!

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

Цена: 500 p.


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

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

На первом уроке мы выведем все фигуры на экран.
2 CSS - Шахматная доска 67 чел. ★ 5 $
  На этом уроке мы создадим файл стиля chess.css
для доски и белых/чёрных клеток.
Далее создадим HTML для всей доски.
3 HTML - Фигуры на Доске 67 чел. ★ 5 $
  На этом уроке мы совместим первые два урока и разместим все фигуры на доске.
4 PHP - Установка EasyPHP 22 чел. ★ 4.9 $
  Далее для работы нам потребуется технология PHP.
Для этого можно скачать и установить EasyPHP.
5 PHP - Запуск скрипта 21 чел. ★ 5 $
  На этом уроке мы запустим первый скрипт на РНР.
6 PHP - Циклы для клеток 58 чел. ★ 4.9 $
  На этом уроке мы добавим щепотку РНР -
для вывода клеток будем использовать два вложенных цикла.
Функция ord() возвращает номер буквы/символа в таблице ASCII.
7 PHP - Массив для фигур 48 чел. ★ 4.9 $
  На этом уроке мы создадим массив шахматной доски.
И запишем в него начальное расположение фигур.
Каждая фигура обозначается одной буквой,
согласно нотации Форсайта — Эдвардса.
8 PHP - Превращение букв 46 чел. ★ 5 $
  На этом уроке мы напишем функцию GetFigureHTML,
которая будет переводить буквы фигур в HTML-коды.
Можно написать длинный и правильный код, либо короткий-хакерский вариант.
При выводе доски на экран нужно добавить вызов созданной функции.
9 HTML5 - Поднятие фигур 42 чел. ★ 5 $
  На этом уроке мы подготовим фигуры к переносу.
Для этого нам понадобятся возможности HTML 5.0 и JavaScript.
(1) Для переноса фигур нужно их поместить в отдельный блок span.
(2) Каждому span-блоку нужно выдать разрешение на перенос draggable.
(3) Каждому блоку нужно присвоить уникальный id-код, мы будем использовать координаты клеток.
После этого вы сможете хватать фигуру и таскать её по полю.
10 JavaScript - Тронул? Коди! 40 чел. ★ 5 $
  На этом уроке мы напишем функцию drag(), которая вызывается в самом начале переноса фигуры.
Цель этой функции - сохранить id-код span-объекта, в котором фигура расположена.
Эта информация нам понадобится при опускании фигуры.

Внимательно прочитайте все комментарии и протестируйте работу программы.
11 JavaScript - Посадку давай! 38 чел. ★ 5 $
  Карлсон заметил, что во время таскания фигуры по доске всё время виден значок «стоянка запрещена».
Так происходит потому, что ни одна площадка не разрешает посадку нашей фигуре.
Чтобы разрешить посадку - нужно написать функцию allowDrop()
и вызывать её в атрибуте ondragover каждого divа на шахматной доске.
Теперь посадка будет разрешена, правда, пока ещё приземляться мы не умеем.
12 JavaScript - Завершение хода 36 чел. ★ 5 $
  На этом уроке мы завершим посадку фигуры на новую клетку шахматной доски.
При отпускании фигуры происходит событие ondrop,
в атрибуте которого мы сделаем вызов функции drop().
Эта функция принимает событие event.
Нам опять нужно отменить действие по умолчанию и принять полученный объект.
Помните, мы сохраняли id-код span'a, фигуру которого мы переносим?
Теперь мы получаем этот код, чтобы получить доступ к span элементу.
На этот раз в event.target находится площадка приземления,
мы используем её метод appendChild() для размещения объекта.
13 JavaScript - Я тебя съем! 00:02:54 36 чел. ★ 5 $
  На этом уроке мы реализуем съедание фигур.
Для этого перед посадкой нам нужно проверить,
есть ли кто-нибудь на аэродроме? hasChildNodes()?
используем функцию removeChild() для его удаления.
Используем 0-ой номер для доступа к первому и единственному элементу.
ЗАДАНИЕ: Поставить мат и сделать скриншот.

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

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

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

Какой курс ты будешь проходить следующим?
15 VIP. PHP - Создание картинки 38 чел. ★ 5 $
  На этом уроке мы воспользуемся GD библиотекой
для создания картинки и рисования линий в РНР скрипте.
16 VIP. PAINT - Координаты отрезков 39 чел. ★ 5 $
  На этом уроке мы поработаем с программой MS Paint.
Запустите mspaint, можете включить сетку (в старых версиях не доступно).
Используя инструмент «Линия» нарисовать 2 или 3 буквы своих инициалов.
Выписать координаты каждой линии, для этого наведите мышку
на конец каждой линии и выпишите последовательно координаты всех отрезков.
17 VIP. PHP - Рисуем буквы 35 чел. ★ 5 $
  На этом уроке мы нарисуем ваши инициалы в РНР.
  Итого:   17 видеоуроков общей продолжительностью 02 мин. 11 чел. ★ 4.98  
  Финалисты:   Сергей Соколов,   Новопашин Владимир,   Алексей В.,   Иван Воронин,   Кирилл Шмойлов,   Tekashnik,   Елена,   Константин,   Максим Лапшинов,   Дмитрий,   Николай Денисов .

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




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

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

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

Ты в любой момент сможешь отписаться от рассылки.
Научился: nauchilsia na praktike ispolzovat takije programi,kak html,javascript,php,css
kurs ochen ponravilsia,hotia v nekotorih urokah bivalo i sloznovato t.k. rabota na kompjutere na kriticheskom urovne.Kurs bil dovolno poniaten, interesen i daze azarten.Skuchat ne prihodilos.Bolsoj respekt sozdateliu saita Jevgeniju za uvlekatelnij kurs.
Научился: Очень интересный и простой пример, я не знал что так просто можно реализовать шахматы на технологии PHP и JawaScript
Трудности: Вообще не знаю JawaScript, трудно понять что за что отвечает и со скобками бывают проблемы