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

by Daichi

Slide 1

Slide 1 text

◯◯◯◯◯◯◯◯◯◯を   使って簡単なゲームを作ってみた   2024.09.20 @ Sendai Frontend Meetup #13 Daichi Kanke （@kan_dai）

Slide 2

Slide 2 text

Daichi Kanke 株式会社RightTouch デザインエンジニア  株式会社TAM フロントエンドアドバイザー kan_dai KanDai 宮城県仙台フロントエンドUG

Slide 3

Slide 3 text

流れてくるボールをタッチするゲーム(Lv5まで)   その要素が何を表すのかクラス名をつけてそのクラスやタグに対してスタイルを指定していく https://kandai.github.io/touch-the-ball/

Slide 4

Slide 4 text

◯◯◯◯◯◯◯◯◯◯は何?  

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

https://developer.mozilla.org/ja/docs/Web/CSS/:has

Slide 7

Slide 7 text

:has()の使えそうなシチュエーション  

Slide 8

Slide 8 text

フォームの状態に応じてスタイルを変更   その要素が何を表すのかクラス名をつけてそのクラスやタグに対してスタイルを指定していく https://ics.media/entry/240808/

Slide 9

Slide 9 text

包含する要素の内容に応じてスタイルを変更   その要素が何を表すのかクラス名をつけてそのクラスやタグに対してスタイルを指定していく https://griponminds.jp/blog/css-selectors-has-pseudo-class/

Slide 10

Slide 10 text

CMSの入力に応じてスタイルを変更   その要素が何を表すのかクラス名をつけてそのクラスやタグに対してスタイルを指定していく https://zenn.dev/tomy_dev/articles/0e3dc637ae12e6

Slide 11

Slide 11 text

🤔  どうやってゲームを作るの？  

Slide 12

Slide 12 text

Slide 13

Slide 13 text

チェックボックスがチェック   されたらタイトル画面を非表示  

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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