javascriptで作るナンバーパズルゲーム

<!DOCTYPE html>
<html lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex">
<title>ナンバーパズルゲーム javascript</title>

<script>
tiles = [];
window.onload = function() {
    var arr = ['', '1', '2', '3', '4', '5', '6', '7', '8'];
    shuffle(arr);
    var panel = document.getElementById('panel');
    for (i = 0; i < 9; i++){
        var div = document.createElement('div');
        div.className = 'tile';
        div.index = i;
        div.textContent = arr[i];
        div.onclick = click;
        panel.appendChild(div);
        tiles.push(div);
    }
} 

function shuffle(arr) {
    var n = arr.length;
    var temp, i;
    while (n) {
        i = Math.floor(Math.random() * n);
        n = n - 1;
        temp = arr[n];
        arr[n] = arr[i];
        arr[i] = temp;
    }
    return arr;
}

function swapContent(i, k){    
    var temp = tiles[i].textContent;
    tiles[i].textContent = tiles[k].textContent;
    tiles[k].textContent = temp;
}

function click(e) {    
    var i = e.target.index;
    if (i <= 5 && tiles[i + 3].textContent == '' ){
        swapContent(i, i + 3);
    }else if ( i >= 3 && tiles[i - 3].textContent == ''){
        swapContent(i, i - 3);
    }else if (i % 3 !== 2 && tiles[i + 1].textContent == ''){
        swapContent(i, i + 1);
    }else if (i % 3 !== 0 && tiles[i - 1].textContent == ''){
        swapContent(i, i - 1);
    }
}

</script>

<style>
    #panel {
        width: 160px;
        height: 160px;
        overflow: hidden;
    }    
    .tile {
        width: 50px;
        height: 50px;
        line-height: 50px;
        border: 1px solid silver;
        border-radius: 10px;
        text-align: center;
        font-size: 26px;
        font-weight: bold;
        box-shadow: gray 2px 2px;
        float: left;
        cursor: pointer;
    }
</style>
</head>

<body>

<div id="panel"></div>

</body></html>

コードの意味を考える

tiles = [];
window.onload = function() {
    var arr = ['', '1', '2', '3', '4', '5', '6', '7', '8'];
    shuffle(arr);
    var panel = document.getElementById('panel');
    for (i = 0; i < 9; i++){
        var div = document.createElement('div');
        div.className = 'tile';
        div.index = i;
        div.textContent = arr[i];
        div.onclick = click;
        panel.appendChild(div);
        tiles.push(div);
    }
}

tilesという空の配列作成
arrという空白と１～８までの配列作成
配列の要素をランダムに
htmlのpanelというID要素を取得
ループでclass名「tile」というdiv要素を9個作成
divの中身はテキストで「空白と１～８」のどれかが入る

function shuffle(arr) {
    var n = arr.length;
    var temp, i;
    while (n) {
        i = Math.floor(Math.random() * n);
        n = n - 1;
        temp = arr[n];
        arr[n] = arr[i];
        arr[i] = temp;
    }
    return arr;
}

カードの中身の配列「arr」の長さを取得
nはarr.length、whileでnから1までループさせる
i = n-1～0までの整数をランダムに選ぶ
変数tempにarr[n]を一旦代入する
配列arr[n]にarr[i]を代入する（無作為に選んだ配列の要素）
arr[i]にtemp（= 元々のarr[n]）を代入する

ようするに配列の要素を混ぜる行為？

function swapContent(i, k){    
    var temp = tiles[i].textContent;
    tiles[i].textContent = tiles[k].textContent;
    tiles[k].textContent = temp;
}

カードの中身の数値を入れ替える。
tempという変数にtiles[i]の数値を格納
tiles[i]にtiles[k]の値を格納
tiles[k]にtemp（元々tiles[i]に入っていた値）を格納

これでtiles[i]とtiles[k]の値を入れ替えることができる。

function click(e) {    
    var i = e.target.index;
    if (i <= 5 && tiles[i + 3].textContent == '' ){
        swapContent(i, i + 3);
    }else if ( i >= 3 && tiles[i - 3].textContent == ''){
        swapContent(i, i - 3);
    }else if (i % 3 !== 2 && tiles[i + 1].textContent == ''){
        swapContent(i, i + 1);
    }else if (i % 3 !== 0 && tiles[i - 1].textContent == ''){
        swapContent(i, i - 1);
    }
}

数字と空白をチェンジする関数
下移動：クリック位置から+3位置が空白だったら入れ替え
上移動：クリック位置から-3位置が空白だったら入れ替え
右移動：クリック位置から+1位置が空白だったら入れ替え
左移動：クリック位置から-1位置が空白だったら入れ替え