このレッスンではJavaScriptの文法とCanvasAPIの使い方を理解してる人に向けてジャンプゲームを作成します。

ルール確認

ジャンプゲームのルールは以下の通りです。

• スペースキーを押して落下しているプレイヤーをジャンプさせる
• ブロックもしくは画面の枠に当たるとゲームオーバー
• 生存時間に応じてスコア増加

デモは以下のURLから確認できます。

https://seedwis.com/javascript-jumpgame-demo/

実行環境

このレッスンではChromeを使用して作業します。レッスンを見ながら作成する方はChromeを使用して作業することを推奨します。レッスンで使用したバージョンはセクション一覧画面で確認できます。

作成手順

このレッスンでは以下の順序で作成します。

1. 背景の描画
2. プレイヤーの描画と更新
3. ブロックの描画と更新
4. プレイヤーとブロックの衝突判定
5. スコアの実装、ゲームオーバー処理などのゲーム全体の更新

特に4番目の衝突判定は多くのゲームで応用できます。このレッスンで扱うのは矩形同士の衝突判定だけですが、ぜひマスターしてください。

フォルダー構成

このレッスンでは以下のフォルダー構成で作業します。

• jump_game
  • index.html
  • main.js
  • style.css

レッスンを見ながら作成する方は次のセクションまでに準備してください。