そのままのJavaScriptを使ったブロックくずしゲーム
このステップ・バイ・ステップのチュートリアルでは全てJavaScriptだけで書かれた、HTML5 <canvas>で表示できる簡単なMDN ブロックくずしゲームを作ります。
全てのステップには編集可能かつすぐに実行できるサンプルがあり、どのような過程で作るべきか確認できます。映像の描画、移動、当たり判定、操作機構、勝ち負けの状態といった基礎的なゲームの仕組みを<canvas>要素を使って実装する基本を学びましょう。
このシリーズのほとんどの記事は理解するために初歩または中級レベルのJavaScriptの知識を必要とします。このチュートリアルを一通りこなすことで簡単なWebゲームを作れるようになるでしょう。
レッスン詳細
全てのレッスン、そしてこれから一緒に作るMDNブロック崩しゲームの各バージョンはGitHub上で入手可能です:
まずはJavaScriptだけで始めるのがWebゲーム開発の確実な知識を手に入れる一番良い方法です。そのあと、自分のプロジェクトで使うフレームワークを選びましょう。フレームワークはJavaScript言語で書かれた単なるツールです。ですから、たとえフレームワークを用いて開発しようとしていてもまずはその言語を学び、手元で実際に何が起こっているか理解すると良いでしょう。フレームワークは開発速度を上げ、ゲームのとるに足らない部分を処理してくれますが、もし何かが思ったように動かないなんてことがあったらいつでもデバッグしたり、あるいは単にJavaScriptで自分なりの解を出すということもできるのです。
ノート: ゲームライブラリを用いた2D Webゲーム開発に興味があるのであれば、このシリーズに対応するPhaserを使ったブロックくずしゲームも参照してください。
ノート: このシリーズはゲーム開発ワークショップのハンズオンの資料として使えます。ゲーム開発全般について話すつもりならこのチュートリアルに基づいたGamedev Canvas Content Kitも利用できます。
次のステップ
それでは始めましょう! 最初の章、『Canvasを作ってその上に描画する』に進みます。