Javascript-форум - Генерация изображений

Борис К,
<!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;
        }
         .active {
         opacity: .4;
         }
    </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();
        }

        const x = 150; // ширина одного
        const y = 150; // высота одного
        const w = 2; // сколько в ряду
        // картинки, должны быть на том же домене или иметь Access-Control-Allow-Origin
        function makeRand(num) {
            let usedNumbers = [];

            function f() {
                if (usedNumbers.length == num) usedNumbers = [];
                let i = Math.floor(Math.random() * num) + 1;
                return usedNumbers.includes(i) ? f() : (usedNumbers.push(i), i)

            }
            return f;
        }
        let totalImg = 44;
        let key = makeRand(totalImg);
        let length = 4;
        let images = length => Array.from({
            length
        }, _ => `https://loremflickr.com/150/150/girl?random=${key()}`);

        /*let images = length => Array.from({
            length
        }, _ => `https://xyz.ru/images/${('' + key()).padStart(2, "0")}.jpg`);*/

        const h = Math.ceil(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[0].classList.remove('active');
                        temp = [];
                    }
                } else {
                    temp = [td, cellIndex, rowIndex];
                    td.classList.add('active');
                }
                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(
            images(length).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})`);
                }
            }
            arrSrc.slice(0).sort(_ => Math.random() - .5).forEach((url, i) => cells[i].style.setProperty('--url', url))
        });
        btn.addEventListener('click', createImg);
        createImg()
    </script>
</body>

</html>