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

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

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

3. 第2回 まず土台から作ろう
~TOKIOになった気分で~
MCAゲーム開発講座

4. Canvasをレイヤーとして使う
> ちょっとだけCSSのお勉強
- index.htmlの<style>の部分がCSS
> #idでそのidを持つ要素に適用
- ：の左側が属性名、右側が値
> positionは要素の位置の基準を決める属性
値にabsoluteとすると絶対位置への配置となる
(他にrelative=相対位置などがある)

5. Canvasをレイヤーとして使う
> z-indexは重ね合わせの順番を決める属性
- 数字が小さいほど下で、大きいほど上に重ねられる
> 今回はbgを下に、gameを上に重ねる

6. 連想配列(ハッシュテーブル)
> 配列変数の各要素を区別出来るように名前を付けて管理する変数
> C言語で言う構造体みたいなもの
> JSではクラスもこれの一種
> 作り方
- var hoge = {a: 0, b: 1, c: 2}
> 使い方
- hoge.b :=> 1

7. 画像の読み込み
> JSで画像を読み込むには最低でも2手順踏まなければならない
- var hoge = new Image();
- hoge.src = "画像へのパス";
> 今回はそれをまとめて関数化する(1手順で済むね！)
> コールバック関数の説明は後ほど

8. drawImage
> 画像をcanvasに描く関数
> さらに言えば、canvasの一部をcanvasに拡大・縮小コピーする関数
> 使い方は3種類(主に使うのは2種類)
- drawImage(image,dx, dy)
- imageを座標(dx, dy)にコピー
- drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh)
- imageの座標(sx, sy)から(sx+sw, sy+sh)までの矩形を
- 座標(dx, dy)に幅dw, 高さdhでコピー
> 前者は1枚絵、後者はスプライトシートに使う
- imageをctxと勘違いしないように！！

9. FPSの管理
> FPS(Frame Per Second)
> 1秒間に画面を更新する回数
> 一般的なゲームだと60fpsだが、今回は30fps
> requestAnimationFrameはfpsを良い感じに保ってくれる
> それだけだと心もとないので30fpsになるよう調整する処理を入れ
てる
- if(new Date() - lastDraw > 1000/30)
- 現在時刻 - 最終更新時刻が 1/30 秒を上回ったら更新

10. 当たり判定
> 点と矩形の当たり判定はそのまま
- 矩形の内部に点があれば当たったとみなす
> 円同士の当たり判定は数学Ⅱの復習
- 画像はここのを使わせてもらいました

11. 次回
へ続
く