◯◯◯◯◯◯◯◯◯◯を使って簡単なゲームを作ってみた

2024年9月20日に行われたSendai Frontend Meetup #13で使用したスライドです。

作ったゲーム
https://kandai.github.io/touch-the-ball/

ソースコード
https://github.com/KanDai/touch-the-ball

:has() のドキュメント
https://developer.mozilla.org/ja/docs/Web/CSS/:has

:has()の使えそうなシチュエーションで紹介した記事
https://ics.media/entry/240808/
https://griponminds.jp/blog/css-selectors-has-pseudo-class/
https://zenn.dev/tomy_dev/articles/0e3dc637ae12e6

Transcript

1. ◯◯◯◯◯◯◯◯◯◯を 
 使って簡単なゲームを作ってみた 
 2024.09.20 @ Sendai Frontend Meetup #13 Daichi Kanke （@kan_dai）
2. Daichi Kanke 株式会社RightTouch デザインエンジニア
 株式会社TAM フロントエンドアドバイザー kan_dai KanDai 宮城県 仙台フロントエンドUG
3. 流れてくるボールをタッチするゲーム(Lv5まで) 
 その要素が何を表すのかクラス名をつけて そのクラスやタグに対してスタイルを指定していく https://kandai.github.io/touch-the-ball/
4. ◯◯◯◯◯◯◯◯◯◯は何? 

5. HTMLとCSSだけ を
 使って簡単なゲームを作ってみた 

6. https://developer.mozilla.org/ja/docs/Web/CSS/:has
7. :has()の使えそうなシチュエーション 

8. フォームの状態に応じてスタイルを変更 
 その要素が何を表すのかクラス名をつけて そのクラスやタグに対してスタイルを指定していく https://ics.media/entry/240808/
9. 包含する要素の内容に応じてスタイルを変更 
 その要素が何を表すのかクラス名をつけて そのクラスやタグに対してスタイルを指定していく https://griponminds.jp/blog/css-selectors-has-pseudo-class/
10. CMSの入力に応じてスタイルを変更 
 その要素が何を表すのかクラス名をつけて そのクラスやタグに対してスタイルを指定していく https://zenn.dev/tomy_dev/articles/0e3dc637ae12e6
11. 🤔
 どうやってゲームを作るの？ 

12. <input type=ˮcheckboxˮ> <input type=ˮradioˮ>
13. チェックボックスがチェック 
 されたらタイトル画面を非表示 

14. ラジオボタンがチェック 
 されたらクリア画面表示 

15. 背景もラジオボタンで 
 チェックでミス画面を表示 

16. リトライもラジオボタン 
 背景と同じname値なので 
 ミス画面が非表示になって 
 ゲーム画面に戻る 

17. https://github.com/KanDai/touch-the-ball
18. :has() おもしろい 
 まとめ

19. 󰢛 
 ありがとうございました！