このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
-
#01 神経衰弱 - 画面を作る (01:43) 無料公開中
- buttonタグを使って4×4のボタンを作ります。
-
#02 ボタンに数値を割り当てる (02:22) 無料公開中
- forループとrandomでランダムな数値をボタンに割り当てます。
- getElementIdとvalueを操作してボタンに数値を表示させます。
-
#03 ペアを作る (02:04) 無料公開中
- Math.floorを使ってペアの数値を作っていきます。
- ボタンにそれらを表示させ、動作確認を行います。
-
#04 カードを開けたときの処理 (02:36)
- onclickイベントをボタンに設定します。
- flipという関数をつくり、処理の概要をコメントで記述します。
-
#05 1枚目のカードを開けたときの処理 (01:58)
- 今開いたカードの数値を変数に保存します。
- ボタンにその数値を表示させます。
- 1枚開いたよ、という状態を変数に保存します。
-
#06 2枚目のカードを開けたときの処理 (02:08)
- 2枚目のカードの値を取得します。
- そのカードが前回開いた値と一緒か判定するためのif文を書きます。
- 1枚開いたよ、という変数をfalseにして次のペアに備えます。
-
#07 はずれたときの処理 (02:23)
- 開かれた2つのカードを「?」に戻します。
- setTimeoutを使って上記の処理を時間差で実行します。
-
#08 当たったときの処理 (01:56)
- 何枚ペアができたかを格納するcardsCountという変数を作り、+1します。
- cardsCountが7より大きかったらゲーム終了処理をします。
-
#09 スコア計算をする (02:44)
- setTimeoutを使ってプレイ時間を計算します。
- その結果をリアルタイムにHTMLへ反映させていきます。
-
#10 ゲームオーバーを確認する (01:42)
- ゲームオーバー処理を確認するためにボタンに数値の値を表示させます。
- 動作確認をします。
