yucatio@システムエンジニア

趣味で作ったものいろいろ

JavaScriptで2次元配列のコピーと配列の反転 (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

ピースの反転を行うために2次元配列の反転を行います。8パターンのスピンの作成については以下の記事を参照してください。

yucatio.hatenablog.com

各spinは0番を始めとして矢印の順番で生成します。

f:id:yucatio:20190702083723p:plain

前回は0番のスピンから7番のスピンを作成しました。今回は7番の形から1番のスピンを作成します。

配列の反転は、JavaScriptではreverse (Array.prototype.reverse() - JavaScript | MDN) という関数が用意されていますので、これを使います。

例えば、こちらのピースだと、

f:id:yucatio:20190708084544p:plain

配列表現はこのようになっています。

[
  [1, 0],
  [1, 1],
  [1, 0],
  [1, 0]
]

この配列のreverseは以下のようになります。

[
  [1, 0],
  [1, 0],
  [1, 1],
  [1, 0]
]

この配列は、このスピンを表しています。上下反転しています。

f:id:yucatio:20190708084820p:plain

ただし、reverseはもとの配列を変更してしまうので、一旦配列をコピーする必要があります。2次元配列をコピーする関数copyArrayOfArrayを用意し、そのコピーに対してreverseを呼び出しましょう。 コードは以下のようになります。copyArrayOfArrayの実装は一旦仮にしてあります。

function createKataminoSpinList(piece) {
  // 回転した形を格納する配列
  const spinArray = []

  // 受け取ったピースを格納する
  spinArray[0] = piece
  console.log("spinArray[0]", spinArray[0])
  // 0番を転置したものが7番
  spinArray[7] = transpose(spinArray[0])
  console.log("spinArray[7]", spinArray[7])
  // 7番をコピーして上下反転したものが1番
  spinArray[1] = copyArrayOfArray(spinArray[7]).reverse()
  console.log("spinArray[1]", spinArray[1])
}

function copyArrayOfArray(arrayOfArray) {
  // TODO 実装
  return arrayOfArray
}

copyArrayOfArrayを実装していきます。forEachの2重ループを使用して、新しい配列に値をコピーします。

function copyArrayOfArray(arrayOfArray) {
  // arrayOfArrayと同じサイズの配列を定義し、各インデックスを空の配列で初期化する
  let copied = arrayOfArray.map(() => [])

  arrayOfArray.forEach((row, i) => {
    row.forEach((value, j) => {
      copied[i][j] = value
    })
  })
  
  return copied
}

実行結果

7番のピースを上下反転したものがコンソールに表示されて入れば成功です。

f:id:yucatio:20190708110656p:plain

リファクタリング

配列の各要素をコピーするのには、スプレッド構文が便利です。

function copyArrayOfArray(arrayOfArray) {
  return arrayOfArray.map(array => ([...array]))
}

下記のように書くと中の配列の中の配列はコピーされず、参照が残ったままとなってしまうのでNGです。

function copyArrayOfArray(arrayOfArray) {
  // このように書くのはNG
  return [...arrayOfArray]
}

以上で2次元配列のコピーと配列の反転を行うことができました。


★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com