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