サークル向けゲーム開発講座(第3回)で使用したスライドです。 HTML5 CanvasとJavaScriptを用いたシューティングゲームの作り方を解説します。

1. MCAゲーム開発講座
JSをいじってJCを扱えるようになろう

2. 講座の準備
> 講座資料
- ここ(https://github.com/tamamu/js_tutorial)
> 質問用Slack
- ここ(https://mca-dev.slack.com/)

3. 第3回 ガンマンショー
~You and Me~
MCAゲーム開発講座

4. 音声の扱い
> HTML5/JSでの音声の扱い方はブラウザに依存する
- ChromeとFirefoxはmp3に対応しているがIEは対応していない
- wavは全てのブラウザで再生出来る
> 読み込み/再生
- var foo = new Audio("音声ファイルへのパス");
- foo.play();
> 1つの音声オブジェクトは同時に1度しか再生出来ない
- 効果音に使うなら同じファイルから複数のオブジェクトを作らないとい
けない

5. 弾の定義
> 弾はプレイヤーと敵で別々に管理する
> 弾は1フレームごとに位置が変わる
> 弾に当たると爆発、効果音再生
> 弾は画面端まで到達すると消滅
> 弾の動き
- プレイヤー弾は画面上端に向かって直進
- 敵弾は縦横無尽に動き回る
> 弾の実装に必要な要素
- プレイヤー弾
- X座標, Y座標
- 敵弾
- 発射X座標, 発射Y座標, X変化量, Y変化量, 速度, 移動角度

6. 敵の行動パターン
> 敵を一定の行動パターンに基づいて動かす
> 行動パターンは複数の単純な動作から成り立つ
- 右に5px移動、上に3px移動、静止…など
> ある動作を開始して一定フレーム経過すると次の動作に移行する
> 全ての動作が終わると最初の動作に戻る => ループ
> 今回は動作を順番通りに行っているだけだが、プレイヤーの状態
に合わせて動作を変えることによって簡単なAIを実装することが出
来る。

7. 次回予告
> 今回まででシューティングゲームの基礎は全て実装済み
> まだ実装出来ていないところ
- 背景のスクロール
- 複数の敵
- 残機の管理
- ステージ管理
- スコア
- パワーアップ
次回やります

8. 次回
へ続
く