Разработка

Задача о N-ферзях на шахматной доске. Часть первая.

Добрый день, любознательный читатель! Многим известна задача о расстановке ферзей на шахматной доске при условии, что ни один из них не находится под боем. Данная задача имеет множество алгоритмов решения, но я хочу дать решить её самостоятельно любому пользователю интернета. Всем кому интересна реализация данной логической головоломки в виде небольшой игры предлагаю ознакомиться с данной статьёй.

Инструментом для реализации нашей игры я выбрал HTML, CSS и JavaScript. Первой задачей выступает разметка игрового поля. Для представления таблицы, а именно ей является поле, в HTML используется тег <table>. Данный тег может содержать в себе теги для объявления шапки таблицы, её тела и  “подвала”, а так же теги для объединения и описаний колонок таблицы и тег для заголовка.

Для раскраски доски воспользуемся псевдоклассами CSS :nth-child(odd | even | <число> | <выражение>) и возможностью заливки фона элемента background-color: <цвет> | transparent | inherit. Для того чтобы ячейки нашей таблицы имели квадратную форму мы зададим их минимальную ширину и высоту. Так как задавать минимальную высоту ячейки напрямую нельзя, мы добавим внутрь элемент div и уже для него применимы вышеописанные параметры.

Как вы могли заметить разметка такого поля является не самым читаемым текстом, это при том, что все ячейки содержат лишь технический блок для выставления размеров.  Решить проблему повторяющейся однотипной разметки призвано динамическое создание разметки при помощи JavaScript. Я предлагаю вам познакомиться с этим подходом. Для этого нам потребуются циклы и API для создания и добавления элементов на страницу. Одно из возможных решений и его результат вы можете видеть в следующем листинге.

Программисты люди “ленивые”, поэтому и этот код, являющийся более универсальным и читаемым, может быть упрощён за счёт использования библиотек, реализующих повседневные задачи. Для динамического создания разметки воспользуемся библиотекой Knockout.js. Для генерации данных, а именно ячеек и строк из них, прекрасно, подойдёт библиотека Underscore.js.

Underscore.js предоставляет возможности функционального программирования и упрощает тем самым циклы генерации, поиска и фильтрации данных. Knockout.js позволяет разделить разметку и бизнес логику задачи на две независимые части, в которых связующим звеном является модель представления данных (View Model). Данный подход в разработке называется MVVM (Model – View – View model).

Все мы привыкли, что страницы в интернете меняются, подстраиваются, отзываются на действия пользователя. Для решения подобных задач применяются события и обработчики событий. Самыми распространенными и широко-применяемыми событиями являются click – событие нажатия основной кнопки мыши, change – реагирует на данные, вводимые пользователем. Обработчиком таких событий являются функции JavaScript, которые в свою очередь выполняют необходимые действия. Например, при вводе данных в форму регистрации пользователь своевременно получает уведомление о допущенных ошибках благодаря таким событиям и их обработчикам.

Для управления размерами шахматной доски воспользуемся элементом <input />.  Улучшить представление текстового поля под конкретную задачу помогут атрибуты type=”number” сократив возможность ввода до чисел. Атрибуты min и max ограничат, в разумных пределах, размеры поля. Чтобы поле изменялось на целое число ячеек воспользуемся атрибутом step со значением 1.

Используемая нами библиотека Knockout.js позволяет создавать модель представления данных, которая будет менять свои свойства и реагировать на внешние изменения автоматически (по заранее установленным правилам). Основным изменяющимся элементом нашей задачи является размер доски, который необходимо представить в виде объекта ko.observable(). Строки и столбцы должны быть пересчитаны в зависимости от размера. ko.pureComputed() позволяет решить эту задачу.

На стороне представления данных knockout.js так же имеет упрощенный синтаксис для работы с событиями страницы. Атрибут value – позволяет менять значение объекта ko.observable практически одновременно с тем, как пользователь набирает эти данные в текстовое поле. Посмотрим на практике, работу описанных механизмов.

На этом этапе заканчивается первая часть создание игры на основе задачи о N-ферзях на шахматной доске. Ниже Вы можете ознакомиться с полезными ресурсами для самостоятельного изучения используемых в статье инструментов.

  • https://www.w3schools.com/ на этом сайте вы найдёте описание тегов HTML и возможностей CSS;
  • http://knockoutjs.com/ сайт библиотеки для реализации паттерна проектирования MVVM в вашем веб-приложении;
  • http://underscorejs.org/ описание всех возможностей библиотеки функционального программирования;
  • https://jsfiddle.net/ ресурс для реализации своих возможностей и тренировки навыков веб-разработки.

Leave a Reply

Your email address will not be published. Required fields are marked *