新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 数字タッチゲームを作ってみよう (02:20) 無料公開中
- 完成版の確認
- index.htmlの作成
- styles.cssの作成
- main.jsの作成
-
#02 必要な要素を揃えよう (02:25) 無料公開中
- HTMLのマークアップ
- styles.cssの読み込み
-
#03 全体のスタイルを整えよう (02:50) 無料公開中
- bodyのスタイリング
- boardのスタイリング
-
#04 パネルのスタイルを整えよう (02:48) 無料公開中
- 余白の設定
- パネルのスタイリング
-
#05 パネルを整列させよう (01:55)
- Flexboxの設定
- pressedクラスのスタイリング
-
#06 ボタンのスタイルを整えよう (02:57)
- STARTボタンのスタイリング
-
#07 JavaScriptでパネルを生成しよう (02:26)
- main.jsの読み込み
- Boardクラス
- Panelクラス
-
#08 パネルをページに追加しよう (01:53)
- パネルの追加
- カプセル化
-
#09 ゲームを始めてみよう (02:30)
- クリックイベントの設定
- activate()メソッドの実装
-
#10 数値をランダムに配置してみよう (01:31)
- splice
- 乱数
-
#11 ボタンを順番に押せるようにしよう (01:59)
- currentNumの設定
- 数値チェック
-
#12 タイマーを動かそう (02:26)
- タイマーの実装
- タイマーの停止
-
#13 不具合を修正していこう (02:09)
- 不具合の修正
- 動作確認
-
#14 Gameクラスを作ろう (02:23)
- Gameクラス
- プロパティ、メソッドの設定
-
#15 Gameクラスのインスタンスを渡そう (01:53)
- インスタンスの受け渡し
- Boardクラスの設定
- Panelクラスの設定
-
#16 Panelクラスを修正していこう (02:09)
- Panelクラスの修正
- メソッドの実装
-
#17 ゲームの難易度を変更してみよう (02:23)
- levelの導入
- パネル数の変更
-
#18 難易度に合わせてレイアウトを変えよう (02:54)
- 幅の変更
- 定数の導入
- 動作確認
