KATAMINOフィールドとピースの用意 (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

KTAMINOのフィールドを配置します。 今回はKATAMINOを置くマス目(フィールド)に画像を用います。

画像はこちらからダウンロードできます。ダウンロードしたら、img/fieldに配置します。

KATAMINO-SOLVER/KATAMINO-SOLVER-main/img/field at master · yucatio/KATAMINO-SOLVER · GitHub

マス目の大きさは1辺50px、画像の左上から左上のマスまでは52pxです。今回は50%に縮小して表示するので、1辺は25pxで画像の左上から左上のマスまでは26pxです。

フィールドの配置

前回作成したボタンの下に、cardコンポーネントを作成し、中央にフィールドを表示します。

index.html

<!-- 前略 -->
      <button type="button" id="reset-button" class="btn btn-danger btn-lg btn-block my-3">ピースをえらびなおす</button>

      <!-- 追加ここから -->
      <div class="card my-2">
        <div class="card-body">
          <div id="katamino-field" class="mx-auto p-0">
            <img src="img/field/field.jpg" width="352" height="177"/>
          </div><!-- end of katamino-field -->
        </div><!-- end of card-body for katamino-field -->
      </div><!-- end of card for katamino-field -->
      <!-- 追加ここまで -->

    </div><!-- end of container -->
<!-- 後略 -->

main.cssに、katamino-fieldの設定を追加します。widthはフィールドの画像の幅と同じです。

css/main.css

#katamino-field {
  width: 352px;
}

ここまでの実行結果

実行結果です。フィールドの画像がcardの中央に表示されました。

スピンの配置

フィールドにピースを表示するために、全てのピースのスピンを読み込んでおきます。classにkatamino-pieceを指定します。idは、piece_{pieceId}_{spinId}にします。

