Как сделать шахматную доску в html
Добавил пользователь Алексей Ф. Обновлено: 19.09.2024
Нужно построить шахматную доску в html, только программно. Чтобы в двух полях задавать ширину и высоту, а потом строилась шахматная доска.
Лучший ответ по мнению автора
Юрьев Дмитрий Евгеньевич
Для этого можно пойти 2-я путями. 1-й это через таблицу, 2-й через
Добрый день. Меня заинтересовал ваш ответ "Для этого можно пойти 2-я путями. 1-й это через таблицу, 2-й через
Другие ответы
Дмитрий
Легче сделать таблицу и закрасить нужные клетки.
Если делать на тегах DIV, то нужно их не мало написать.
Например, общий тег, в котором все содержется:
То есть квадрат 800 на 800 пикселей. (8 клетов по 100px с каждой стороны)
Ну а потом внутри него пишем так:
Все что внутри этого тега, повторите скопировав еще семь раз, также во внутрь. Потом можете проверять, шахматная доска готова.
Юрьев Дмитрий Евгеньевич
Илья, зачем их писать эти дивы? В задаче сказато, что бы программно. К тому же нужно следить за float:left; иначе не выйдет доска))
Я это написал на HTML все, как оно будет выглядеть в коде. А с float:left; следить не нужно, все встанет на свои места как нужно! Для полной уверенности после этого кода можно еще добавить:
Ну а выводить это все в программе, это думаю не так сложно.
Если на PHP, то написать простой цикл. Например
Завести переменную $i=0; перед циклом, а в теле цикла после кода поставить $i++;
В самом теле цикла поставить функцию на определение четных и не четных чисел. Типа, если четное число в переменной $i, то присваиваем стиль к диву белый, если не четный то черный.
Я создал таблицу И не знаю, как ее раскрасить. Также необходимо распечатать имя платы (например, A1, A2,… H8) и иметь возможность вызывать любые фигурки в любой ячейке.
Для начала это код для создания таблицы:
Как заполнить конкретную ячейку цифрой (например, A3, E5, H8,…)? Рисунок – imgages.
Часть 2: Я создал панель с вашей помощью. Теперь я пытаюсь сделать еще кое-что из этого кода.
Как поместить несколько разных изображений в несколько ячеек? Я пытаюсь получить правильный рабочий код, но без успеха. Эти изображения должны появляться при загрузке таблицы (когда я нажимаю кнопку CreateTable). Я пытаюсь создать с помощью этого кода:
В этом пункте я хотел бы поставить цифры на борт. Когда я создаю таблицу, она должна быть пустой. Затем будут кнопки для добавления цифр. В начале для каждой отдельной фигуры собственная кнопка
что-то вроде этого:
Кнопка addKing в html:
обновить код предыдущего еще лучше, если я смогу собрать все вместе и выбрать, какой из них мне нравится вставить (проветить окно 1: какая цифра: “король, королева,…”, окно подсказки 2: на какой позиции вы хотели бы вставить: ‘A1, B3,…’)).
function addImage (тип, позиция) >
Когда я нажимаю кнопку “добавить изображение”, появляется окно с запросом типа (король, королева, корень,…) и местоположение (A1, B4,…) (для дальнейшего обновления, возможно, даже цвета (черный или белый), но пусть строится шаг за шагом).
Все шахматные доски, которые я хотел бы построить только в javascript и с dom.
Предполагая, что вам нужно поддерживать только современные браузеры, шахматная доска полностью работает с CSS с использованием счетчиков и сгенерированного контента:
Вышеописанное было протестировано в Chromium 24 и Firefox 19, как на Ubuntu 12.10.
И для подхода JavaScript:
Как уже упоминалось, вероятно, есть лучший способ сделать это (используя css и jQuery и т.д.), Но этот ответ придерживается того, что у вас есть.
Создайте новую переменную внутри верхнего цикла, чтобы сохранить “буквенное” имя строки (например, A, B, C).
Затем во втором цикле объедините имя строки и номер столбца.
На самом деле вам нужно сделать некоторую математику для правильной раскраски и добавления меток. Вот часть кода для магии:
Позволь мне объяснить. В первой строке вы принимаете константу 65, которая является кодом ASCII для буквы “A”. В то время как вы меняете букву по строкам, вы добавляете i counter к ней, поэтому получаете 65 + 0, 65 + 1,…, 65 + 7. Их эквиваленты ASCII (которые вы получаете с String.fromCharCode() ): A, B,…, H. Теперь, когда у вас есть эта буква, легко добавьте к ней число ячеек (j + 1) . Вы можете удалить ‘1’ и оставить только j и сделать внутренний цикл от 1 до 8.
Строки 2, 3: Цвета чередуются – каждая вторая строка имеет один и тот же цвет. Итак, просто проверьте, является ли я + j делящимся на 2.
Для добавления фигуры вам нужно сделать некоторую функцию, которая будет делать cell.innerHTML = . Но, я думаю, это для второго вопроса.
Надеюсь, я помог вам понять логику.
В случае, если кто-то ищет способ визуализации шахматной доски с использованием JS (как я это делал и случайно пришел к этому вопросу), вот отличная библиотека JS для этого.
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 к файлам скрипта. Но можно оставить и этот, т.к. скрипт поправленный и будет лежать здесь :)
Здесь нотация выводится слева от доски в столбце таблицы шириной 200 пикселов. При выводе справа надо отследить, где находится код JavaScript по отношению к контейнеру notId - если контейнер описан ниже по тексту, чем используется, в ряде браузеров это может вызвать проблему с его "опознанием" интерпретатором.
3. Почему не работает вместе с JQuery?
Когда это писалось, JQuery ещё не был так распространён. Не работает из-за конфликтующих имён. Просто замените везде в файле chessGui.js символ $ (имя функции, которое есть и в JQuery) на другое имя, например, get_Id , проверено, заработает. Ну или, если мне не изменяется память, в JQuery есть метод noConflict .
В последней версии, выложенной здесь, функция уже переименована, так что проблемы совместимости с JQuery быть не должно.
4. Скачал, развернул, запустил, вижу только "чёрные квадратики" вместо букв в нотации?
Укажите на странице с кодами скрипта кодировку Windows-1251 мета-тегом
или перекодируйте файлы скрипта в нужную вам кодировку, например, в Юникод.
5. Не получилось подключить несколько досок на одну страницу, вывод "перепутывается"?
Демо тут
Думаю многие из вас, знакомы с градиентами в CSS3 и могут использовать их для прорисовки угловых или радиальных градиентов. Но, не все знают, что с их помощью можно создавать и другие, часто используемые дизайнерские решения. Например, клетчатые узоры или полосы.
Основная идея метода заключается в следующем (CSS3 Images spec) — если несколько градиентов имеют одинаковые позиции происходит резкий переход цвета. Например, градиент для горизонтальных полос будет таким:
Самое трудное было нарисовать шахматную доску. Мне до сих пор не удалось найти способ как нарисовать правильную шахматную доску, не под углом 45°, без дополнительных градиентов. Но это будет довольно просто сделать, когда введут поддержку угловых градиентов (сейчас их нет даже в спецификации):
Если вы знаете другие интересные решения, созданные с помощью CSS3 без использования картинок, напишите о них в комментариях. Спасибо.
Читайте также: