Zenn
🐈

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

2021/09/22に公開
JavaScript
React
TypeScript
#
配列
tech

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

サンプルコード

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

こちらのコードは、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];
        });
      });

Discussion