Вопрос:
Я пытаюсь создать шахматную доску именно так.
Я создал таблицу И не знаю, как ее раскрасить. Также необходимо распечатать имя платы (например, A1, A2,… H8) и иметь возможность вызывать любые фигурки в любой ячейке.
Для начала это код для создания таблицы:
<!doctype html> <html> <head> <meta charset=»utf-8″> <title>ChessBoard</title> <script type=»text/javascript»> function CreateTable(){ var poz = document.getElementById(‘space’); // createing table adn inserting into document tab = document.createElement(‘table’); poz.appendChild(tab); tab.border = ‘5’; for (var i = 0; i < 8; i++){ // creating row and inserting into document var row = tab.insertRow(i); for(var j = 0; j < 8; j++){ // creating cells and fill with data (numbers) var cell = row.insertCell(j); cell.innerHTML = i*j; cell.style.backgroundColor = ‘blue’; cell.style.color = ‘white’; cell.style.height = ’50px’; cell.style.width = ’50px’; }; }; } </script> </head> <body onload=»CreateTable()» id =»space»> </body> </html>
Как заполнить конкретную ячейку цифрой (например, A3, E5, H8,…)? Рисунок – imgages.
Часть 2: Я создал панель с вашей помощью. Теперь я пытаюсь сделать еще кое-что из этого кода.
-
Как поместить несколько разных изображений в несколько ячеек? Я пытаюсь получить правильный рабочий код, но без успеха. Эти изображения должны появляться при загрузке таблицы (когда я нажимаю кнопку CreateTable). Я пытаюсь создать с помощью этого кода:
-
В этом пункте я хотел бы поставить цифры на борт. Когда я создаю таблицу, она должна быть пустой. Затем будут кнопки для добавления цифр. В начале для каждой отдельной фигуры собственная кнопка
что-то вроде этого:
function addKing(idStr){ cell = document.getElementById(idStr); if(cell != null){ // works for color, doesn’t work for images!! // cell.style.backgroundColor = ‘red’; cell.src = ‘http://akramar.byethost8.com/images/SplProg/DN3/images/50px/king_m.png’ } }
Кнопка addKing в html:
<button id=»king» onclick=»addKing(prompt(‘Insert field’))»>Add King</button>
-
обновить код предыдущего еще лучше, если я смогу собрать все вместе и выбрать, какой из них мне нравится вставить (проветить окно 1: какая цифра: “король, королева,…”, окно подсказки 2: на какой позиции вы хотели бы вставить: ‘A1, B3,…’)).
function addImage (тип, позиция) {var img =?? } }
Когда я нажимаю кнопку “добавить изображение”, появляется окно с запросом типа (король, королева, корень,…) и местоположение (A1, B4,…) (для дальнейшего обновления, возможно, даже цвета (черный или белый), но пусть строится шаг за шагом).
Все шахматные доски, которые я хотел бы построить только в javascript и с dom.
ссылка на нерабочий exaple: jsfiddle
Ответ №1
Предполагая, что вам нужно поддерживать только современные браузеры, шахматная доска полностью работает с CSS с использованием счетчиков и сгенерированного контента:
table { empty-cells: show; } td { width: 2em; height: 2em; line-height: 2em; text-align: center; border: 1px solid #000; } tbody tr:nth-child(odd) td:nth-child(even), tbody tr:nth-child(even) td:nth-child(odd) { color: #fff; background-color: #00f; } tbody tr:nth-child(even) td:nth-child(even), tbody tr:nth-child(odd) td:nth-child(odd) { background-color: #999; } tbody { counter-reset: rowNumber; } tr { counter-increment: rowNumber; counter-reset: cellNumber; } td { counter-increment: cellNumber; } td::before { content: counter(rowNumber, upper-alpha) counter(cellNumber, decimal); }
Вышеописанное было протестировано в Chromium 24 и Firefox 19, как на Ubuntu 12.10.
И для подхода JavaScript:
var chess = { createBoard: function (dimension) { if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) { return false; } else { dimension = typeof dimension === ‘string’ ? parseInt(dimension, 10) : dimension; var table = document.createElement(‘table’), tbody = document.createElement(‘tbody’), row = document.createElement(‘tr’), cell = document.createElement(‘td’), rowClone, cellClone; table.appendChild(tbody); for (var r = 0; r < dimension; r++) { rowClone = row.cloneNode(true); tbody.appendChild(rowClone); for (var c = 0; c < dimension; c++) { cellClone = cell.cloneNode(true); rowClone.appendChild(cellClone); } } document.body.appendChild(table); chess.enumerateBoard(table); } }, enumerateBoard : function (board) { var rows = board.getElementsByTagName(‘tr’), text = document.createTextNode(), rowCounter, len, cells; for (var r = 0, size = rows.length; r<size; r++){ rowCounter = String.fromCharCode(65 + r); cells = rows[r].getElementsByTagName(‘td’); len = cells.length; rows[r].className = r%2 == 0 ? ‘even’ : ‘odd’; for (var i = 0; i<len; i++){ cells[i].className = i%2 == 0 ? ‘even’ : ‘odd’; cells[i].appendChild(text.cloneNode()); cells[i].firstChild.nodeValue = rowCounter + i; } } } }; chess.createBoard(10);
Ответ №2
Вы можете привязать идентификатор к ячейке, а затем использовать этот идентификатор для ссылки и обновить фон по мере необходимости. Вот один пример использования вашего кода: http://jsfiddle.net/7Z6hJ
function CreateTable(){ var poz = document.getElementById(‘space’); // createing table adn inserting into document tab = document.createElement(‘table’); poz.appendChild(tab); tab.border = ‘5’; for (var i = 0; i < 8; i++){ // creating row and inserting into document var row = tab.insertRow(i); for(var j = 0; j < 8; j++){ // creating cells and fill with data (numbers) var cell = row.insertCell(j); var idStr = String.fromCharCode(97 + i).toUpperCase() + (j+1); cell.innerHTML = idStr; cell.id = idStr; cell.style.backgroundColor = ‘blue’; cell.style.color = ‘white’; cell.style.height = ’50px’; cell.style.width = ’50px’; }; }; } function updateRow(idStr) { cell = document.getElementById(idStr); if(cell != null) { cell.style.backgroundColor = ‘red’; } }
Как уже упоминалось, вероятно, есть лучший способ сделать это (используя css и jQuery и т.д.), Но этот ответ придерживается того, что у вас есть.
Ответ №3
Создайте новую переменную внутри верхнего цикла, чтобы сохранить “буквенное” имя строки (например, A, B, C).
// creating row and inserting into document var row = tab.insertRow(i); var row_letter = String.fromCharCode(65 + i);
Затем во втором цикле объедините имя строки и номер столбца.
cell.innerHTML = row_letter + j; Ответ №4
На самом деле вам нужно сделать некоторую математику для правильной раскраски и добавления меток. Вот часть кода для магии:
1 cell.innerHTML = String.fromCharCode(65 + i) + (j + 1); 2 if((i+j)%2){ cell.style.backgroundColor = ‘white’; } 3 else{ cell.style.backgroundColor = ‘blue’; } 4 cell.style.color = ‘black’; 5 cell.style.height = ’50px’; 6 cell.style.width = ’50px’;
Позволь мне объяснить. В первой строке вы принимаете константу 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 = <SOME IMAGE>. Но, я думаю, это для второго вопроса.
Надеюсь, я помог вам понять логику.
Ответ №5
В случае, если кто-то ищет способ визуализации шахматной доски с использованием JS (как я это делал и случайно пришел к этому вопросу), вот отличная библиотека JS для этого.
Он может создать что-то вроде этого
и многое другое в кратчайшие сроки, просто выполняя следующие действия:
JavaScript
var ruyLopez = ‘r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R’; var board = new ChessBoard(‘board’, ruyLopez);
HTML
<div id=»board» style=»width: 400px»></div>
