Как сделать так что бы шахматная фигура по клику перемещалась на другую ячейку?

Question

Bapk @Bapk

Как сделать так что бы шахматная фигура по клику перемещалась на другую ячейку?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Переставь фигуры</title>
</head>
<body>
	<table border=6 align="center"><caption>Переставь фигуры</caption>
		<tr><td>3</td> <td><input type="button" name="button1" value=&#9813;
			style="width:50px;height:50px;font-size:32px"onClick="onClick(0,0,button1.value)">
		</td><td><input type="button" name="button2" value=&#9813;
			style="width:50px;height:50px;font-size:32px"onClick="onClick(0,1,button2.value)"></td>
			<td><input type="button" name="button3" value=&#9813;
			style="width:50px;height:50px;font-size:32px"onClick="onClick(0,2,button3.value)"></td>
		</tr> <tr> <td>2</td>
			<td><input type="button" name="button4" value="";
			style="width:50px;height:50px;font-size:32px"onClick="onClick(1,0,button4.value)"></td>
		<td><input type="button" name="button5" value="";
			style="width:50px;height:50px;font-size:32px"onClick="onClick(1,1,button5.value)"></td>
		<td><input type="button" name="button6" value="";
			style="width:50px;height:50px;font-size:32px"onClick="onClick(1,2,button6.value)"></td>
		</tr><tr><td>1</td>
			<td><input type="button" name="button7" value=&#9823;
			style="width:50px;height:50px;font-size:32px"onClick="onClick(2,0,button7.value)"></td>
		<td><input type="button" name="button8" value=&#9823;
			style="width:50px;height:50px;font-size:32px"onClick="onClick(2,1,button8.value)"></td>
		<td><input type="button" name="button9" value=&#9823;
			style="width:50px;height:50px;font-size:32px"onClick="onClick(2,2,button9.value)"></td>
		</tr> <tr> <td> </td> <th>a</th> <th>b</th> <th>c</th> </tr> </table>
        <script>





        	
        </script>

	</body>
	</html>

Вопрос задан более трёх лет назад
353 просмотра

1 комментарий

Подписаться 1 Простой 1 комментарий

Решения вопроса 1

7 комментариев

Владимир Васильев @KBuHT

А можно обойтись без символьных ключей ? Всё-таки шахматные фигуры - в слишком узкой специализации.
const figures = {
'Q': '♕', // queen
'p': '♟', // pawn
};
Попытался расширить, но не работает с использованием img.png (выдаёт undefined). Заменой button на image тоже получен undefined.
{
if(key == '') return false;
let config =
{
pieceDir: 'pieces/',
pieceExt: '.png',
};
img.src = config.pieceDir + key + config.pieceExt;
img.style.cursor = 'auto';
img.key = key;
}

Написано более трёх лет назад
Сергей Соколов @sergiks Куратор тега JavaScript

Владимир Васильев, можно и с картинками – почему нет. При отрисовке клетки innerHTML берётся из словаря по ключу из состояния. Без хрустального шара не понимаю, где там у вас "выдаёт undefined". Сделали бы fiddle, задали новый вопрос.

Написано более трёх лет назад
Сергей Соколов @sergiks Куратор тега JavaScript

Эффективнее, наверное, не создавать каждый раз новый <img> а перемещать HTML узел: вынимать его из одного родителя и вставлять в другой.

Написано более трёх лет назад
Владимир Васильев @KBuHT

Спасибо .

Написано более трёх лет назад
Владимир Васильев @KBuHT

Вот так получается "undefined". По ключу всё работает. Главное, функция creatFigure прекрасно заполняет две мои другие таблицы, построенные по другому принципу. Вероятно, в этой программке возникают проблемы либо символикой ключей, либо с апдейтом. В общем, моё понимание отказывается меня понимать.

function creatFigure(btn, key) { // вставка функции на строке btn.innerHTML = creatFigure(btn, key);
{
if(key == '') return false;
let config =
{
pieceDir: 'pieces/',
pieceExt: '.png',
};
var img = document.createElement('img');
img.src = config.pieceDir + key + config.pieceExt;
img.style.cursor = 'auto';
img.key = key;
btn.appendChild(img);
}
}

const state = [
['Q', 'Q', 'Q'],
['', '', ''],
['p', 'p', 'p'],
];

