C# Professional

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

НаноШахматы

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

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

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



Хочу купить!

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

Цена: 500 p.


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

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

На первом уроке мы выведем все фигуры на экран.
 
9289. Voskoboinikova Ana
9286. Petuško Julija
8275. Tekashnik
5882. Александр Широков
2 CSS - Шахматная доска 67 чел. ★ 5 $
  На этом уроке мы создадим файл стиля chess.css
для доски и белых/чёрных клеток.
Далее создадим HTML для всей доски.
 
986. Антон Лазарец
5407. Дмитрий 199
9287. Vaitkevičiūtė Irma
3506. Алексей|BrisK|Кривицкий
3 HTML - Фигуры на Доске 67 чел. ★ 5 $
  На этом уроке мы совместим первые два урока и разместим все фигуры на доске.
 
1420. mirbek
10494. Алексей В.
9299. Kaznačenko Valentin
17255. Слава
4 PHP - Установка EasyPHP 22 чел. ★ 4.9 $
  Далее для работы нам потребуется технология PHP.
Для этого можно скачать и установить EasyPHP.
 
4004. Елена
17255. Слава
10748. Алексей
10494. Алексей В.
5 PHP - Запуск скрипта 21 чел. ★ 5 $
  На этом уроке мы запустим первый скрипт на РНР.
 
10748. Алексей
9014. Николай Денисов
11505. Alexey
16253. Дмитрий
6 PHP - Циклы для клеток 58 чел. ★ 4.9 $
  На этом уроке мы добавим щепотку РНР -
для вывода клеток будем использовать два вложенных цикла.
Функция ord() возвращает номер буквы/символа в таблице ASCII.
 
10670. Сергей Соколов
9365. Špakova Anastasija
10558. Иван Воронин
9369. Tautavičiūtė Anastasija
7 PHP - Массив для фигур 48 чел. ★ 4.9 $
  На этом уроке мы создадим массив шахматной доски.
И запишем в него начальное расположение фигур.
Каждая фигура обозначается одной буквой,
согласно нотации Форсайта — Эдвардса.
 
9286. Petuško Julija
9369. Tautavičiūtė Anastasija
1947. Denis
8275. Tekashnik
8 PHP - Превращение букв 46 чел. ★ 5 $
  На этом уроке мы напишем функцию GetFigureHTML,
которая будет переводить буквы фигур в HTML-коды.
Можно написать длинный и правильный код, либо короткий-хакерский вариант.
При выводе доски на экран нужно добавить вызов созданной функции.
 
9323. Алексей
9323. Алексей
9365. Špakova Anastasija
9567. Максим
9 HTML5 - Поднятие фигур 42 чел. ★ 5 $
  На этом уроке мы подготовим фигуры к переносу.
Для этого нам понадобятся возможности HTML 5.0 и JavaScript.
(1) Для переноса фигур нужно их поместить в отдельный блок span.
(2) Каждому span-блоку нужно выдать разрешение на перенос draggable.
(3) Каждому блоку нужно присвоить уникальный id-код, мы будем использовать координаты клеток.
После этого вы сможете хватать фигуру и таскать её по полю.
 
9368. Kapitanov Dmitrij
7186. roman vasilenko
16253. Дмитрий
14981. DimanDOS
10 JavaScript - Тронул? Коди! 40 чел. ★ 5 $
  На этом уроке мы напишем функцию drag(), которая вызывается в самом начале переноса фигуры.
Цель этой функции - сохранить id-код span-объекта, в котором фигура расположена.
Эта информация нам понадобится при опускании фигуры.

Внимательно прочитайте все комментарии и протестируйте работу программы.
 
16253. Дмитрий
16253. Дмитрий
9285. Bogdaškaitė Erika
6452. Кирилл Шмойлов
11 JavaScript - Посадку давай! 38 чел. ★ 5 $
  Карлсон заметил, что во время таскания фигуры по доске всё время виден значок «стоянка запрещена».
Так происходит потому, что ни одна площадка не разрешает посадку нашей фигуре.
Чтобы разрешить посадку - нужно написать функцию allowDrop()
и вызывать её в атрибуте ondragover каждого divа на шахматной доске.
Теперь посадка будет разрешена, правда, пока ещё приземляться мы не умеем.
 
10494. Алексей В.
11505. Alexey
11505. Alexey
8275. Tekashnik
12 JavaScript - Завершение хода 36 чел. ★ 5 $
  На этом уроке мы завершим посадку фигуры на новую клетку шахматной доски.
При отпускании фигуры происходит событие ondrop,
в атрибуте которого мы сделаем вызов функции drop().
Эта функция принимает событие event.
Нам опять нужно отменить действие по умолчанию и принять полученный объект.
Помните, мы сохраняли id-код span'a, фигуру которого мы переносим?
Теперь мы получаем этот код, чтобы получить доступ к span элементу.
На этот раз в event.target находится площадка приземления,
мы используем её метод appendChild() для размещения объекта.
 
10233. Виталий
9291. Varkus Maksim
4467. Alcatraz
5649. Максим Лапшинов
13 JavaScript - Я тебя съем! 00:02:54 36 чел. ★ 5 $
  На этом уроке мы реализуем съедание фигур.
Для этого перед посадкой нам нужно проверить,
есть ли кто-нибудь на аэродроме? hasChildNodes()?
используем функцию removeChild() для его удаления.
Используем 0-ой номер для доступа к первому и единственному элементу.
ЗАДАНИЕ: Поставить мат и сделать скриншот.

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

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

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

Какой курс ты будешь проходить следующим?
 
11321. Leonid Shevchenko
9567. Максим
9365. Špakova Anastasija
5649. Максим Лапшинов
15 VIP. PHP - Создание картинки 39 чел. ★ 5 $
  На этом уроке мы воспользуемся GD библиотекой
для создания картинки и рисования линий в РНР скрипте.
 
9014. Николай Денисов
10670. Сергей Соколов
9369. Tautavičiūtė Anastasija
9289. Voskoboinikova Ana
16 VIP. PAINT - Координаты отрезков 40 чел. ★ 5 $
  На этом уроке мы поработаем с программой MS Paint.
Запустите mspaint, можете включить сетку (в старых версиях не доступно).
Используя инструмент «Линия» нарисовать 2 или 3 буквы своих инициалов.
Выписать координаты каждой линии, для этого наведите мышку
на конец каждой линии и выпишите последовательно координаты всех отрезков.
 
8275. Tekashnik
7238. Константин
1947. Denis
5649. Максим Лапшинов
17 VIP. PHP - Рисуем буквы 36 чел. ★ 5 $
  На этом уроке мы нарисуем ваши инициалы в РНР.
 
9295. Šatravka Vladislav
7238. Константин
4004. Елена
4004. Елена
  Итого:   17 видеоуроков общей продолжительностью 02 мин. 12 чел. ★ 4.98  
  Финалисты:   Сергей Соколов,   Новопашин Владимир,   Алексей В.,   Иван Воронин,   Кирилл Шмойлов,   Tekashnik,   Елена,   Константин,   Максим Лапшинов,   Дмитрий,   Николай Денисов,   Yefim .

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




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

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

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

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


Научился: попрактиковался в javascript
Трудности: немножко было сложновато но кажется справился
интерестно получилось надо попробывать сделать как на том сайте


Научился: HTML+CSS+JS+PHP как это всё вместе увязывать
Трудности: Делать дополнительные задания
Спасибо за курс, очень познавательно и интересно) Следующий шаг, чтобы срубленные фигуры сбоку появлялись) ну и контролировать как ходят фигуры