ここへジャンプ:

このステップ・バイ・ステップのチュートリアルでは全てJavaScriptだけで書かれた、HTML5 <canvas>で表示できる簡単なMDN ブロックくずしゲームを作ります。

全てのステップには編集可能かつすぐに実行できるサンプルがあり、どのような過程で作るべきか確認できます。映像の描画、移動、当たり判定、操作機構、勝ち負けの状態といった基礎的なゲームの仕組みを<canvas>要素を使って実装する基本を学びましょう。

このシリーズのほとんどの記事は理解するために初歩または中級レベルのJavaScriptの知識を必要とします。このチュートリアルを一通りこなすことで簡単なWebゲームを作れるようになるでしょう。

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

レッスン詳細

全てのレッスン、そしてこれから一緒に作るMDNブロック崩しゲームの各バージョンはGitHub上で入手可能です:

  1. Canvasを作ってその上に描画する
  2. ボールを動かす
  3. ボールを壁で弾ませる
  4. パドルとキーボード操作
  5. ゲームオーバー
  6. ブロックのかたまりを作る
  7. 衝突検出
  8. スコアと勝ち負けを記録する
  9. マウス操作
  10. 仕上げ

まずはJavaScriptだけで始めるのがWebゲーム開発の確実な知識を手に入れる一番良い方法です。そのあと、自分のプロジェクトで使うフレームワークを選びましょう。フレームワークはJavaScript言語で書かれた単なるツールです。ですから、たとえフレームワークを用いて開発しようとしていてもまずはその言語を学び、手元で実際に何が起こっているか理解すると良いでしょう。フレームワークは開発速度を上げ、ゲームのとるに足らない部分を処理してくれますが、もし何かが思ったように動かないなんてことがあったらいつでもデバッグしたり、あるいは単にJavaScriptで自分なりの解を出すということもできるのです。

ノート: ゲームライブラリを用いた2D Webゲーム開発に興味があるのであれば、このシリーズに対応するPhaserを使ったブロックくずしゲームも参照してください。

ノート: このシリーズはゲーム開発ワークショップのハンズオンの資料として使えます。ゲーム開発全般について話すつもりならこのチュートリアルに基づいたGamedev Canvas Content Kitも利用できます。

次のステップ

それでは始めましょう! 最初の章、『Canvasを作ってその上に描画する』に進みます。

 

ドキュメントのタグと貢献者

 このページの貢献者: nekomanma
 最終更新者: nekomanma,