Перемещение изображений "ходом конём"
Здравствуйте, знатоки JavaScript!))
В нижеприведённом примере требуется, чтобы изображения при клике менялись местами не произвольно, а строго "ходом конём" ("Г"). Пожалуйста, подскажите решение! <html>
<head>
<script type="text/javascript">
var temp = new Image();
var loc;
var gotit;
function exch(e)
{
var srcElement;
srcElement = e.srcElement ? e.srcElement : e.target;
if (srcElement.className == "click")
{
if (gotit == 1)
{
gotit = 0;
document.images[loc].src = document.images[srcElement.name].src;
document.images[srcElement.name].src = temp.src;
stt=srcElement.name;
}
else
{
gotit = 1;
loc = srcElement.name;
temp.src = document.images[loc].src;
}
}
}
</script>
</head>
<body>
<form onclick="exch(event)">
<table align="center" cellspacing="1" cellpadding="0">
<tr>
<td><img class="click" name="1a1b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=§"></td>
<td><img class="click" name="1a2b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=©"></td>
<td><img class="click" name="1a3b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=π"></td>
<td><img class="click" name="1a4b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=4"></td>
</tr>
<tr>
<td><img class="click" name="2a1b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=≈"></td>
<td><img class="click" name="2a2b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=¶"></td>
<td><img class="click" name="2a3b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=@"></td>
<td><img class="click" name="2a4b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=№"></td>
</tr>
<tr>
<td><img class="click" name="3a1b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=$"></td>
<td><img class="click" name="3a2b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=¿"></td>
<td><img class="click" name="3a3b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=ƒ"></td>
<td><img class="click" name="3a4b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=®"></td>
</tr>
</table>
</form>
</body>
</html>
|
|
Цитата:
Но всё же непонятно, как JavaScript-анимация обеспечит обмен изображения местами при клике, например, на изображения "§" и "@" или "§" и "¿" ("ход конём", "Г"), при этом другие варианты отличные от "ходов конём" ("Г") должны быть заблокированы (например, "§" и "№")... извините, но, возможно, мы неправильно друг друга поняли!) |
Борис К,
ок, проверяйте разницу между ячейками td.cellIndex и tr.rowIndex. |
обмен ячеек, ход конём
Борис К,
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.active {
opacity: .2;
}
</style>
<script type="text/javascript">
let temp = [];
function exch(event) {
let img;
if (img = event.target.closest(".click")) {
let cellIndex = event.target.closest("td").cellIndex;
let rowIndex = event.target.closest("tr").rowIndex;
if (temp.length) {
temp[0].classList.remove("active");
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if ((x == 1 && y == 2) || (x == 2 && y == 1) || img === temp[0]) {
[img.src, temp[0].src] = [temp[0].src, img.src]
temp = [];
} else {
img.classList.add("active");
temp = [img, cellIndex, rowIndex];
}
} else {
img.classList.add("active");
temp = [img, cellIndex, rowIndex];
}
}
}
</script>
</head>
<body>
<form onclick="exch(event)">
<table align="center" cellspacing="1" cellpadding="0">
<tr>
<td><img class="click" name="1a1b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=§"></td>
<td><img class="click" name="1a2b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=©"></td>
<td><img class="click" name="1a3b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=π"></td>
<td><img class="click" name="1a4b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=4"></td>
</tr>
<tr>
<td><img class="click" name="2a1b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=≈"></td>
<td><img class="click" name="2a2b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=¶"></td>
<td><img class="click" name="2a3b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=@"></td>
<td><img class="click" name="2a4b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=№"></td>
</tr>
<tr>
<td><img class="click" name="3a1b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=$"></td>
<td><img class="click" name="3a2b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=¿"></td>
<td><img class="click" name="3a3b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=ƒ"></td>
<td><img class="click" name="3a4b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=®"></td>
</tr>
</table>
</form>
</body>
</html>
|
Дорогой Рони, я не сомневался в вашем высокопрофессионализме!
ИСКРЕННЕ БЛАГОДАРЮ!!! |
Уважаемый Рони, пожалуйста, ещё подскажите или дайте хотя бы ссылку на то, как сделать так, чтобы, например, в результате перемещений изображений кликами до необходимого образца появилось сообщение, что результат достигнут... Please!))
|
Борис К,
массив эталона, проверить в строке 33 с текущей позицией. условно ... let end = arr.every((src, i) => imgs[i].src == src);
if(end) alert("результат достигнут");
|
Рони, только не кидайте в меня тапками... не осилил, не справился, запутался в сумраке ночей(((((
Что-то совсем не доходит, куда вставить этот код в вашем варианте моего примера: Цитата:
Пожалуйста! |
Борис К,
массив напишите что у вас там ["S", ] и размерность 3 x 4 или разное |
| Часовой пояс GMT +3, время: 21:02. |