[自作ゲーム]phina.jsを使って製作中:3(クリア条件＆スコアの追加)

前回の投稿からよりゲームっぽくする為に、ゲームのクリア条件とスコアを設定しました。

既存のプログラムから取れるスコアとして、「タッチ回数」と「全消しまでの時間」がゲームスコアとして最適かと思い、それぞれ取得できるよう改変。

// ゲームメイン
phina.define('MainScene', {
  superClass: 'DisplayScene',
  init: function() {
    this.superInit();
    this.tap = 0;
    this.time = 0;
    this.count = 0;

    this.balloonGrooup = DisplayElement().addChildTo(this);
    this.scrapGrooup = DisplayElement().addChildTo(this);

    this.label = MyLabel(SCREEN_WIDTH / 2, 50, 40, 'center', this.time).addChildTo(this);

    for (i = 0; i < startpop; i++) {
      Balloon(this.scrapGrooup).addChildTo(this.balloonGrooup);
    }
  },
  update: function(app) {
    this.collisionGroups(this.scrapGrooup, this.balloonGrooup);

    this.label.text = this.time.toFixed(2);
    
    // クリア判定
    if (this.balloonGrooup.children.length === 0) { 
      this.count++;
      if (this.count > 30) { // 余韻
        this.exit({ tap: this.tap, time: this.time });
        this.count = 0;
      }
    } else {
      // クリアしていなければ時間を加算
      this.time += app.deltaTime / 1000;
    }
  },
  onpointstart() {
    this.tap++;
  },
  collisionGroups: function(scrap, balloon) {
    scrap.children.some(function(scrap) {
      balloon.children.some(function(balloon) {
        if (Collision.testRectRect(scrap, balloon)) {
          if (balloon.life > 0) {
            scrap.hit();
            balloon.hit();
          }
        }
      });
    });
  }
});

// ゲームメイン

phina.define('MainScene', {

superClass: 'DisplayScene',

init: function() {

this.superInit();

this.tap = 0;

this.time = 0;

this.count = 0;

this.balloonGrooup = DisplayElement().addChildTo(this);

this.scrapGrooup = DisplayElement().addChildTo(this);

this.label = MyLabel(SCREEN_WIDTH / 2, 50, 40, 'center', this.time).addChildTo(this);

for (i = 0; i < startpop; i++) {

Balloon(this.scrapGrooup).addChildTo(this.balloonGrooup);

}

update: function(app) {

this.collisionGroups(this.scrapGrooup, this.balloonGrooup);

this.label.text = this.time.toFixed(2);

// クリア判定

if (this.balloonGrooup.children.length === 0) {

this.count++;

if (this.count > 30) { // 余韻

this.exit({ tap: this.tap, time: this.time });

this.count = 0;

}

} else {

// クリアしていなければ時間を加算

this.time += app.deltaTime / 1000;

}

onpointstart() {

this.tap++;

collisionGroups: function(scrap, balloon) {

scrap.children.some(function(scrap) {

balloon.children.some(function(balloon) {

if (Collision.testRectRect(scrap, balloon)) {

if (balloon.life > 0) {

scrap.hit();

balloon.hit();

}

});

}

});

これで一応、ゲームっぽい形になったので、ついでにタイトルシーンとリザルトシーンも追加。

// ゲームタイトル
phina.define('TitleScene', {
  superClass: 'DisplayScene',
  init: function() {
    this.superInit();

    this.subtitle = MyLabel(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 5, 60, 'center', 'Balloon\nExplosion').addChildTo(this);

    let guid = '【遊び方】\n';
    guid += '　風船をタップすると弾けて破片が飛ぶよ！\n';
    guid += '　破片が風船に当たっても弾けるよ！\n';
    guid += '　すべての風船が弾けるとクリア！\n';
    guid += '　少ない手数で素早くすべてを消してね！';

    this.tap = MyLabel(15, SCREEN_HEIGHT / 2 - 40, 30, 'left', guid).addChildTo(this);

    this.playbtn = MyButton(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 4 * 3, 'スタート').addChildTo(this)
      .onpointstart = function () { this.parent.exit(); };
    
  },
});

// ゲームタイトル

phina.define('TitleScene', {

superClass: 'DisplayScene',

init: function() {

this.superInit();

this.subtitle = MyLabel(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 5, 60, 'center', 'Balloon\nExplosion').addChildTo(this);

let guid = '【遊び方】\n';

guid += '　風船をタップすると弾けて破片が飛ぶよ！\n';

guid += '　破片が風船に当たっても弾けるよ！\n';

guid += '　すべての風船が弾けるとクリア！\n';

guid += '　少ない手数で素早くすべてを消してね！';

this.tap = MyLabel(15, SCREEN_HEIGHT / 2 - 40, 30, 'left', guid).addChildTo(this);

this.playbtn = MyButton(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 4 * 3, 'スタート').addChildTo(this)

.onpointstart = function () { this.parent.exit(); };

});

// ゲームリザルト
phina.define('ResultScene', {
  superClass: 'DisplayScene',
  init: function(score) {
    this.superInit(score);

    this.subtitle = MyLabel(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 7, 50, 'center', '--- ゲームクリア！ ---').addChildTo(this);

    this.tap = MyLabel(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2 - 40, 40, 'center', 'TAP : ' + score.tap + ' 回').addChildTo(this);
    this.time = MyLabel(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2 + 40, 40, 'center', 'TIME : ' + score.time.toFixed(2) + ' 秒').addChildTo(this);

    this.replaybtn = MyButton(SCREEN_WIDTH / 4 * 3, SCREEN_HEIGHT / 4 * 3, 'もう一回').addChildTo(this)
      .onpointstart = function () { this.parent.exit(); };

    this.sharebtn = MyButton(SCREEN_WIDTH / 4, SCREEN_HEIGHT / 4 * 3, '結果をつぶやく').addChildTo(this)
      .onpointstart = function () {
        let url = phina.social.Twitter.createURL({
          text: score.tap + '回 / ' + score.time.toFixed(2) + '秒\n',
          hashtags: 'Javascript, phina_js, Balloon_Explosion',
          url: phina.global.location && phina.global.location.href,
        });
        window.open(url, 'share window', 'width=480, height=320');
      };

  },
});