作っちゃうおじさん制作記録ブラウザゲーム制作や暇つぶしに眺められる記事を書いています。初心者でも2時間でブラウザゲームを作ってWebにアップしよう!前回、2時間でブラウザゲームを制作する方法を執筆しました。みなさん、あれからゲーム制作を続けていますでしょうか。え?前回教わった内容だとロクなゲームを制作できないって?確かに前回の記事を体得したところで、的をクリックするだけのゲームしか作れませんでした。ゲームっぽいものを作りたい!と思った人も多いと思います。今回はゲームの王道シューティングゲームを作れるようになりましょう!今回は、ゲーム制作のアルゴリズムに注力してますので、前回よりは幾分難しくなっております。今回も前回同様サンプルコードをいじって覚えていくスタイルで行きますので、みなさんぜひコードをいじりながらプログラミングを学んでもらえればと思います。Codeを使用します。この手のインストールは難しくてわかんない!という人は↓のリンクを見ながら入れましょう。Codeのインストールと使い方https://eng-entrance.com/texteditor-vscode一点注意事項として、インストール途中にある以下の赤枠にチェックを入れておいてください。codeを起動するからです。無事にインストール完了したでしょうか。codeに慣れていく作業をしていきます。開く(15分)今回いじるサンプルコードはこちらです。)ダウンロードして、zipを解凍しましょう。解凍したら、Shootingフォルダ内で右クリックをして、下の赤枠をクリックしましょう。(インストール時の設定項目で、[Codeで開く]の欄にチェックをいれないと、この項目はでてきません。)こんなカッコいい画面が出てくると思います。これで気分はウキウキのプログラマですね。中学生だったらこれだけで友達に自慢したくなるような画面です。初心者」でテキトーに検索すれば見つかると思います。今回は、最小限の使い方だけ説明します。左の項目が「フォルダ内のファイル一覧」となっています。前回の講座で説明した通り、基本的にScript.jsだけいじればよいので、Script.jsをクリックしましょう。codeは、メモ帳と同じただのテキストエディタです。現在使える変数名・関数名を予測する自動補完機能があったりします。普段メモ帳でプログラムを書いていた人にとっては、原始人が石斧から機関銃に切り替えたような気分を味わうことができるでしょう。この状態でも全然よいのですが、今回は設定から「データ保存時に自動でコードを整形してくれる機能」を追加します。左上のタブからファイル⇒基本設定⇒設定を開いてください。画面下を見てください。上のテキストボックスは検索ボックスです。editor.formatOnsaveの項目を変更したいので、検索ボックスに「editor.formatOnsave」と書くとその場所に移動することができます。「editor.formatOnsave」の文の左あたりにマウスを合わせるとペンマークがでるので、クリックして編集を押してください。falseか選択する欄がでてくるので、trueを選択します。すると、画面下ように右に変更後の画面が出てきます。Script.jsに戻ります。試しに適当にプログラムを書いてみて、Ctrl+s(保存のショートカット)を押してみましょう。コードが自動整形されます。この機能、めっちゃ便利です。(5分)いよいよプログラム解説へ(合計90分)いよいよプログラムの解説に入ります。今回はがっつり90分とってみました。これでさすがに間に合うんじゃないかなあと思います。ゲームを起動させましょう。下画面のようにフォルダのindex.htmlをクリックしてください。こんな画面が出てくると思います。画面をクリックすると、画面下の剣士が爆弾を飛ばします。遊んでみよう!(1分)さて、ここから本格的にアルゴリズムの部分の説明をします。私が持っている最低限のエッセンスを詰め込んだので、ぜひ覚えてもらえればと思います。わからないことがあっても、なんとなくの理解で進めてみましょう。実際にプログラムを変更してもらう方が理解は進むと思います。「敵オブジェクトを生成する度に配列にpushして管理すると、自機の球との衝突判定めっちゃ楽だよ!」という点が見所です。']);');//ついでにプリロードまで済ませてしまう}データロード時に必要な画像を読み込んでおく処理です。前回とは打って変わって、for文を使って連番で画像を読み込んでいます。今回使用する画像はimageフォルダ内にあります。image1.png~image6.pngまで連番で設定しているので、これを一気に取得するコードを書いています。本来、変数名に変数を使うことはできないのですが、eval関数を使用すると、コードを変数名を用いて記述することができます。個人的に色々試してきましたが、この書き方で画像読み込みするのが一番楽でした。(2018/10/15)【詳しい方用】eval関数はstrictモードで無効になってしまうため、現在私は配列で読み込むことにしています。知識ある方は配列で読みましょう。180;//Sin波で自機を左右に移動させる};onenterframeで示した関数内は毎フレーム呼び出されます。今回は、この中でtime変数を1ずつ増やし、そのtimeを角度として移動する、中心180px、振幅180pxのsin波で移動する自機を作りました。sinとかわからん!という方のために、以下の演習を用意しました。演習を実際にやると、どのパラメータが動作に影響するかわかると思います。Sin波はゲーム制作において強力な武器になるので、ぜひ使いこなしてください。ちなみに、今回time変数はS_Heroの変数として持たせているので、S_Hero内のonenterframe内で使用するときはthis.timeで取得します。this.frame++;//もし3フレーム以内なら次のフレームを表示};}};敵の出現処理です。S_MAIN.time変数を1ずつ増やして、一定以上だと敵モンスターを画面上に配置するようにしています。書かれている通り、もし画面下(this.y>500)に行ってしまったら、S_END画面を表示するようにしています。this.frameは現在表示している画像です。実はimage5.pngは以下の3枚画像を合わせた画像(16px*48px)を(16px*16px)のスプライトに代入しています。このとき、スライムの画像は16px*16pxが3つ分に分割され、this.frame=0の時、左を表示、this,frame=1の時真ん中を表示・・・とthis.frameで表示画像を変更することができるのです。今回はthis.frameを0~2で毎フレームごとに繰り返す処理を書いています。シューティングなので、当たり判定の話をします。今回、S_Monsterを新たに作るたびにMonsterAry配列にS_Monsterを入れています。MonsterAryの配列は「球と敵との接触処理」で使用するためのS_Monster管理配列です。生成したS_Monsterは自分が格納されるインデックスをS_Monster.numに持っています。この管理配列を生成した目的は、当たり判定の項で明らかになります。覚えておいてください。