PREMIUM

【旧版】JavaScriptで作る「数字タッチゲーム」

JavaScriptを使って「小さい数字からタッチしていくゲーム」を作ってみます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
  • #01 ナンバーズ - 画面を作る (01:32) 無料公開中
    • buttonタグを使って3×3のボタンを作ります。
  • #02 initButtonsのコードを書く (02:44) 無料公開中
    • forループとrandomを使ってランダムな0〜8の数値をボタンに割り当てていきます。
    • console.dirを使って結果を確認します。
    • ループ内で何が起きているか、変数値の変化を見ながら解説します。
    • getElementByIdとvalueを使ってボタンに数値を表示させます。
    • 再読み込みをしてランダムに割り当てられているのを確認します。
    • onclickイベントをボタンに割り当てます。
    • touchedという関数を作ります。
    • 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を表示します。