新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 スロットマシンを作ってみよう (02:41) 無料公開中
- 完成版の確認
- index.htmlの作成
- styles.cssの作成
- main.jsの作成
-
#02 画面を作っていこう (02:20) 無料公開中
- mainのマークアップ
- .spinのマークアップ
-
#03 全体のスタイルを整えよう (02:36) 無料公開中
- bodyのスタイリング
- mainのスタイリング
- .panelのスタイリング
-
#04 画像とSTOPボタンのスタイルを整えよう (02:58)
- .panelのスタイリング
- .stopのスタイリング
- Flexbox
-
#05 SPINボタンのスタイルを整えよう (02:11)
- #spinのスタイリング
-
#06 Panelクラスを作ろう (02:43)
- Panelクラスの定義
- コンストラクタ
- this
-
#07 インスタンスを生成しよう (02:11)
- panelインスタンスの生成
-
#08 spinメソッドを定義しよう (02:55)
- spin()メソッド
- getRandomImage()メソッド
- 画像の差し替え
- forEach()
-
#09 SPINボタンとSTOPボタンを動かそう (02:24)
- setTimeout()
- clearTimeout()
-
#10 結果判定のための関数を作ろう (02:30)
- isUnmatched()メソッド
- checkResult()関数
-
#11 結果判定処理を完成させよう (02:02)
- unmatchedクラスの付け外し
- unmatch()メソッド
-
#12 SPINボタンとSTOPボタンを制御しよう (02:36)
- inactiveクラスの付け外し
-
#13 リセット処理を実装しよう (02:52)
- activate()メソッド
