ピース・ソート・パズル

前回の記事(4月15日)で取り上げたものを発展させ、
ドラッグアンドドロップで、ジグソーパズルを作りたかったのですが、
座標の位置関係などの問題から、今後の課題です。

今回は、位置を入れ替えるプログラムと、ピース一つ一つの座標を、
配列化した定数配列を用いています。

あまり創意工夫感はありませんが、お試しくださいませ。

作ったもの

HTML

<div id="jigsaw">
    <div id="peas-1"></div>
    <div id="peas-2"></div>
    <div id="peas-3"></div>
    <div id="peas-4"></div>
    <div id="peas-5"></div>
    <div id="peas-6"></div>
    <div id="peas-7"></div>
    <div id="peas-8"></div>
    <div id="peas-9"></div>
    <div id="peas-10"></div>
    <div id="peas-11"></div>
    <div id="peas-12"></div>
    <div id="peas-13"></div>
    <div id="peas-14"></div>
    <div id="peas-15"></div>
    <div id="peas-16"></div>
    <div id="peas-17"></div>
    <div id="peas-18"></div>
    <div id="peas-19"></div>
    <div id="peas-20"></div>
</div>

CSS

#jigsaw{
	width: 80vmin;
	height: calc(80vmin / 1.5);
}

#jigsaw > div{
    position: absolute;
    background-size: cover;
    width: 16vmin;
    height: calc(80vmin / 6);
	transition:transform .4s;
}

#jigsaw > div:hover{
	border: solid yellow;
}

#jigsaw > div.select{
	border: solid #d3d3d3;
}

#jigsaw > #peas-1 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/1.png");
}

#jigsaw > #peas-2 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/2.png");
}

#jigsaw > #peas-3 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/3.png");
}

#jigsaw > #peas-4 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/4.png");
}

#jigsaw > #peas-5 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/5.png");
}

#jigsaw > #peas-6 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/6.png");
}

#jigsaw > #peas-7 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/7.png");
}

#jigsaw > #peas-8 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/8.png");
}

#jigsaw > #peas-9 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/9.png");
}

#jigsaw > #peas-10 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/10.png");
}

#jigsaw > #peas-11 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/11.png");
}

#jigsaw > #peas-12 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/12.png");
}

#jigsaw > #peas-13 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/13.png");
}

#jigsaw > #peas-14 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/14.png");
}

#jigsaw > #peas-15 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/15.png");
}

#jigsaw > #peas-16 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/16.png");
}

#jigsaw > #peas-17 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/17.png");
}

#jigsaw > #peas-18 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/18.png");
}

#jigsaw > #peas-19 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/19.png");
}

#jigsaw > #peas-20 {
    background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/02/20.png");
}

JavaScript

    const jigsaw = document.querySelector("#jigsaw");
    const peas = jigsaw.querySelectorAll("div");
    const button = document.querySelector("#change-button");
    
    let count = 0;
    let change = [];

    let game_start = false;
    let game_set = false;
    let steps = 0;
    
    const regular = [[0,0,0],[1,0,1],[2,0,2],[3,0,3],[4,0,4],
    [0,1,5],[1,1,6],[2,1,7],[3,1,8],[4,1,9],
    [0,2,10],[1,2,11],[2,2,12],[3,2,13],[4,2,14],
    [0,3,15],[1,3,16],[2,3,17],[3,3,18],[4,3,19]];
    
    const strange = regular.map(arr => [...arr]);
    /* そのままではコピー出来ないので、メソッドを使う(ディープコピー) */
    
    const numbers = Array.from({ length: 20 }, (_, index) => index);
    
    function shuffleArray(array) {
        for (var i = array.length - 1; i > 0; i--) {
            let j = Math.floor(Math.random() * (i + 1));
            let temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
    }
    
    shuffleArray(numbers);
    
    for(let i = 0; i < 20; i++){
        peas[i].addEventListener("click",function(){
            if(game_start && !game_set){
                Select(i);
            }
        });
    
        strange[i] = regular[numbers[i]].map(x => x); // ディープコピーを行う
        Reset(i);
    }

    function Reset(i){
        peas[i].style.transform = "translate(" + regular[i][0]*100 + "%," + regular[i][1]*100 + "%)";
    }

    function Change(i){
        peas[i].style.transform = "translate(" + strange[i][0]*100 + "%," + strange[i][1]*100 + "%)";
    }
	
    function ChangeAll(){
        for(let i = 0; i < 20; i++){
            Change(i);
        }
        
        game_start = true;
        button.disabled = true;
    }

    button.addEventListener("click",ChangeAll);
    
    function Select(event){
        count++;
        count = count % 2;
        
        change.push(event);
        
        if(count == 0){
            steps++;

            const a = change[0];
            const b = change[1];
            
            const tmp_0 = strange[a][0];
            const tmp_1 = strange[a][1];
            const tmp_n = strange[a][2];
    
            strange[a][0] = strange[b][0];
            strange[a][1] = strange[b][1];
            strange[a][2] = strange[b][2];
    
            strange[b][0] = tmp_0;
            strange[b][1] = tmp_1;
            strange[b][2] = tmp_n;

            peas[a].classList.remove("select");
            Change(a);
            Change(b);
    
            change = [];

            let judgement = true;

            for(let i = 0; i < 20; i++){
                if(strange[i][0] == regular[i][0] &&
                strange[i][1] == regular[i][1]){}
                else{judgement = false;}
            }

            if(judgement && !game_set){
                game_set = true;
                alert("クリア！ " + steps + "手かかりました。");
            }
        }else{
            const a = change[0];
            peas[a].classList.add("select");
        }
    }