PREMIUM

【旧版】JavaScriptで作る「神経衰弱」

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