Показать сообщение отдельно
  #5 (permalink)  
Старый 11.12.2021, 21:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,129

обмен ячеек, ход конём
Борис К,
<!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>
Ответить с цитированием