スタートボタンの用意 (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

KATAMINOを解くのをスタートさせるボタンを用意します。

ボタンの種類と実装方針

作成するプログラムでの、ボタンの状態は以下の4つです。

• 押せる状態のスタートボタン
• 押せない状態のスタートボタン
• "つかうピースをもっとおいてください"と書いてある、押せないボタン
• "ピースをえらびなおす"と書いてある、押せるボタン

ボタンの状態の切り替えを実現する際に、以下の2つの方法が考えられます。

1. 1つボタンを用意しておいて、色や内容を切り替える
2. ボタンを複数用意しておいて表示を切り替える

どちらの実装でも問題ないですが、今回は2つ目の方法を主に採用します。 JavaScript内に文言を書かないようにするためです。(文言を書くと複数言語に対応できないので)

スタートボタンの押せる・押せないの切り替えはJavaScript内で行います。

実装

ボタンを用意します。bootstrapのbuttonコンポーネントを使用します。

index.html

<!-- 前略 -->
        <div class="card-footer">
          つかうピース
        </div>
      </div><!-- end of card for used-piece -->
      
      <!-- 追加ここから -->
      <button type="button" id="start-button" class="btn btn-warning btn-lg btn-block my-3">スタート</button>
      <button type="button" id="more-piece-button" class="btn btn-warning btn-lg btn-block my-3" disabled>つかうピースをもっとおいてください</button>
      <button type="button" id="reset-button" class="btn btn-danger btn-lg btn-block my-3">ピースをえらびなおす</button>
      <!-- 追加ここまで -->
    </div><!-- end of container -->
<!-- 後略 -->

ここまでの実行結果

実行結果です。ボタンが3つ表示されました。

ボタンを非表示にする

"つかうピースをもっとおいてください"ボタンと"ピースをえらびなおす"ボタンを非表示にします。

main.css

#more-piece-button, #reset-button {
  display: none;
}

実行結果

実行結果です。スタートボタンのみ表示されました。

以上でボタンの準備が完了しました。

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

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com