【問題】8パズル 問1

プログラミング問題

会社でjs勉強会的なものが開かれたので8パズルの問題を作りました。
8パズルとはこうゆうやつです。
canvasでパズルゲーム

今回の問題はシャッフルはせずにパネルを動かすところだけです。
よかったらやってみてください。

TODOを実装し、想定する出力にせよ。

<!DOCTYPE html>
<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: 実装する
}

// パネルの初期状態
var ary2d = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8]
];

// 移動可能な場合に、移動することの確認
var result = clickPannel(ary2d, 1, 0);
console.log(result);
/*
出力:1が左に移動する
[
  [1, 0, 2],
  [3, 4, 5],
  [6, 7, 8]
]
*/

// イミュータブルの確認
console.log(ary2d);
/*
出力:元のまま
[
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8]
]
*/

// 移動不可の場合、そのまま返すことの確認
var result = clickPannel(ary2d, 2, 0);
console.log(result);
/*
出力:変化無し
[
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8]
]
*/
</script>