[編集モード] 2×2リバーシ

2マス×2マスのリバーシです。(笑)

DOM親要素の「text-align」に「center」をDOMスタイル設定。

タイトル画面は「DIV」のDOM部品作成。
ゲーム画面は「DIV」のDOM部品作成。
それの「display」に「none」をDOMスタイル設定。

タイトル画面にDOM親要素設定。
「2×2リバーシ」のラベル作成。
それの「font-size」に「300%」をDOMスタイル設定。
2回、改行作成。
開始ボタンは「スタート」のボタン作成。
それに{
  "font-size": "200%",
  "padding": "1ex",
}をDOMスタイル一括設定。

ゲーム画面にDOM親要素設定。
「data:image/svg+xml,<svg viewBox="0 0 101 101" xmlns="http://www.w3.org/2000/svg">
<g stroke="black">
  <rect x="1" y="1" width="100" height="100" fill="green" />
  <line x1="50" y1="1" x2="50" y2="101" />
  <line x1="1" y1="50" x2="101" y2="50" />
</g>
<g fill="white">
  <circle cx="26" cy="26" r="20" />
  <circle cx="76" cy="76" r="20" />
</g>
<g fill="black">
  <circle cx="76" cy="26" r="20" />
  <circle cx="26" cy="76" r="20" />
</g>
</svg>」の画像作成。
それに{
  "width": "15ex",
  "height": "15ex",
}をDOMスタイル一括設定。
2回、改行作成。
「引き分け！」のラベル作成。
それの「font-size」に「200%」をDOMスタイル設定。
2回、改行作成。
復帰ボタンは「戻る」のボタン作成。
それの「padding」に「0.5ex」をDOMスタイル設定。

開始ボタンをクリックした時には
  タイトル画面の「display」に「none」をDOMスタイル設定。
  ゲーム画面の「display」に「block」をDOMスタイル設定。
ここまで。

復帰ボタンをクリックした時には
  タイトル画面の「display」に「block」をDOMスタイル設定。
  ゲーム画面の「display」に「none」をDOMスタイル設定。
ここまで。

デバッグ × キャンバス: 幅 × 高

🍯 プログラム貯蔵庫

[編集モード] 2×2リバーシ

素材のアップロード