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

【旧版】JavaScriptで作る「数字タッチゲーム」 (全9回)

JavaScriptを使って「小さい数字からタッチしていくゲーム」を作ってみます。

  • #01 ナンバーズ - 画面を作る (01:32) 無料公開中
    • buttonタグを使って3×3のボタンを作ります。
  • #02 initButtonsのコードを書く (02:44) 無料公開中
    • forループとrandomを使ってランダムな0〜8の数値をボタンに割り当てていきます。
    • console.dirを使って結果を確認します。
  • #03 initButtonsのコードを説明する (02:39)
    • ループ内で何が起きているか、変数値の変化を見ながら解説します。
  • #04 ボタンに数値を表示する (01:53)
    • getElementByIdとvalueを使ってボタンに数値を表示させます。
    • 再読み込みをしてランダムに割り当てられているのを確認します。
  • #05 Clickイベントを設定する (01:15)
    • onclickイベントをボタンに割り当てます。
    • touchedという関数を作ります。
  • #06 ボタンを押した処理 (02:55)
    • currentNumberという変数を作り、次に押すべきボタンの値を格納します。
    • 押されたボタンの数値とcurrentNumberを比較します。
    • 正解の数値を押したらボタンの数字を消します。
    • 違う数値を押したらメッセージを表示させます。
  • #07 Game Over処理 (01:19)
    • currentNumberが8以上になったらゲームオーバーのメッセージを表示させます。
  • #08 Score表示 (01:14)
    • Scoreを保持する変数を用意します。
    • Scoreを表示させるためのHTMLを書きます。
  • #09 Timer処理 (02:26)
    • runTimerという関数を作り、setTimeoutでScoreをカウントしていきます。
    • Scoreをリアルタイムに画面に表示させます。
    • ゲームオーバー時にScoreを表示します。