【問題】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>