Напишите сценарий который отобразит в окне браузера доску для игры в шахматы
Nickolay.info. JavaScript. Шахматная "ходилка" на JavaScript
updated! Показанная ниже ходилка разрабатывалась в 2009-10 гг, с тех пор и прогресс, и Javascript шагнули далеко вперёд :) Новая ходилка, основанная на библиотеках chess.js и chessboard.js, доступна в этой заметке блога, а старая, увы, больше обновляться не будет.
Другие версии скрипта можно получить здесь:
Понадобилась на одном из проектов встроенная в "движок" шахматная доска с возможностью задавать расстановки фигур, двигать шахматные фигуры по правилам и сохранять полученные позиции в одном из общепринятых форматов. Разумеется, речь не о том, чтобы реализовать на JavaScipt полноценные шахматы, но вдвоём на такой доске можно даже и поиграть.
Оказалось, велосипед изобретать не нужно, а можно воспользоваться частично готовым GUI от человека с ником Мистик (возможно, есть более новая ссылка на него).
Выглядит "ходилка" так (фигуры уже можно перетаскивать мышкой):
Все правила шахмат учитываются, так что сходить неправильно скрипт не даёт, очередность ходов также соблюдается.
Для записи позиций используется стандартная нотация Форсайта—Эдвардса, причём, можно задать позицию с помощью соответствующей кнопки формы, а текущая позиция в этой же нотации выводится под доской.
Скрипт формирует "полную" нотацию в том виде, в каком она описана в "Википедии" по ссылке выше. Часто на шахматных серверах можно скопировать из кода ссылок только расстановку фигур (то, что записано до первого пробела в строке FEN). В этом случае добавьте после расстановки хотя бы очерёдность хода - пробел и букву w (white), если ходят белые, или букву b (black) для хода чёрных. Скрипт предупредит о том, что не указана очерёдность хода, а вот остальные данные к расстановке можно не добавлять, однако, понятно, что в этом случае они будут иметь значения по умолчанию (скажем, рокировки будут считаться разрешёнными; если их нужно отключить и нет взятия на проходе, добавьте строку w - - 0 1 ).
Например, этот код, передаваемый flash-ходилке с сервера ChessPro.Ru
javascript: lookstep('g1v0n63', '5r1k/5q1p/b2p2RQ/1p3p2/p1nPp2B/2P5/1P6/R6K')
легко перенести в нашу ходилку: нажать кнопку "Задать FEN" и вставить
5r1k/5q1p/b2p2RQ/1p3p2/p1nPp2B/2P5/1P6/R6K b
- получится итоговая позиция из необычайно красивой для современных шахмат партии Юдит Полгар - Борис Гельфанд (кубок мира-2009), которую играющий чёрными Гельфанд сдал венгерской шахматной королеве.
Код для подключения на свой сайт шахматной ходилки может быть, например, таким:
Как видно, текущая версия скрипта также пишет обычную шахматную нотацию под доской. Чтобы она этого не делала, не передавайте параметр notId функциям SetFen и SetDiagram .
В этом коде адрес
можно заменить на свой URL к файлам скрипта. Но можно оставить и этот, т.к. скрипт поправленный и будет лежать здесь :)
Итак, для получения на страничке интерактивной шахматной партии, начинающейся с нужной позиции, достаточно поместить FEN-код позиции (который можно получить этим же скриптом) в качестве второго аргумента функции SetDiagram (вместо начальной расстановки rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1 ) и вставить в страничку код из листинга выше. Разумеется, если на одной странице выводится несколько партий, первые 3 тега можно не дублировать и для следующих партий включать повторно код, начиная с тега .
Первая версия скрипта (без стандартной нотации, 18 Кб)
FAQ / Типовые вопросы по шахматной "ходилке"
1. Как поменять размер доски, вид фигур и т.п.?
Поменять сами картинки в папке pieces на новые (имена картинок лучше не трогать), также поменять настройки в переменной config файла chessGui.js . Например, для картинок отсюда получаем маленькую красно-белую доску:
Возможно, при этом придётся поменять явно заданную ширину раздела, в который помещается шахматная доска:
в коде вызова скрипта (29*8=232, а 41*8=328 при прежних размерах картинок).
2. Можно ли по-другому разместить нотацию, поменять дизайн и т.п.?
Конечно, можно, например, так:
Здесь нотация выводится слева от доски в столбце таблицы шириной 200 пикселов. При выводе справа надо отследить, где находится код JavaScript по отношению к контейнеру notId - если контейнер описан ниже по тексту, чем используется, в ряде браузеров это может вызвать проблему с его "опознанием" интерпретатором.
3. Почему не работает вместе с JQuery?
Когда это писалось, JQuery ещё не был так распространён. Не работает из-за конфликтующих имён. Просто замените везде в файле chessGui.js символ $ (имя функции, которое есть и в JQuery) на другое имя, например, get_Id , проверено, заработает. Ну или, если мне не изменяется память, в JQuery есть метод noConflict .
В последней версии, выложенной здесь, функция уже переименована, так что проблемы совместимости с JQuery быть не должно.
4. Скачал, развернул, запустил, вижу только "чёрные квадратики" вместо букв в нотации?
Укажите на странице с кодами скрипта кодировку Windows-1251 мета-тегом
или перекодируйте файлы скрипта в нужную вам кодировку, например, в Юникод.
5. Не получилось подключить несколько досок на одну страницу, вывод "перепутывается"?
6. В Internet Explorer не увидел фона полей под картинками?
Где берёте такие браузеры? :) IE6 ещё не умел показывать png с прозрачным фоном. Конвертируйте любым редактором все файлы png из папки pieces в формат gif и поменяйте переменную config в файле chessGui.js :
Вот архив с готовыми картинками в gif с прозрачным фоном: pieces_gif.zip, 7 Кб.
1 Напишите сценарий, выводящий в окно браузера таблицу
случайных целых чисел.
2 Напишите сценарий, формирующий таблицу квадратов (кубов,
логарифмов, корней и т. п.) для некоторого набора чисел.
3 Используя графические изображения, созданные для задачи 3.8,
напишите сценарий, который при загрузке страницы будет
случайным образом выбирать одну из картинок и отображать ее в
окне браузера.
Перечисление своих заданий без попыток решения навивает желание задать вопрос "Сколько платите за решение?"
Написал код по вашему заданию, держите:
// task1
function writeTableOfRandomNumbers(parent) var sizes = ;
var maxRandomValue = 100;
var table = document.createElement("table");
table.setAttribute("border", "1");
for(var i = 0; i < sizes.height; ++i) var currentRow = table.insertRow(-1);
for(var j = 0; j < sizes.width; ++j) var currentCell = currentRow.insertCell(-1);
var value = Math.floor(Math.random() * maxRandomValue);
currentCell.appendChild(document.createTextNode(value));
>
>
parent.appendChild(table);
>
window.addEventListener("load", function() writeTableOfRandomNumbers(document.body);
>);
// task2
function writeTableOfFunction(parent, firstNumber, lastNumber, step, funcsArray) var table = document.createElement("table");
table.setAttribute("border", "1");
var titleRow = table.insertRow(-1);
var valuesCount = funcsArray.length;
var valueRows = [];
for(var i = 0; i < valuesCount; ++i)valueRows[i] = table.insertRow(-1);
>
for(var x = firstNumber; x < lastNumber; x += step) var titleCell = titleRow.insertCell(-1);
titleCell.appendChild(document.createTextNode(x));
titleCell.style.fontWeight = "bold";
for(var i = 0; i < valuesCount; ++i) valueRows[i].insertCell(-1).appendChild(document.createTextNode(funcsArray[i](x)));
>
>
parent.appendChild(table);
>
window.addEventListener("load", function()
var fnSquare = function(x) < return x*x; >
var funcsArray = [fnSquare, Math.sqrt, Math.log]; // квадраты, корни, логарифмы и т. п. (можно ещё в массив функций добавить)
writeTableOfFunction(document.body, 1, 10, 1, funcsArray);
>);
// task3
function showRandomPictureFromList(parent, sources_list) var table = document.createElement("img");
var randomIndex = Math.floor(Math.random() * sources_list.length);
var source = sources_list[randomIndex];
table.setAttribute("src", source);
parent.appendChild(table);
>
window.addEventListener("load", function() var sitepart = "htt"+"ps://avatars.mds.yandex.net/get-imageoftheday/"; // mail-ответы ссылки нарямую не допускает
var sources_list = [sitepart + "145844/3bc64071aa6f4c2087f5e7016944eed1/orig",
sitepart + "142379/dc09ac89adae46dfb82a6a893a231124/orig",
sitepart + "137077/4b8a52d3c40e48eeaaaf5bdda1c70447/orig",
sitepart + "142379/3849a46a92fd411caa3276a1bea66c22/orig",
sitepart + "145843/1e496ab61eba427cad4ffc8c867af94c/orig",
sitepart + "117786/579053f23c4241328c6675b117ef189c/orig",
sitepart + "117786/865b7c5285da499ab39309f039583709/orig",
sitepart + "193001/ef3349e09c3244c1b33cb190dd21cd46/orig"];
showRandomPictureFromList(document.body, sources_list);
>);
Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.
Закрыт 1 год назад .
Требуется нарисовать поле, с которым в последствии можно будет работать через логику, описанную в коде. В логике программы доска и расстановка на ней фигур описана в виде двумерного массива. Есть идея с Canvas и Rectangle , но я не понимаю, как автоматом наклепать этих Rectangle и закрасить их в соответствии с доской, после чего привязать фигуры, основываясь на опять же, двумерном массиве.
1 ответ 1
Этот ответ не зависит от ссылки в вопросе, полноценный пример использования UI в WPF "с нуля".
Я вас огорчу, но в ниже следующем примере не используется ни Canvas , не Rectangle .
- Нарисовать в интерфейсе шахматную доску с координатными метками
- Разместить на ней шахматные фигуры
- Реализовать перемещение шахматных фигур в свободные клетки пользователем с помощью мыши
Выглядит просто, поехали:
Шахматная доска с шахматами в WPF
1. MVVM, INotifyPropertyChanged , ICommand
Если кратко, то MVVM (Model View ViewModel) - это шаблон проектирования приложений, позволяющий удобно их разрабатывать за счет полного разделения логики данных (Model), интерфейса (View) и логики взаимодействия данных с интерфейсом (ViewModel). Все эти 3 слоя разрабатываются отдельно. В моем конкретном случае у меня не будет Model как таковой, так что будет немного проще, чем полноценный MVVM.
INotifyPropertyChanged - нужен для того чтобы можно было сообщать интерфейсу о том, что данные поменялись посредством вызова события PropertyChanged . По-началу будет выглядеть как магия, но вся магическая часть здесь в том, что интерфейс сам подписывается на это событие автоматически. Оно зашито в WPF, надо только пользоваться. За реализацию этого интерфейса будет отвечать простой класс, его нужно просто добавить в проект.
ICommand - прощай обработчики событий Click , команда имеет больше возможностей, позже вы увидите их. Для удобного использования команд, был создан вот такой вспомогательный класс. Его тоже просто надо добавить в проект.
2. Структура данных
Ячейка шахматного поля может быть всего в 13 состояниях: пусто или на ней 1 из 12 типов шахматных фигур (6 белых и 6 черных). Чтобы перечислить все состояния, я создам (внезапно) перечисление.
Ячейка, которая содержит это состояние, выглядит так. Кстати, вот он сразу NotifyPropertyChanged и несложный способ его использовать.
Шахматное поле будет "хитрым" классом, с одной стороны это будет двумерный массив состояний State , с другой - поле с ячейками Cell . Первое - для вас, чтобы вы легко могли в коде писать типа Board[0, 0] = State.WhiteQueen . Второе - для интерфейса, чтобы он мог все эти состояния отслеживать.
Здесь все просто, массив, индексатор State и IEnumerable , чтобы интерфейс ( ItemsControl ) мог это прожевать.
Дальше я голопом по европам, потому что кода много, а ответ не резиновый.
3. ViewModel
Здесь вся основаня логика взаимодействия с интерфейсом, собственно это основная и самая интересная часть приложения, которую вам и придется дорабатывать.
Чтобы прикрутить ViewModel к приложению, нужно, чтобы класс MainWindow выглядел следующим образом:
Да, это весь код класса MainWindow , больше в нём ничего нет :)
4. Интерфейс
Основная часть интерфейса содержит 2 кнопки и рисует шахматную доску на 64 клетки. Для того, чтобы у интерфейса получилось сделать доску из темных и светлых клеток, я написал маленький конвертер. В него передается порядковый номер ячейки 0..63, а он возвращает true или false , где true - темная клетка. Каждая клетка - тоже кнопка.
XAML основного окна получился не сложный.
И я бы закончил на этом, но так как вам будет очень сложно продвинуться дальше с шахматными фигурами не вникнув полностью в суть привязки данных, поэтому я сразу написал UserControl , которому вы передаете State , а он вам выдает картинку. Картинки векторные - Path картинок выдернут из SVG файлов, скачанных с сайта iconfinder. Вбейте там в поиск Chess и вы быстро их найдете.
И разметка юзерконтрола. Здесь я применил все приемы кунгфу при работе со стилями в WPF, которые знаю. :)
Nickolay.info. Javascript. Пример играющего шахматного скрипта на Javascript
Говорят, что есть шахматы, написанные почти на всём, от Паскаля и Си до 1С, Flash и даже Javascript. Программисты не зря так любят шахматы - эта теоретически конечная и переборная игра на самом деле требует, при грамотной реализации, применения массы эвристик и нестандартных решений, а ставший уже традиционным чемпионат мира по шахматам среди компьютерных программ (WCCC) с каждым годом привлекает всё больше внимания как шахматных, так и компьютерных профессионалов.
В этой заметке можно поиграть в простенькие шахматы на Javascript, а также скачать себе исходники скрипта.
Игра в шахматы с компьютером онлайн бесплатно без регистрации
Это - всего лишь маленький скрипт на JS и играет он слабо!
компьютер играет белыми компьютер играет черными
|