Javascript.RU

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

Rise, Оплошность в смысле, что изначально неправильно на словах объяснил "поведение" кликов для обмена сегментами... должно быть, как я представил в последнем коде на этой страничке (нахожу это решение просто идеальным), но только у меня трудности его объединения с кодом генерации изображения, которое было представлено Aetae и Рони выше:
https://javascript.ru/forum/css-html...tml#post543474
Ответить с цитированием
  #52 (permalink)  
Старый 09.02.2022, 11:18
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,589

Сообщение от Борис К
заменена следующей таблицей с отправкой к стиля
Скорее всего надо всё на канвас переписывать, возможно для вас это будет сложнее, чем стили и таблицы, с другой стороны не придётся разбираться в CSS и HTML, так как при работе с канвас вы погружаетесь полностью только в JS, ничего лишнего, идеальный вариант покапаться в языке, если цель не только игра, но и некое изучение.

Соединить эти две части можно, но это будет кривовато смотреться, и на будущее не очень, если захотите что-то поменять.

Последний раз редактировалось Rise, 09.02.2022 в 11:24.
Ответить с цитированием
  #53 (permalink)  
Старый 09.02.2022, 12:36
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 100

Сообщение от Rise
Скорее всего надо всё на канвас переписывать
Придётся изучать canvas... а что делать?!)
Сообщение от Rise
Соединить эти две части можно
Буду экспериментировать понемногу... в силу своих "способностей"))
Rise, спасибо Вам!!!
Ответить с цитированием
  #54 (permalink)  
Старый 09.02.2022, 23:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,602

игра пазлы собрать картинку
Борис К,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        td {
            width: 56px;
            height: 56px;
            background-size: cover;
            background-image: var(--url);
        }
        .game.end{
            border-collapse: collapse;
            border-spacing: 0px;
        }

    </style>
