🐈

二次元配列を回転や反転させる方法

1 min read

二次元配列の回転や反転は、ゲームなどを作るときにたま~に使うので備忘録として記します。

サンプルコード

サンプルコードを用意しました。分かりやすいように二次元配列に対応した図形を表示しており、回転,反転ボタンを押すことで二次元配列が回転,反転し、その結果図形も回転,反転したものが表示されるようにしています。

こちらのコードは、React+TypeScriptを使用していますが、ロジック部分は素のJavaScriptとほとんど変わりません。

回転

サンプルコードの中から、二次元配列を右に90度回転させた配列を生成する部分だけを抜き出しました。

       prevPieceState.map((line, i) => {
        return line.map((cell, j) => {
          return prevPieceState[prevPieceState.length - 1 - j][i];
        });
      });

prevPieceStateの部分に、回転させたい配列を入れます。

左に回転させる場合は、以下のコードになります。

       prevPieceState.map((line, i) => {
        return line.map((cell, j) => {
          return prevPieceState[j][prevPieceState.length - 1 - i];
        });
      });

反転

横に反転させる場合は、以下のコードになります。

      prevPieceState.map((line, i) => {
        return line.map((cell, j) => {
          return prevPieceState[i][prevPieceState.length - 1 - j];
        });
      });

縦に反転させる場合は、以下のコードになります。

      prevPieceState.map((line, i) => {
        return line.map((cell, j) => {
          return prevPieceState[prevPieceState.length - 1 - i][j];
        });
      });

注意として、これらのコードは、行と列が同じ二次元配列(二次元配列の要素数と、二次元配列の要素の要素数が一致している二次元配列)に限定しています。

行と列が違う二次元配列の場合は、0やfalseやnullなどを空白として追加して、行と列が同じ二次元配列に変更することで、上記のコードが使用できます。

Discussion

ログインするとコメントできます