Javascript-форум (https://javascript.ru/forum/)
-   Firefox/Mozilla (https://javascript.ru/forum/css-html-firefox-mizilla/)
-   -   Перемещение изображений "ходом конём" (https://javascript.ru/forum/css-html-firefox-mizilla/83451-peremeshhenie-izobrazhenijj-khodom-konjom.html)

Борис К 11.12.2021 14:32
Перемещение изображений "ходом конём"
 
Здравствуйте, знатоки 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>

рони 11.12.2021 14:38
Борис К,
https://learn.javascript.ru/js-animation

Борис К 11.12.2021 19:10
Цитата:
Сообщение от рони
https://learn.javascript.ru/js-animation
Рони, благодарю за оперативный ответ!
Но всё же непонятно, как JavaScript-анимация обеспечит обмен изображения местами при клике, например, на изображения "§" и "@" или "§" и "¿" ("ход конём", "Г"), при этом другие варианты отличные от "ходов конём" ("Г") должны быть заблокированы (например, "§" и "№")... извините, но, возможно, мы неправильно друг друга поняли!)

рони 11.12.2021 20:29
Борис К,
ок, проверяйте разницу между ячейками td.cellIndex и tr.rowIndex.

рони 11.12.2021 21:25
обмен ячеек, ход конём
 
Борис К,
<!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>

Борис К 11.12.2021 21:39
Дорогой Рони, я не сомневался в вашем высокопрофессионализме!
ИСКРЕННЕ БЛАГОДАРЮ!!!

Борис К 16.12.2021 13:23
Уважаемый Рони, пожалуйста, ещё подскажите или дайте хотя бы ссылку на то, как сделать так, чтобы, например, в результате перемещений изображений кликами до необходимого образца появилось сообщение, что результат достигнут... Please!))

рони 16.12.2021 14:05
Борис К,
массив эталона, проверить в строке 33 с текущей позицией.
условно ...
let end = arr.every((src, i) => imgs[i].src == src);
if(end) alert("результат достигнут");

Борис К 18.12.2021 13:02
Рони, только не кидайте в меня тапками... не осилил, не справился, запутался в сумраке ночей(((((
Что-то совсем не доходит, куда вставить этот код в вашем варианте моего примера:
Цитата:
Сообщение от рони
let end = arr.every((src, i) => imgs[i].src == src);
if(end) alert("результат достигнут");
Видимо, без вашей обстоятельной помощи никак... уж, извините)
Пожалуйста!

рони 18.12.2021 13:22
Борис К,
массив напишите что у вас там ["S", ] и размерность 3 x 4 или разное

Борис К 18.12.2021 13:44
Рони, просто умоляю! Я совсем далёк от программирования... учусь для себя, делая интуитивно((( Не знаю, кто мне статус "Аспирант" присвоил!((
Цитата:
Сообщение от рони
массив напишите что у вас там ["S", ] и размерность 3 x 4 или разное
- я в отчаянии!
Если такое возможно, то, пожалуйста, подскажите готовое решение...
В любом случае я искренне благодарен за всё хорошее, сделанное Вами!))

рони 18.12.2021 14:08
Борис К,
моих телепатических скилов недостаточно чтоб узнать что такое необходимый образец, так что вам необходимо взять себя в руки и таки написать массив символов вашей таблицы по порядку в идеальном случае.

Борис К 18.12.2021 14:27
Цитата:
Сообщение от рони
моих телепатических скилов недостаточно
)))
Цитата:
Сообщение от рони
необходимый образец
Рони, например, в нижеприведённом фрагменте "необходимый образец" - это пусть будет числовой ряд по порядку от "1" до "6" слева направо сверху вниз:
<!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=6"></td>
                <td><img class="click" name="1a2b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=2"></td>
            </tr>
            <tr>
                <td><img class="click" name="2a1b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=3"></td>
                <td><img class="click" name="2a2b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=4"></td>
            </tr>
            <tr>
                <td><img class="click" name="3a1b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=5"></td>
                <td><img class="click" name="3a2b" src="https://placehold.co/100x100/ff0000/ffff00?font=playfair-display&text=1"></td>
            </tr>
        </table>
    </form>
</body>
</html>

Например, "1" надо переместить на "6", чтобы появилось сообщение "результат достигнут"...
P.S.
Цитата:
Сообщение от рони
моих телепатических скилов недостаточно чтоб узнать что такое необходимый образец
Да, крайне необходимо уметь задавать правильно вопрос... уж, извините!

рони 18.12.2021 14:42
ход конём end
 
Борис К,
:-?

<!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>

Борис К 18.12.2021 17:50
Красавчик Рони!
Огромная благодарность за выдержку и профессионализм!!!
:dance:


Часовой пояс GMT +3, время: 13:20.