純粋な JavaScript を使った二次元ブロック崩しゲーム
このステップバイステップのチュートリアルでは MDN ブロック崩しゲームを作ります。これは完全に純粋な JavaScript だけで書かれ、 HTML の <canvas> で表示されます。
各ステップには編集可能なライブサンプルがあるので、中間ステージがどのように見えるかを確認しながらプレイすることができます。画像のレンダリングと移動、衝突検出、制御機構、勝敗状態などの基本的なゲーム メカニックを使用するための <canvas> 要素の基本的な使用方法を学びます。
このシリーズのほとんどの記事は理解するために初歩または中級レベルの JavaScript の知識を必要とします。このチュートリアルを一通りこなすことで簡単なウェブゲームを作れるようになるでしょう。
レッスン詳細
全てのレッスンは以下の通りです。そしてこれから一緒に作る MDN ブロック崩しゲームの各バージョンは GitHub 上で入手可能です。
- キャンバスを作ってその上に描画する
- ボールを動かす
- ボールを壁で反射させる
- パドルとキー��ード操作
- ゲームオーバー
- ブロックのかたまりを作る
- 衝突検出
- スコアと勝ち負けを記録する
- マウス操作
- 仕上げ
純粋な JavaScript から始めることが、ウェブゲーム開発の確かな知識を身につける最良の方法です。その後、好きなフレームワークを選んで、自分のプロジェクトに使用することができます。フレームワークとは、単に JavaScript 言語で構築されたツールに過ぎません。したがって、フレームワークを使用する予定であっても、まず言語そのものを学び、内部で何が起きているのかを正確に理解しておくことが重要です。フレームワークは開発期間を短縮し、ゲームの退屈な部分を処理するのに役立つのですが、もし何かが期待通りに動作しない場合は、常にデバッグを試みたり、純粋な JavaScript で独自の解決策を実装したりすることも可能です。
メモ: このシリーズはゲーム開発ワークショップのハンズオンの資料として使えます。ゲーム開発全般について話すつもりならこのチュートリアルに基づいた Gamedev Canvas Content Kit も利用できます。
ゲームライブラリーを用いた二次元ウェブゲーム開発に興味があるのであれば、このシリーズに対応する Phaser を使ったブロック崩しゲームも参照してください。
次のステップ
それでは始めましょう! 最初の章、 キャンバスを作ってその上に描画するに進みます。