Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 18.12.2021, 13:44
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 145

Рони, просто умоляю! Я совсем далёк от программирования... учусь для себя, делая интуитивно((( Не знаю, кто мне статус "Аспирант" присвоил!((
Сообщение от рони
массив напишите что у вас там ["S", ] и размерность 3 x 4 или разное
- я в отчаянии!
Если такое возможно, то, пожалуйста, подскажите готовое решение...
В любом случае я искренне благодарен за всё хорошее, сделанное Вами!))
Ответить с цитированием
  #12 (permalink)  
Старый 18.12.2021, 14:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Борис К,
моих телепатических скилов недостаточно чтоб узнать что такое необходимый образец, так что вам необходимо взять себя в руки и таки написать массив символов вашей таблицы по порядку в идеальном случае.
Ответить с цитированием
  #13 (permalink)  
Старый 18.12.2021, 14:27
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 145

Сообщение от рони
моих телепатических скилов недостаточно
)))
Сообщение от рони
необходимый образец
Рони, например, в нижеприведённом фрагменте "необходимый образец" - это пусть будет числовой ряд по порядку от "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.
Сообщение от рони
моих телепатических скилов недостаточно чтоб узнать что такое необходимый образец
Да, крайне необходимо уметь задавать правильно вопрос... уж, извините!
Ответить с цитированием
  #14 (permalink)  
Старый 18.12.2021, 14:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ход конём 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>
Ответить с цитированием
  #15 (permalink)  
Старый 18.12.2021, 17:50
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 145

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скачивание массива изображений MC-XOBAHCK Общие вопросы Javascript 13 14.02.2019 11:03
DLE загрузка изображений через дополнительное поле armn555 Элементы интерфейса 0 18.08.2017 11:08
jquery-gp-gallery.js - разное отображение подгружаемых изображений frutality jQuery 1 09.09.2012 18:15
Повременная смена изображений jozev Элементы интерфейса 2 01.08.2011 18:43
Прокрутка изображений gen552 Элементы интерфейса 6 01.04.2011 13:11