yucatio@システムエンジニア

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

もととなるペンタミノのピースの準備 (KATAMINOを解くプログラムを作成する)

KATAMINOを解くプログラム

★前回の記事

yucatio.hatenablog.com

ではプログラムを書いていきます。 はじめにディレクトリとhtmlファイルを用意しましょう。

ファイルとディレクトリの準備

KATAMINO-SOLVERという名前のフォルダを作成し、その下に KATAMINO-SOLVER-preparationという名前のフォルダを作成してください。 その下に index.htmlファイルを作成し、以下の内容を書き込んで保存します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>KATAMINO Preparation</title>
  </head>
  <body>
    <script src="js/katamino-org-arr.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

KATAMINO-preparationフォルダの下に、jsフォルダを作成し、 その下にkatamino-org-arr.jsとmain.jsという名前の空のファイルを作成します。

ディレクトリ構成はこのようになります。

KATAMINO-SOLVER/
  |_ KATAMINO-SOLVER-preparation/
      |_ index.html
      |_ js/
          |_ katamino-org-arr.js
          |_ main.js

もととなるペンタミノのピースの準備

katamino-org-arr.jsにKATAMINOの12個のピースを記載します。

以下の記事で、ピースのデータ構造は、ピースの場所のリストと決めたのですが、元となる12個のピースは、転置や反転のしやすさを考えて、2次元配列で表すことにします。

yucatio.hatenablog.com

katamino-org-arr.jsに以下をコピー&ペーストしてください。

const KATAMINO_ORG_ARRAY =
[
  [
    [1, 1, 1, 1, 1]
  ],
  [
    [1, 1, 1, 1],
    [1, 0, 0, 0]
  ],
  [
    [1, 1, 1, 1],
    [0, 1, 0, 0]
  ],
  [
    [1, 1, 1, 0],
    [0, 0, 1, 1]
  ],
  [
    [1, 1, 1],
    [1, 0, 0],
    [1, 0, 0]
  ],
  [
    [1, 1, 1],
    [1, 1, 0]
  ],
  [
    [1, 1, 1],
    [1, 0, 1]
  ],
  [
    [1, 1, 0],
    [0, 1, 0],
    [0, 1, 1]
  ],
  [
    [1, 1, 0],
    [0, 1, 1],
    [0, 1, 0]
  ],
  [
    [1, 1, 1],
    [0, 1, 0],
    [0, 1, 0]
  ],
  [
    [1, 1, 0],
    [0, 1, 1],
    [0, 0, 1]
  ],
  [
    [0, 1, 0],
    [1, 1, 1],
    [0, 1, 0]
  ],
]

12個の0と1のかたまりは、以下のそれぞれにピースに対応しています。

f:id:yucatio:20190621081852p:plain

はじめに疎通確認をします。 さて、main.jsを開いて、下記を入力してください。

console.log("hello")
console.log("KATAMINO_ORG_ARRAY", KATAMINO_ORG_ARRAY)

index.htmlをブラウザで開きましょう。今回はGoogle Cromeを使用します。

ディベロッパーツールを表示します。Windowsの場合はF12キー、Macの場合はCommand＋Option＋Iキーで開きます。

コンソールを開きます。helloと上で作成した配列が表示されていれば成功です。

f:id:yucatio:20190702225552p:plain

以上でもととなるペンタミノのピースの準備ができました。次回はこれを転置・反転していきます。


★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com