TECH.C ワークショップ合宿

講師:大森田不可止



シューティングゲーム・プログラム

LESSON 2

リファクタリング

  • プログラムを書いてくると、無駄や機能が整理されてない部分が見えてきます。このあたりで、プログラムの構造を見直して整理します。この作業を リファクタリングと呼びます。
  • 以前は、「正常動作してるコードは触らない」という考え方が主流でした。今でも、マスターアップ近くになると、その考えは正しいです。
  • 最近は技術の向上もあり、エラーを発見したり、テストをする環境も整ってきたので、常にコードをメンテナンスして、次の機能追加に備えるという考えが主流になっています。
  • 今回書いたコードでは、移動速度などの値はコードの中に直接数値で書いてましたが、これは難易度を調整する場合に不便なので、コードの先頭でまとめて宣言するようにします。

ES6: class 構文

2015年策定の ECMA-262 6th Edition (ES6) の標準で JavaScript にも、Class 構文が導入されました。IE ではまだ対応してませんが時間の問題です。また、IEにも対応させたい場合は Babel というトランスパイラを使えば解決できます。


class Hoge{
    constructor(fuga){
        this.fuga = fuga;
    }
    piyo(foo){
        alert(foo + this.fuga);
    }
}

class HogeSub extends Hoge{
    constructor(fugaSub){
        super(fugaSub);
    }
    piyoSub(){
        super.piyo('classの継承');
    }
}

Spriteクラスの拡張

enchant.Class を使って、Sprite クラスに機能を追加した ExSprite クラスを作る。


  class ExSprite extends Sprite {
    constructor(size, px, py, fr){
      super(size, size);
      this.x = px;
      this.y = py;
      this.image = core.assets['./img/ship.png'];
      this.frame = fr;
      this.vx = 0;
      this.vy = 0;
      this.status = 0;
      core.rootScene.addChild( this );
    }
    move: function(){
      this.x += this.vx;
      this.y += this.vy;
      if( (this.y >= height) || (this.y < -60)){
        this.y = offy;
      }
    }
  };

これからの方針

  • 敵と接触したら MyShip がやられるようにする。
  • Bulletの数を増やす。スペースキーを押しっぱなしで連射するようにする。
  • 敵の数を増やす。
  • 敵の種類を増やす。
  • 敵の飛行パターンを増やす。
  • 敵も弾を撃ってくるようにする。
  • 難易度に変化を付ける。

BulletとEnemyを増やす

ソースコード

単位円と三角関数(三角関数の拡張)

  • 単位円で、角\(\alpha\)だけ動いた点の
    • Y座標が \(\sin\)
    • X座標が \(\cos\)
    • 動径が \(x=1\) と交わるY座標が \(\tan\)
  • 単位円と三角関数
    • \(\sin\), \(\cos\) は周期関数。則ち、
      \(\sin ( \alpha + 2\pi n) = \sin \alpha\)
      \(\cos ( \alpha + 2\pi n) = \cos \alpha\)
    • これで、\( \alpha\) は、どんな値でも取れるように拡張された。
    • \(-\infty < \alpha < \infty, \quad -1 \le sin,cos \le 1\)

三角関数の性質

  • 周期関数なので、\( \sin( \alpha \pm 2\pi) = \sin \alpha, \quad \cos( \alpha ± 2\pi) = \cos \alpha \) : 左右に \(2\pi\) 動かしても同じ形
  • \( \cos \alpha = \sin(\alpha + \frac{\pi}{2}) \)
  • \( \cos(-\alpha) = \cos \alpha\): 偶関数(x軸で線対称)、 \(\sin(-\alpha) = -\sin \alpha \): 奇関数(原点で点対称)

\(\tan\) のグラフ

\(\tan\) の注意

  • \(\tan\) は、見上げた角度から、高さを求める場合に便利な関数。例えば、スカイツリーから300m離れた地点から、見上げた角度 \(\alpha\) を測定すれば、\(150 \tan \alpha \) を計算して高さを求めることができる。
  • ただし、真上と真下、つまり \(n\) を整数とすれば、\( 90 \pm 180 n (deg) = \frac{\pi}{2} \pm n \pi (rad)\) では、計算不能になる。
  • 特にプログラムで使う場合は、慎重になる必要がある。不用意に使うと、極まれに計算不能で正常に動かなくなるという、厄介なバグの原因になる。

参考リンク