ゲーム制作JavaScript学習｜2か月目のスケジュールと進め方

1か月目で変数・条件分岐・関数といった基礎文法をひととおり書けるようになった。次はいよいよ「ゲームらしい動き」を作る番です。とはいえCanvas、アニメーション、当たり判定と、新しい言葉が一気に増えて身構えてしまう人も多いはずです。

もうひとつ引っかかりやすいのが、「最後まで遊べるゲーム」を1本も完成させたことがない、という距離感のなさ。文法は分かっても、完成までの道のりがどれくらいあるのか想像がつきにくいものです。

この記事では、2か月目の学習スケジュールを週ごとに整理します。1か月目からの延長として無理なく積み上げられる順番になっているので、Canvasが未経験でも迷わず進められるはずです。

今日の結論

• 2か月目のゴールは、最後まで遊べるゲームを1本完成させること
• Canvas・アニメーション・当たり判定は、1か月目の知識の延長として積み上げられる
• コードが複雑になるほど、AIとの協働が自然に役立つ場面が増えていく
• 第7週で一度完成させ、第8週で磨き上げるという2段階で進める
• 完璧な1本目を目指さず、「最後まで遊べること」を優先する

はじめに：2か月目のゴール

1か月目のふりかえりから始めます。変数・データ型・if文・for文・関数・配列・オブジェクトという基礎文法を、自分の手とAIの両方を使いながら書いてきました。この土台があれば、2か月目の内容は決して遠いものではありません。

2か月目のゴールは、最後まで遊べるゲームを1本完成させることです。Canvasという新しい道具を使い、画面に絵を描き、動かし、当たり判定で勝敗を決める。ここまでを4週間で組み立てます。完成の実感を、まず一つ。

進む前にひとつだけ。Canvasやアニメーションでは、保存のたびにブラウザを手動でリロードする回数が増えます。まだ入れていなければ、Cursorの拡張機能パネルから Live Server を入れておくと、動きの確認が楽になります。名前で検索してインストールするだけで足りる作業です。拡張機能マーケットプレイスの見た目は変わることがあるので、迷ったらCursor公式の案内もあわせて確認してください。

1か月目から続けてきたAIとの協働は、2か月目でも変わらず隣にあります。コードが複雑になるにつれて、設計や実装をAIに相談する場面は自然に増えていくはずです。

Canvasとゲームの動きを学ぶ

第5週：Canvasで絵を描こう

• 学ぶこと: Canvasの基本、図形を描く、画像を表示する
• 作るもの: お絵描きアプリ、キャラクター表示
• 今週の目標: 画面に自由に絵や画像を表示できるようになる

CanvasはHTMLの中に用意された「描画専用の領域」です。getContext('2d')でその領域を取得し、円や四角形を描いたり、画像を貼り付けたりします。執筆時点で確認した範囲では、主要ブラウザのCanvas 2Dで図形描画と画像表示は問題なく動きます。最初は座標の考え方に戸惑うかもしれませんが、簡単な図形を並べて描くだけでも、Canvasの感覚はつかめます。

第6週：ゲームを動かそう

• 学ぶこと: アニメーション、ゲームループ、当たり判定、タイマー
• 作るもの: ボールゲーム、キャッチゲーム
• 今週の目標: ゲームらしい動きを実装できるようになる

requestAnimationFrameを使って一定間隔で描画し直す仕組みが、いわゆる「ゲームループ」です。ここに当たり判定（2つの図形が重なったかどうかの計算）を組み合わせると、ボールが跳ね返る、キャラクターがアイテムを拾う、といった動きが表現できるようになります。

ゲームループや当たり判定の実装パターンは、AIに相談しながら組み立てても構いません。座標計算のロジックを説明してもらい、出てきたコードを実際に動かして確認する、という進め方がこのあたりから増えてきます。

1本目のゲームを完成させる

第7週：1本目のゲームを完成させよう

• 学ぶこと: スコア、ゲームオーバー、リスタート
• 作るもの: ブロック崩し、シューティングゲーム、もぐらたたきのいずれか
• 今週の目標: 最後まで遊べるゲームを完成させる

第5週・第6週で身につけた描画とゲームループの知識を組み合わせ、実際に1本を完成させる週です。ブロック崩し・シューティングゲーム・もぐらたたきのうち、自分が作りたいものを1つ選んで進めてください。スコア表示とゲームオーバー、リスタートの3つが揃えば、「最後まで遊べるゲーム」として成立します。

完璧を目指す必要はありません。多少見た目が粗くても、最初から最後まで遊べることを優先してください。

第8週：ゲームをもっと面白くしよう

• 学ぶこと: 効果音、BGM、タイトル画面、難易度調整、ハイスコア
• 作るもの: 第7週で作ったゲームの改良版
• 今週の目標: 「完成」から「面白いゲーム」へ一歩レベルアップする

第7週で完成させたゲームに、効果音やタイトル画面を足していく週です。音を鳴らすタイミングや、難易度を少しずつ上げていく仕組みなど、細部を調整するほどゲームらしい手触りが出てきます。ブラウザやライブラリによって音声再生の挙動が変わる場合があるため、実装時は動作確認をこまめに行うことをおすすめします。

2か月目全体の流れは、以下の表のとおりです。

まとめ・次に読む

2か月目は、Canvasでの描画から始まり、ゲームループと当たり判定でゲームらしい動きを実装し、第7週で一度完成させ、第8週で磨き上げるという流れで進みます。1か月目までの知識の延長線上にあるので、新しい技術が増えても構える必要はありません。

1か月目の学習スケジュールは、ゲーム制作JavaScript学習｜1か月目のスケジュールと進め方で整理しています。3か月目のスケジュールは、ゲーム制作JavaScript学習｜3か月目のスケジュールと進め方で整理しています。シリーズ全体の流れは、初心者のゲーム制作で学ぶプログラミング｜3か月ロードマップから確認できます。

---

本記事の内容は執筆時点（2026-08-12）の情報に基づきます。学習の進み方には個人差があるため、週数はあくまで目安として捉えてください。Canvas・ゲームループなどの実装例は、ブラウザやライブラリのバージョンによって挙動が変わる場合があります。重要な判断は公式ドキュメントで確認することをおすすめします。