【問題】8パズル 卒業おめでとう

問1〜4をまとめれば
あーーーーら不思議。
パズルの完成です。
全体ではこんな感じです。

<!DOCTYPE html>
<style>
  .puzzle {
    width: 300px;
    height:300px;
    position: absolute;
    background: #888;
  }
  .puzzle>div {
    background: #ff8;
    position: absolute;
    width: 100px;
    height: 100px;
    text-align: center;
    border: inset 1px #888;
  }
</style>
<div class="puzzle">
  <div id="pannel_1" style="left:100px;top:  0px;" onclick="onClick(this)">1</div>
  <div id="pannel_2" style="left:200px;top:  0px;" onclick="onClick(this)">2</div>
  <div id="pannel_3" style="left:  0px;top:100px;" onclick="onClick(this)">3</div>
  <div id="pannel_4" style="left:100px;top:100px;" onclick="onClick(this)">4</div>
  <div id="pannel_5" style="left:200px;top:100px;" onclick="onClick(this)">5</div>
  <div id="pannel_6" style="left:  0px;top:200px;" onclick="onClick(this)">6</div>
  <div id="pannel_7" style="left:100px;top:200px;" onclick="onClick(this)">7</div>
  <div id="pannel_8" style="left:200px;top:200px;" onclick="onClick(this)">8</div>
</div>
<script>

/**
 * パネルをクリックする
 * クリックした位置が移動可能であれば、移動後のパネル(配列)を返す。
 * クリックした位置が移動不可であれば、そのままのパネルを返す。
 * 
 * @param ary2d {number[][]} 8パズルのパネルを表す配列。空の場所には0が入る。ary2d[y][x]なことに気をつけよう。
 * @param x {number} x座標。ゼロオリジン。
 * @param y {number} y座標。ゼロオリジン。
 * @return {number[][]} 変更後のパネル
 */
function clickPannel(ary2d, x, y) {
  // TODO: 実装する
}

/**
 * パネルの値から位置を取得する
 * 
 * @param ary2d {number[][]} 8パズルのパネルを表す配列。空の場所には0が入る。ary2d[y][x]なことに気をつけよう。
 * @param value {number} 検索する値
 * @return { {x:number, y:number} } 位置を表すオブジェクト
 */
 function findPos(ary2d, value) {
  // TODO: 実装する
}

/**
 * パネルを表示する
 * 
 * @param ary2d {number[][]} 8パズルのパネルを表す配列。空の場所には0が入る。ary2d[y][x]なことに気をつけよう。
 */ 
function draw(ary2d) {
  // TODO: 実装する
  // ヒント:findPos()を使う
}

/**
 * クリックされたDiv要素の位置を取得する
 * 
 * @param clickedDiv { HTMLElement } クリックされたDiv要素
 * @return {{x:number, y:number}} クリックされたDiv要素の位置。3x3のパネルなら、x, y共に 0〜2の数値になる。(pxの座標じゃないよ)
 */ 
function getClickedPos(clickedDiv) {
  // TODO: 実装する
}

var ary2d = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8]
];
function onClick(clickedDiv) {
  var pos = getClickedPos(clickedDiv);
  ary2d = clickPannel(ary2d, pos.x, pos.y);
  draw(ary2d);
}
</script>

おめでとう。おめでとう。おめでとう。