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

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>

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

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

Простой
Fetch дает ошибку?
- 1 подписчик
- 5 часов назад
- 63 просмотра
0

ответов
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 8 часов назад
- 69 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 11 часов назад
- 81 просмотр
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 16 часов назад
- 75 просмотров
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 20 часов назад
- 413 просмотров
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
HTML

+1 ещё

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

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- вчера
- 67 просмотров
1

ответ
JavaScript

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

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Создать сервер VPS через wireguard

24 нояб. 2024, в 00:04

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

Добавить интеграцию оплаты Telegram Payments 2.0 в Mini App (React)

23 нояб. 2024, в 23:30

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

Нарисовать инфографику в 3-х вариантах

23 нояб. 2024, в 23:03

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

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

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

Например, стили ячеек везде одинаковые – вынесите их в 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 – понадобятся в обработчике клика, общем для всех.
Хранится переменная для предыдущего. Изначально пуста. Если кликнули по фигуре, а «предыдущая» пуста, значит это Первый клик - выбор фигуры для хода.
Второй клик должен выбрать другую ячейку, куда поставить выбранную ранее фигуру, или отменить выделение, если Второй раз выбрана та же клетка, что в Первый.

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

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

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

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