AI game creator

Click here for free DL of the app version that can save data.

No:9036

200

←

Prev Next

→

jigsaw puzzle
Developer User4271｜Date and time 23/7/20 21:09:38
Build time 30.481 sec｜Game capacity 3.309KB｜

Script

了解です。以下にジグゾーパズルの例を示します。

この例では、4x4のジグゾーパズルを作成しています。各ピースは数字の絵文字で表示され、クリックすることで他のピースと入れ替えることができます。ゲームの目的は、ピースを正しい順序に並べ替えることです。パズルを解くと、おめでとうというアラートが表示されます。最初にシャッフル関数が呼び出され、パズルのピースがランダムに並び替えられます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

了解です。以下にジグゾーパズルの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ジグゾーパズル</title>
    <style>
        #puzzle-container {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
        }

.piece {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3em;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="puzzle-container">
        <div class="piece" onclick="swap(1,2)">1</div>
        <div class="piece" onclick="swap(2,3)">2</div>
        <div class="piece" onclick="swap(3,4)">3</div>
        <div class="piece" onclick="swap(4,5)">4</div>
        <div class="piece" onclick="swap(5,6)">5</div>
        <div class="piece" onclick="swap(6,7)">6</div>
        <div class="piece" onclick="swap(7,8)">7</div>
        <div class="piece" onclick="swap(8,9)">8</div>
        <div class="piece" onclick="swap(9,10)">9</div>
        <div class="piece" onclick="swap(10,11)">10</div>
        <div class="piece" onclick="swap(11,12)">11</div>
        <div class="piece" onclick="swap(12,13)">12</div>
        <div class="piece" onclick="swap(13,14)">13</div>
        <div class="piece" onclick="swap(14,15)">14</div>
        <div class="piece" onclick="swap(15,16)">15</div>
        <div class="piece" onclick="swap(16,0)">16</div>
    </div>

function swap(index1, index2) {
            var temp = pieces[index1].innerText;
            pieces[index1].innerText = pieces[index2].innerText;
            pieces[index2].innerText = temp;

if (pieces[index1].innerText == '16') {
                emptyIndex = index1;
            } else if (pieces[index2].innerText == '16') {
                emptyIndex = index2;
            }

checkWin();
        }

function checkWin() {
            var ordered = true;

for (var i = 0; i < 15; i++) {
                if (pieces[i].innerText != i + 1) {
                    ordered = false;
                    break;
                }
            }

if (ordered) {
                setTimeout(function() {
                    alert('おめでとうございます！パズルを解きました！');
                }, 200);
            }
        }

function shuffle() {
            for (var i = 0; i < 1000; i++) {
                var random = Math.floor(Math.random() * 15);
                swap(random, emptyIndex);
            }
        }

shuffle();
    </script>
</body>
</html>
```