このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
-
#01 神経衰弱を作ってみよう (02:54) 無料公開中
- 完成版の確認
- index.htmlの作成
- imgフォルダの確認
- main.jsの作成
- styles.cssの作成と読み込み
-
#02 カードを作って裏返してみよう (02:56) 無料公開中
- カードのマークアップ
- カードのスタイリング
-
#03 スタイルを整えていこう (02:38) 無料公開中
- カードのスタイリング
-
#04 カードを重ねて回転させよう (01:44) 無料公開中
- カードの回転処処理
- transform-styleの設定
-
#05 回転処理を完成させよう (02:30)
- perspectiveの設定
-
#06 JavaScriptでカードを追加しよう (02:34)
- main.jsの読み込み
- init()の作成
-
#07 カードを動的に生成していこう (02:58)
- createCard()の作成
-
#08 カードの配置を完成させよう (02:49)
- flex-boxの設定
- cardのクリックイベント設定
-
#09 カードの数字をランダムにしよう (02:35)
- ランダム処理の実装
-
#10 2枚以上めくれないようにしよう (02:48)
- firstCardの用意
- secondCardの用意
- flipCountの用意
-
#11 正誤判定を実装していこう (02:16)
- check()の作成
-
#12 transitionendイベントを使おう (01:45)
- transitionendイベントの設定
-
#13 クリアタイムを計測していこう (02:54)
- クリアタイムの計測
-
#14 タイマーを完成させよう (02:42)
- timeoutIdの用意
- タイマーの停止
-
#15 リスタートボタンを作ろう (02:30)
- リスタート機能の実装
-
#16 神経衰弱を完成させよう (02:59)
- inactiveクラスの作成
- ゲームの微調整
