このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 数字タッチゲームを作ってみよう (02:55) 無料公開中
- 完成版の確認
- index.htmlの作成
- styles.cssの作成
- main.jsの作成
-
#02 必要な要素を揃えよう (01:59) 無料公開中
- HTMLのマークアップ
-
#03 全体のスタイルを整えよう (03:01) 無料公開中
- bodyのスタイリング
- boardのスタイリング
-
#04 パネルのスタイルを整えよう (02:56) 無料公開中
- 余白の設定
- パネルのスタイリング
-
#05 パネルを整列させよう (02:13)
- Flexboxの設定
- pressedクラスのスタイリング
-
#06 ボタンのスタイルを整えよう (02:59)
- STARTボタンのスタイリング
-
#07 JavaScriptでパネルを生成しよう (02:53)
- Boardクラス
- Panelクラス
-
#08 パネルをページに追加しよう (02:22)
- パネルの追加
- カプセル化
-
#09 ゲームを始めよう (02:45)
- クリックイベントの設定
- activate()メソッドの実装
-
#10 数値をランダムに配置してみよう (01:39)
- splice
- 乱数
-
#11 ボタンを順番に押せるようにしよう (02:17)
- currentNumの設定
- 数値チェック
-
#12 タイマーを動かしてみよう (02:56)
- タイマーの実装
- タイマーの停止
-
#13 不具合を修正していこう (02:03)
- 不具合の修正
- 動作確認
-
#14 Gameクラスを作ろう (02:53)
- Gameクラス
- プロパティ、メソッドの設定
-
#15 Gameクラスのインスタンスを渡そう (02:00)
- インスタンスの受け渡し
- Boardクラスの設定
- Panelクラスの設定
-
#16 Panelクラスを修正していこう (02:24)
- Panelクラスの修正
- メソッドの実装
-
#17 ゲームの難易度を変えてみよう (02:42)
- levelの導入
- パネル数の変更
-
#18 難易度に合わせてレイアウトを変えよう (02:57)
- 幅の変更
- 定数の導入
- 動作確認
リリース情報（note）
詳細情報
- 最終更新日
- 2020年3月12日
- バージョン情報
- Chrome80 / Visual Studio Code 1.42.1
