Photo by
shiroyukimin
なでしこさんで2×2リバーシ (笑)
私は頭が悪い。
前回の投稿から約2週間。
前回は月曜に投稿し、週streakを継続するという条件では最大級の投稿間隔となる。
それだけ時間が経ったのに、書きたいアレをいまだに書けていない。
ああ、本当に頭が悪い。
頭が悪いので、アドベントカレンダーの記事を書いていたらタイムリミットまであと約30分になってしまったぞ。
仕方ない。クソアプリアドベントカレンダーにも載せるのは気が引けるレベルのクソで繋ぐか……
今回やったこと
なでしこ で、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スタイル設定。
ここまで。各ボタンがクリックされたら、表示する要素を切り替える処理を行う。
おわりに
今日は12月21日。「1221」と挟まれている感じで、リバーシネタをするにはいい日。
というわけで、なでしこで「2×2リバーシ」を実装した。
0手で決着がつく、超短期決戦である。これなら、置けるかの判定やひっくり返す処理などを実装しなくてすみ、通常のリバーシと比べて実装のコストを大幅に削減できる。
コメント