× 無料のユーザー登録をすると学習状況を管理することができるようになります

【旧版】JavaScriptで作る「神経衰弱」 (全10回)

最新版のレッスンはこちらから » 【最新版】JavaScriptで神経衰弱を作ろう (全10回)

JavaScriptで神経衰弱ゲームを作ってみます。解くまでにかかった時間をカウントする機能も実装します。

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