TECH.C 体験授業

講師:大森田不可止



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

Lesson 2

今までのプログラム

jsbin: ここまでのプログラム

  • myship、敵(enemy)、弾(bullet) が各ひとつずつ。→数を増やしたい。
  • 各スプライトの表示が、やや面倒くさい。重複してる部分が多い。
  • 敵の動きや、出現パターンを増やしたい。

JavaScript の クラス

  • Sprite みたいに、ある機能を使いやすいようにパッケージしたものが「クラス」です。
  • var myship = new Sprite(60,60); で、スプライトというクラスから、具体的なスプライトを生成します。
  • myship のクラスの属性を呼び出すのが、"." (ドット) です。myship.image, myship.frame, myship.rotation などに、具体的な値をセットしていきます。
  • enchant.js の Sprite クラスの説明: enchant.Sprite | JsDoc Reference

Spriteクラスの拡張

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

var ExSprite = Class.create(Sprite, { // Spriteを継承したクラスを作成する
  initialize: function(size, frame, px, py, rotation, status) { // コンストラクタを上書きする
      Sprite.call(this, size, size); // 継承元のコンストラクタを適用する
      this.image = core.assets['http://techc.omorita.com/img/ship.png'];
      this.frame = frame;
      this.x = px;
      this.y = py;
      this.rotation = rotation;
      this.wait = 0;
      this.status = staus;
      return this;
    },
  setpos: function(px, py, velocity, rotation){
      this.x = px;
      this.y = py;
      this.velocity = velocity;
      this.rotation = rotation;
      this.visible = true;
    }
});

ExSprite

ExSprite を使うと、各スプライトの表示は以下のように簡単になる。

    // MyShip
    var myship = new ExSprite(60, 210, 560, [6,7], 0, 1);

    // Enemy
    var enemy = new ExSprite(60, 420*Math.random(), -60, [0,1], 180, 0);

    // bullet
    var bullet = new ExSprite(15, 0, -15, 12*16, 0, 0);

jsbin: ここまでのプログラム

敵の数、弾の数を増やしてみよう

    var enemy = new Array(20);
    for( var i = 0; i < 20; i++){
      enemy[i] = new ExSprite(60, 420*Math.random(), -60, [0,1], 180, 0);
    }
    var bullet = new Array(10);
    for(i = 0; i<10; i++){
      bullet[i] = new ExSprite(15, 0, -15, 12*16, 0, 0);
    }

敵の出現の仕方

弾の発射

少し手を加えたサンプル

シューティングゲームの骨組みだけ

  • スコアを付ける
  • グラフィックを加える
  • 連射出来るようにする
  • 効果音を付ける
  • 敵機のパターンを増やす
  • 背景をスクロールさせる
  • 自機を複数繋げる
  • 難易度の波を付ける

参考リンク