const buttons = [...Array(3)].map(c => c = Array(3));
const tbl = document.querySelector('table');
const boardInit = () => {
[...tbl.querySelectorAll('tr')].forEach((tr, rowIndex) => {
if (rowIndex >= state.length) return;
[...tr.querySelectorAll('td')].forEach((td, colIndex) => {
if (colIndex === 0) return;
const button = document.createElement('button');
button.className = 'chess-cell';
button.type = 'button';
button.dataset.x = colIndex - 1;
button.dataset.y = rowIndex;
td.appendChild(button);
button.addEventListener('click', onBtnClick);
buttons[rowIndex][colIndex - 1] = button;
})
})
}

const boardUpdate = () => {
state.forEach((row, y) => {
row.forEach((key, x) => {
const btn = buttons[y][x];
btn.dataset.key = key;
btn.innerHTML = creatFigure(btn, key);
const isSelected = dataSelected && btn.dataset === dataSelected;
btn.classList[isSelected ? 'add' : 'remove']('selected');
})
})
}

Написано более трёх лет назад
Сергей Соколов @sergiks Куратор тега JavaScript

Владимир Васильев, сделайте jsFiddle с вашим примером – тут неудобно читать, пробовать и исправлять.

Написано более трёх лет назад
Владимир Васильев @KBuHT

https://jsfiddle.net/sveqm9n0/3/#&togetherjs=rVjpriIVHs

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+3 ещё

Простой
Почему приходят пустые данные с формы на почту?
- 1 подписчик
- 3 часа назад
- 43 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как при помощи js создать поле дополнительных ингридиентов?
- 1 подписчик
- 13 часов назад
- 66 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как в Next.js закешировать изображение без build?
- 1 подписчик
- 15 часов назад
- 31 просмотр
0

ответов
HTML

Простой
Не получается поставить поисковую строку справа, что сделать чтобы исправить?
- 1 подписчик
- 18 часов назад
- 53 просмотра
0

ответов
HTML

Простой
С чем может быть связано не правильный вывод изображений?
- 1 подписчик
- 21 час назад
- 184 просмотра
1

ответ
JavaScript

Простой
Как поставить лайк на все комментарии видео в тикток?
- 1 подписчик
- 22 часа назад
- 139 просмотров
2

ответа
JavaScript

Простой
Как нажать на все блоки с данным классом на странице с помощью JS?
- 1 подписчик
- 23 часа назад
- 99 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как повторить такую же анимацию?
- 2 подписчика
- вчера
- 297 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- вчера
- 109 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- вчера
- 61 просмотр
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Требуется Pure PhP + Symfony (Обязательно) разработчик для CRM/ERP

26 апр. 2024, в 14:07

3000 руб./в час

Спарсить каталог сайта

26 апр. 2024, в 14:06

15000 руб./за проект

Доработка бота на языке C++ (D) (достойная оплата труда)

26 апр. 2024, в 14:06

55555 руб./за проект

Как? – Как-то попытаться самостоятельно. Если сложно и не понятно, как – упростите задачу. Например до всего двух клеток и одной фигуры.

Если у вас в коде что-то повторяется, значит, код неправильный.

Например, стили ячеек везде одинаковые – вынесите их в class.
События кликов прописаны в разметке – назначайте их в циклах, программно: addEventListener()

Answer 1 · 2019-11-26 22:25:12

Можно разделить данные и их отрисовку. Массив «состояния» доски: какая фигура в какой ячейке. Пустая клетка – пустая строка. Клетка с королевой – 'Q'. И функция, которая отрисовывает всю доску, исходя из Состояния.

Для обозначения фигур использовать буквы из шахматной нотации. King = K, Queen = Q, Bishop = B, Knight = N, Rook = R, pawn = p
Понадобится словарь, где ключу фигуры соответствует символ для его отображения.

Каждая ячейка кликабельна. Кнопка в себе хранит координаты X и Y – понадобятся в обработчике клика, общем для всех.
Хранится переменная для предыдущего. Изначально пуста. Если кликнули по фигуре, а «предыдущая» пуста, значит это Первый клик - выбор фигуры для хода.
Второй клик должен выбрать другую ячейку, куда поставить выбранную ранее фигуру, или отменить выделение, если Второй раз выбрана та же клетка, что в Первый.

Как сделать так что бы шахматная фигура по клику перемещалась на другую ячейку?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт