Javaエンジニア、React+Firebaseでアプリを作る

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

ピースが置かれないフィールドをマスクする (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

現在のUIでは、解くのをスタートさせたときに、どの位置までKATAMINOが置かれるべきかわかりにくいです。今回はこれを改善します。

本物のKATAMINOでは区切りとなる位置にバーを置いて、どの範囲の中にピースを収めるのかをわかりやすくしています。 今回のアプリでは、ピースが置かれないフィールドを暗くして、置かれる場所をわかりやすくします。

マスクするためのdiv要素の追加

ピースが置かれない場所を暗くするため、今回は背景が半透明の灰色のdiv要素をフィールドの画像に重ねます。

index.html

<!-- 前略 -->
      <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 id="field-mask"></div>

            <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" />
<!-- 後略 -->

背景色と透明度を指定します。position: absoluteを指定して、topとleftを、親要素からの相対位置で指定できるようにします。

css/main.css

#field-mask {
  position: absolute;
  background-color: #666666;
  opacity: 0.7;
}

マスクの初期位置を指定します。以下の図のように指定します。

f:id:yucatio:20191017224628p:plain

css/main.css

#field-mask {
  position: absolute;
  /* 追加ここから */
  top: 26px;
  left: 151px;
  width: 175px;
  height: 125px;
  /* 追加ここまで */
  background-color: #666666;
  opacity: 0.7;
}

ここまでの実行結果

実行結果です。6から12の部分が暗くなりました。

f:id:yucatio:20191017223320p:plain

displayへの追加

マスクするフィールドは使用するピースの個数によって変わります。使用するピースの数が変わったときにマスクの幅を変える必要があります。マスクの幅は、(12 - 選択されたピースの数) * セルのピクセル数です。また、左からの位置(left)も変更する必要があります。左からの位置は選択されたピースの数 * セルのピクセル数 + offsetで表すことができます。

js/display.js

const display = {
  // 前略

  // 追加ここから
  updateFieldMask: ({targetPieces}) => {
    $("#field-mask").css(
      "left", targetPieces.length * config.cellSize + config.fieldOffset.left
    ).css(
      "width", (12 - targetPieces.length) * config.cellSize
    )
  },
  // 追加ここまで
}

stateManagerへの追加

stateManagerへ登録します。

js/stateManager.js

const stateManager = {
  // 中略

  setTargetPieces: (targetPieces) => {
    state.targetPieces = targetPieces

    display.updateStartButtons(state)
    // 追加
    display.updateFieldMask(state)
  },
  // 中略
}

実行結果

実行結果です。使用するピースを変更すると、その数に応じてマスクされる部分が変化します。

使うピースが4個のとき↓

f:id:yucatio:20191017223304p:plain

使うピースが7個のとき↓

f:id:yucatio:20191017223251p:plain

解いてる途中で、どこまで埋まるかわかりやすくなりました。

f:id:yucatio:20191017223239p:plain

以上でピースが置かれないフィールドをマスクすることができました。


★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com