</head>
<body>
    <br>
    <br>
    <table class="game">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <button id="btn">Shuffle</button>
    <script>
        function imagedata_to_image(imagedata) {
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');
            canvas.width = imagedata.width;
            canvas.height = imagedata.height;
            ctx.putImageData(imagedata, 0, 0);
            return canvas.toDataURL();
        }
        // функция перемешивающая массив
        function shuffle(array) {
            let i = array.length;
            while (i--) {
                let j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }
        const x = 150; // ширина одного
        const y = 150; // высота одного
        const w = 2; // сколько в ряду
        // картинки, должны быть на том же домене или иметь Access-Control-Allow-Origin
        const images = [
            "https://loremflickr.com/150/150/girl?random=1",
            "https://loremflickr.com/150/150/dog?random=2",
            "https://loremflickr.com/150/150/red?random=3",
            "https://loremflickr.com/150/150/kitten?random=4"
        ];
        const h = Math.ceil(images.length / w); // сколько в столбце
        const canvas = Object.assign(document.createElement('canvas'), {
            width: w * x,
            height: h * y
        });
        document.body.prepend(canvas);
        const ctx = canvas.getContext('2d'),
            arrSrc = [],
            tb = document.querySelector('.game'),
            cells = Array.from(tb.querySelectorAll('td'));
        let win, temp = [];
        function endGame()
        {
           tb.classList.add('end');
        }
        function exch(event) {
            if (win) return;
            let td = event.target.closest('.game td');
            if (td) {
                let cellIndex = td.cellIndex;
                let rowIndex = td.closest("tr").rowIndex;
                if (temp.length) {
                    let x = Math.abs(cellIndex - temp[1]);
                    let y = Math.abs(rowIndex - temp[2]);
                    if ((x == 0 && y == 1) || (x == 1 && y == 0) || td === temp[0]) {
                        let url = td.style.getPropertyValue('--url');
                        td.style.setProperty('--url', temp[0].style.getPropertyValue('--url'));
                        temp[0].style.setProperty('--url', url);
                        temp = [];
                    }
                } else {
                    temp = [td, cellIndex, rowIndex];
                }
                win = cells.every(({
                    style
                }, i) => {
                    let url = style.getPropertyValue('--url');
                    style.setProperty('--url', arrSrc[i]);
                    let patern = style.getPropertyValue('--url');
                    style.setProperty('--url', url);
                    return url === patern
                });
                if (win) endGame();
            }
        }
        tb.addEventListener("click", exch);
        const createImg = () => Promise.all(
            shuffle(images).map((src, i) => new Promise(
                (onload, onerror) => Object.assign(new Image(), {
                    crossOrigin: 'anonymous',
                    src,
                    onerror,
                    onload
                })
            ).then(({
                target
            }) => {
                const hPos = Math.floor(i / w);
                const wPos = i - (hPos * w);
                ctx.drawImage(
                    target,
                    wPos * x,
                    hPos * y,
                    x,
                    y
                )
            }))
        ).then(() => {
            const wh = w * x / tb.rows.length;
            arrSrc.length = 0;
            win = false;
            temp = [];
            tb.classList.remove('end');
            for (let i = 0; i < tb.rows.length; i++) {
                for (let j = 0; j < tb.rows[i].cells.length; j++) {
                    let imagedata = ctx.getImageData(wh * j, wh * i, wh, wh);
                    let url = imagedata_to_image(imagedata);
                    arrSrc.push(`url(${url})`);
                }
            }
            shuffle(arrSrc.slice(0)).forEach((url, i) => cells[i].style.setProperty('--url', url))
        });
        btn.addEventListener('click', createImg);
        createImg()
    </script>
</body>
</html>

Последний раз редактировалось рони, 24.10.2022 в 08:21.
Ответить с цитированием
  #55 (permalink)  
Старый 10.02.2022, 11:14
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 100

Рони - javascript-атлант,
Сразу видно, что талант,
Гений мысли и труда,
Кладезь знаний и ума!
©

Последний раз редактировалось Борис К, 10.02.2022 в 17:32.
Ответить с цитированием
  #56 (permalink)  
Старый 10.02.2022, 12:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,602

Борис К,
строки 24 - 58 можно менять, 2 х 2, 3 х 3, 4 х 4, и т.д., да и код, с миру по нитке, больше сборная солянка, чем деликатес.
Ответить с цитированием
  #57 (permalink)  
Старый 10.02.2022, 13:23
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 100

Сообщение от рони
строки 24 - 58 можно менять, 2 х 2, 3 х 3, 4 х 4, и т.д.
Да, спасибо, я на таком уровне понимаю)
Сообщение от рони
да и код, с миру по нитке
Ну, не всё идеально в этом мире... главное, что отлично работает всё, как и представлялось бессонными ночами))
Сообщение от рони
больше сборная солянка, чем деликатес
Я понимаю... но не скромничайте!)
Рони, огромная благодарность Вам!!!
Ответить с цитированием
  #58 (permalink)  
Старый 12.02.2022, 23:06
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 100

Рони, изучая код длинными зимними ночами, заметил в нём ваши последние "модификации"... Спасибо!
Но вот ещё мучает вопрос по познавательным мотивам: как сделать, чтобы в коде присутствовал вне самого скрипта элемент <canvas id="canvas"></canvas> (в руководствах он присутствует)?
Видимо, дополнительно к <canvas id="canvas"></canvas> ещё какие-то строки необходимо изменить в самом скрипте, но я самостоятельно в таком вопросе опять не справляюсь...

Последний раз редактировалось Борис К, 12.02.2022 в 23:11.
Ответить с цитированием
  #59 (permalink)  
Старый 13.02.2022, 09:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,602

Сообщение от Борис К
<canvas id="canvas"></canvas>
вместо
const canvas = Object.assign(document.createElement('canvas'), {
            width: w * x,
            height: h * y
        });
        document.body.prepend(canvas);


будет

const canvas = Object.assign(document.getElementById('canvas'), {
            width: w * x,
            height: h * y
        });
Ответить с цитированием
  #60 (permalink)  
Старый 13.02.2022, 12:37
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 100

Рони, я был близок к решению... просто не догадался одновременно изменить две основные строки!((
Большое спасибо, профессор Рони!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DLE загрузка изображений через дополнительное поле armn555 Элементы интерфейса 0 18.08.2017 12:08
Ajax. Как сделать загрузку изображений, отображение, удаление как на Авито wowtschuk AJAX и COMET 1 07.03.2017 01:34
Повременная смена изображений jozev Элементы интерфейса 2 01.08.2011 18:43
Прокрутка изображений gen552 Элементы интерфейса 6 01.04.2011 13:11
Скролл мини изображений I-Trap Элементы интерфейса 1 25.11.2009 22:03