Борис К,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.active {
opacity: .2;
}
</style>
<script type="text/javascript">
let temp = [];
let end = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
let win;
function exch(event) {
if(win) return;
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];
}
const numbers = Array.from(document.querySelectorAll(".click")).map(({src}) => src.split('=')[2]);
win = numbers.every((a, i) => a === end[i]);
if(win) out.append("The grand victory!!!");
}
}
</script>
</head>
<body>
<p id="out"></p>
<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=7"></td>
<td><img class="click" name="1a2b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=9"></td>
<td><img class="click" name="1a3b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=3"></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=5"></td>
<td><img class="click" name="2a2b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=6"></td>
<td><img class="click" name="2a3b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=1"></td>
<td><img class="click" name="2a4b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=8"></td>
</tr>
<tr>
<td><img class="click" name="3a1b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=2"></td>
<td><img class="click" name="3a2b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=10"></td>
<td><img class="click" name="3a3b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=11"></td>
<td><img class="click" name="3a4b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=12"></td>
</tr>
</table>
</form>
</body>
</html>