<!-- 前略 -->
      <div class="card my-2">
        <div class="card-body">
          <div id="katamino-field" class="mx-auto p-0">
            <img src="img/field/field.jpg" width="352" height="177"/>

            <!-- 追加ここから -->
            <img id="piece_0_0" class="katamino-piece" src="img/piece/piece_0_0.png" width="125px" />
            <img id="piece_0_1" class="katamino-piece" src="img/piece/piece_0_1.png" width="25px" />

            <img id="piece_1_0" class="katamino-piece" src="img/piece/piece_1_0.png" width="100px" />
            <img id="piece_1_1" class="katamino-piece" src="img/piece/piece_1_1.png" width="50px" />
            <img id="piece_1_2" class="katamino-piece" src="img/piece/piece_1_2.png" width="100px" />
            <img id="piece_1_3" class="katamino-piece" src="img/piece/piece_1_3.png" width="50px" />
            <img id="piece_1_4" class="katamino-piece" src="img/piece/piece_1_4.png" width="100px" />
            <img id="piece_1_5" class="katamino-piece" src="img/piece/piece_1_5.png" width="50px" />
            <img id="piece_1_6" class="katamino-piece" src="img/piece/piece_1_6.png" width="100px" />
            <img id="piece_1_7" class="katamino-piece" src="img/piece/piece_1_7.png" width="50px" />

            <img id="piece_2_0" class="katamino-piece" src="img/piece/piece_2_0.png" width="100px" />
            <img id="piece_2_1" class="katamino-piece" src="img/piece/piece_2_1.png" width="50px" />
            <img id="piece_2_2" class="katamino-piece" src="img/piece/piece_2_2.png" width="100px" />
            <img id="piece_2_3" class="katamino-piece" src="img/piece/piece_2_3.png" width="50px" />
            <img id="piece_2_4" class="katamino-piece" src="img/piece/piece_2_4.png" width="100px" />
            <img id="piece_2_5" class="katamino-piece" src="img/piece/piece_2_5.png" width="50px" />
            <img id="piece_2_6" class="katamino-piece" src="img/piece/piece_2_6.png" width="100px" />
            <img id="piece_2_7" class="katamino-piece" src="img/piece/piece_2_7.png" width="50px" />

            <img id="piece_3_0" class="katamino-piece" src="img/piece/piece_3_0.png" width="100px" />
            <img id="piece_3_1" class="katamino-piece" src="img/piece/piece_3_1.png" width="50px" />
            <img id="piece_3_2" class="katamino-piece" src="img/piece/piece_3_2.png" width="100px" />
            <img id="piece_3_3" class="katamino-piece" src="img/piece/piece_3_3.png" width="50px" />
            <img id="piece_3_4" class="katamino-piece" src="img/piece/piece_3_4.png" width="100px" />
            <img id="piece_3_5" class="katamino-piece" src="img/piece/piece_3_5.png" width="50px" />
            <img id="piece_3_6" class="katamino-piece" src="img/piece/piece_3_6.png" width="100px" />
            <img id="piece_3_7" class="katamino-piece" src="img/piece/piece_3_7.png" width="50px" />

            <img id="piece_4_0" class="katamino-piece" src="img/piece/piece_4_0.png" width="75px" />
            <img id="piece_4_1" class="katamino-piece" src="img/piece/piece_4_1.png" width="75px" />
            <img id="piece_4_2" class="katamino-piece" src="img/piece/piece_4_2.png" width="75px" />
            <img id="piece_4_3" class="katamino-piece" src="img/piece/piece_4_3.png" width="75px" />

            <img id="piece_5_0" class="katamino-piece" src="img/piece/piece_5_0.png" width="75px" />
            <img id="piece_5_1" class="katamino-piece" src="img/piece/piece_5_1.png" width="50px" />
            <img id="piece_5_2" class="katamino-piece" src="img/piece/piece_5_2.png" width="75px" />
            <img id="piece_5_3" class="katamino-piece" src="img/piece/piece_5_3.png" width="50px" />
            <img id="piece_5_4" class="katamino-piece" src="img/piece/piece_5_4.png" width="75px" />
            <img id="piece_5_5" class="katamino-piece" src="img/piece/piece_5_5.png" width="50px" />
            <img id="piece_5_6" class="katamino-piece" src="img/piece/piece_5_6.png" width="75px" />
            <img id="piece_5_7" class="katamino-piece" src="img/piece/piece_5_7.png" width="50px" />

            <img id="piece_6_0" class="katamino-piece" src="img/piece/piece_6_0.png" width="75px" />
            <img id="piece_6_1" class="katamino-piece" src="img/piece/piece_6_1.png" width="50px" />
            <img id="piece_6_2" class="katamino-piece" src="img/piece/piece_6_2.png" width="75px" />
            <img id="piece_6_3" class="katamino-piece" src="img/piece/piece_6_3.png" width="50px" />

            <img id="piece_7_0" class="katamino-piece" src="img/piece/piece_7_0.png" width="75px" />
            <img id="piece_7_1" class="katamino-piece" src="img/piece/piece_7_1.png" width="75px" />
            <img id="piece_7_2" class="katamino-piece" src="img/piece/piece_7_2.png" width="75px" />
            <img id="piece_7_3" class="katamino-piece" src="img/piece/piece_7_3.png" width="75px" />

            <img id="piece_8_0" class="katamino-piece" src="img/piece/piece_8_0.png" width="75px" />
            <img id="piece_8_1" class="katamino-piece" src="img/piece/piece_8_1.png" width="75px" />
            <img id="piece_8_2" class="katamino-piece" src="img/piece/piece_8_2.png" width="75px" />
            <img id="piece_8_3" class="katamino-piece" src="img/piece/piece_8_3.png" width="75px" />
            <img id="piece_8_4" class="katamino-piece" src="img/piece/piece_8_4.png" width="75px" />
            <img id="piece_8_5" class="katamino-piece" src="img/piece/piece_8_5.png" width="75px" />
            <img id="piece_8_6" class="katamino-piece" src="img/piece/piece_8_6.png" width="75px" />
            <img id="piece_8_7" class="katamino-piece" src="img/piece/piece_8_7.png" width="75px" />

            <img id="piece_9_0" class="katamino-piece" src="img/piece/piece_9_0.png" width="75px" />
            <img id="piece_9_1" class="katamino-piece" src="img/piece/piece_9_1.png" width="75px" />
            <img id="piece_9_2" class="katamino-piece" src="img/piece/piece_9_2.png" width="75px" />
            <img id="piece_9_3" class="katamino-piece" src="img/piece/piece_9_3.png" width="75px" />

            <img id="piece_10_0" class="katamino-piece" src="img/piece/piece_10_0.png" width="75px" />
            <img id="piece_10_1" class="katamino-piece" src="img/piece/piece_10_1.png" width="75px" />
            <img id="piece_10_2" class="katamino-piece" src="img/piece/piece_10_2.png" width="75px" />
            <img id="piece_10_3" class="katamino-piece" src="img/piece/piece_10_3.png" width="75px" />

            <img id="piece_11_0" class="katamino-piece" src="img/piece/piece_11_0.png" width="75px" />
            <!-- 追加ここまで -->
          </div><!-- end of katamino-field -->
        </div><!-- end of card-body for katamino-field -->
      </div><!-- end of card for katamino-field -->
    </div><!-- end of container -->
<!-- 後略 -->

全てのスピンが表示されていることを確認してください。

確認ができたら非表示にしておきます。

css/main.css

.katamino-piece {
  display: none;
}

絶対位置へ配置するための準備

先ほど追加したピースは、この後でフィールドの左上を起点とした位置に配置します。そのため、position属性を追加します。 詳しくはCSS-positionを参照してください。

css/main.css

#katamino-field {
   /* 追加 */
  position: relative;
  width: 352px;
}

.katamino-piece {
  display: none;
  /* 追加 */
  position: absolute;
}

このような設定にすると、各ピースの位置をフィールド左上からの相対位置で指定することができます。

以上でKATAMINOフィールドとピースの用意ができました。

＜5,000円以上で10%OFF！クーポン配布中＞ 【 ポイント11倍 】 Gigamic（ギガミック）社 カタミノ KATAMINO 3歳〜 (ネコポス不可) ※消費税10%価格に変更済ページです。 価格：6160円（税込、送料無料) (2019/10/8時点) 楽天で購入

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com