[自作ゲーム]phina.jsを使って製作中

プログラミングの勉強を兼ねて簡単なミニゲームを製作中。
ゲーム制作そのものが始めてなので、何から作っていけばよいのかわからず、とりあえず練習目的でゲームパーツになりそうなものを作ってみた。

タッチすると弾けて破片を周囲に飛ばす。
飛んだ破片が別のブロックに当たると、そのブロックも弾けて連鎖する。だけ。

そしてそのブロックに動きを付け足し、画面端で反射するようにしたものが下記のもの。

※ブロックをタッチすると弾けるよ！

別ウィンドウ全画面で開く

※弾けた破片の数や、破片が消えるまでの時間をちょこっと変更してます。

何かの役に立つかもしれない(主に自分の為になる)ので、ここまでのコードを載せておきます。

Javascriptコード

// グローバルに展開
phina.globalize();

const SCREEN_WIDTH = 640; // 画面幅
const SCREEN_HEIGHT = 960; // 画面高さ
const blockSize = 40; // ブロックの大きさ
const scrapSize = 5; // 破片の大きさ

let quantity = 15; // 出現する破片の数
let movespeed = 5; // ブロックの移動スピード
let startpop = 30; // 初期出現ブロック数

// ブロッククラス
phina.define(`Block`, {
  superClass: "RectangleShape",
  init: function(shotGroup) {
    this.superInit();
    this.x = Math.randint(25, SCREEN_WIDTH - blockSize / 2);
    this.y = Math.randint(25, SCREEN_HEIGHT - blockSize / 2);
    this.width = blockSize;
    this.height = blockSize;
    this.fill = "red";
    this.strokeWidth = 0;
    this.shotGroup = shotGroup;
    this.speed = movespeed;
    this.angle = Math.randint(0, 359).toRadian();
    this.vx = this.speed * Math.cos(this.angle);
    this.vy = this.speed * Math.sin(this.angle);
    this.setInteractive(true);
  },
  update: function(app) {
    // 画面端での反射処理 X
    if (
      this.x + this.vx > SCREEN_WIDTH - this.width / 2 ||
      this.x + this.vx < this.width / 2
    ) {
      this.vx *= -1;
    }

    // 画面端での反射処理 Y
    if (
      this.y + this.vy > SCREEN_HEIGHT - this.height / 2 ||
      this.y + this.vy < this.height / 2
    ) {
      this.vy *= -1;
    }

    this.x += this.vx;
    this.y += this.vy;
  },
  onpointstart: function() {
    this.hit();
  },
  hit: function() {
    this.remove();
    for (i = 0; i < quantity; i++) {
      bullet = Scrap(this.x, this.y).addChildTo(this.shotGroup);
    }
  }
});

// 破片クラス
phina.define(`Scrap`, {
  superClass: "RectangleShape",
  init: function(x, y) {
    this.superInit();
    this.x = x;
    this.y = y;
    this.width = 5;
    this.height = 5;
    this.fill = "skyblue";
    this.strokeWidth = 0;
    this.speed = 20;
    this.angle = Math.randint(0, 359).toRadian();
    this.vx = this.speed * Math.cos(this.angle);
    this.vy = this.speed * Math.sin(this.angle);
    this.count = 0;
  },
  update: function(app) {
    this.x += this.vx;
    this.y += this.vy;
    if (this.count > 10) {
      this.remove();
    }
    this.count++;
  },
  hit: function() {
    this.remove();
  }
});

// ゲームメイン
phina.define("MainScene", {
  superClass: "DisplayScene",
  init: function() {
    this.superInit({
      width: SCREEN_WIDTH,
      height: SCREEN_HEIGHT,
      backgroundColor: "black"
    });

    this.blockGrooup = DisplayElement().addChildTo(this);
    this.blockbulletGrooup = DisplayElement().addChildTo(this);

    this.count = 0;

    for (i = 0; i < startpop; i++) {
      Block(this.blockbulletGrooup, i * 100).addChildTo(this.blockGrooup);
    }
  },
  update: function(app) {
    this.collisionGroups(this.blockbulletGrooup, this.blockGrooup);

    // TEST ブロック生成＆描画
    if (this.blockGrooup.children.length === 0) {
      this.count++;
      if (this.count > 50) {
        for (i = 0; i < startpop; i++) {
          Block(this.blockbulletGrooup, i * 100).addChildTo(this.blockGrooup);
          this.count = 0;
        }
      }
    }
  },
  collisionGroups: function(group1, group2) {
    group1.children.some(function(group1) {
      group2.children.some(function(group2) {
        if (Collision.testRectRect(group1, group2)) {
          group1.hit();
          group2.hit();
        }
      });
    });
  }
});

phina.main(function() {
  var app = GameApp({
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    startLabel: "main"
  });
  app.run();
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

// グローバルに展開

phina.globalize();

const SCREEN_WIDTH = 640; // 画面幅

const SCREEN_HEIGHT = 960; // 画面高さ

const blockSize = 40; // ブロックの大きさ

const scrapSize = 5; // 破片の大きさ

let quantity = 15; // 出現する破片の数

let movespeed = 5; // ブロックの移動スピード

let startpop = 30; // 初期出現ブロック数

// ブロッククラス

phina.define(`Block`, {

superClass: "RectangleShape",

init: function(shotGroup) {

this.superInit();

this.x = Math.randint(25, SCREEN_WIDTH - blockSize / 2);

this.y = Math.randint(25, SCREEN_HEIGHT - blockSize / 2);

this.width = blockSize;

this.height = blockSize;

this.fill = "red";

this.strokeWidth = 0;

this.shotGroup = shotGroup;

this.speed = movespeed;

this.angle = Math.randint(0, 359).toRadian();

this.vx = this.speed * Math.cos(this.angle);

this.vy = this.speed * Math.sin(this.angle);

this.setInteractive(true);

update: function(app) {

// 画面端での反射処理 X

if (

this.x + this.vx > SCREEN_WIDTH - this.width / 2 ||

this.x + this.vx < this.width / 2

) {

this.vx *= -1;

}

// 画面端での反射処理 Y

if (

this.y + this.vy > SCREEN_HEIGHT - this.height / 2 ||

this.y + this.vy < this.height / 2

) {

this.vy *= -1;

}

this.x += this.vx;

this.y += this.vy;

onpointstart: function() {

this.hit();

hit: function() {

this.remove();

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

bullet = Scrap(this.x, this.y).addChildTo(this.shotGroup);

}

});

// 破片クラス

phina.define(`Scrap`, {

superClass: "RectangleShape",

init: function(x, y) {

this.superInit();

this.x = x;

this.y = y;

this.width = 5;

this.height = 5;

this.fill = "skyblue";

this.strokeWidth = 0;

this.speed = 20;

this.angle = Math.randint(0, 359).toRadian();

this.vx = this.speed * Math.cos(this.angle);

this.vy = this.speed * Math.sin(this.angle);

this.count = 0;

update: function(app) {

this.x += this.vx;

this.y += this.vy;

if (this.count > 10) {

this.remove();

}

this.count++;

hit: function() {

this.remove();

}

});

// ゲームメイン

phina.define("MainScene", {

superClass: "DisplayScene",

init: function() {

this.superInit({

width: SCREEN_WIDTH,

height: SCREEN_HEIGHT,

backgroundColor: "black"

});

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

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

this.count = 0;

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

Block(this.blockbulletGrooup, i * 100).addChildTo(this.blockGrooup);

}

update: function(app) {

this.collisionGroups(this.blockbulletGrooup, this.blockGrooup);

// TEST ブロック生成＆描画

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

this.count++;

if (this.count > 50) {

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

Block(this.blockbulletGrooup, i * 100).addChildTo(this.blockGrooup);

this.count = 0;

}

collisionGroups: function(group1, group2) {

group1.children.some(function(group1) {

group2.children.some(function(group2) {

if (Collision.testRectRect(group1, group2)) {

group1.hit();

group2.hit();

}

});

}

});

phina.main(function() {

var app = GameApp({

width: SCREEN_WIDTH,

height: SCREEN_HEIGHT,

startLabel: "main"

});

app.run();

});

phina.jsには大変お世話になっています。
非常に簡単に描画できてる。きっと。
(phina.jsを使わないで描画する方法を知らない…)

まだまだブログラミング初心者的なコードだと思うので、非常に見難いと思います。

もっとこうした方がいいよ！など、ご指摘やアドバイスがありましたら、コメントやTwitterなどで反応をもらえると小躍りして喜びます。

参考にしたサイト

大変おせわになりました。この場を借りてお礼申し上げます。

旧 phina.js Tips集 - Qiita

コンテンツは以下のzennのbookに移行しました。今後はzennの方を更新する予定です。…

phina.js room - ほろほろりドットコム

ゲームライブラリ『phina.js』について今までに書いた記事一覧や、ほろほろりがphina.jsを使って作った作品を紹介しているページです。記事の方は、ただ図形を描画させるだけの基本的なものから、入力関連、少し突っ込んでゲーム作成について、他のライブラリと連携に関しての記事等、色々置いています。

「phina.jsプログラミングまとめ」 vistanさんの公開マイリスト - ニコニコ

phina.jsによる１０分間プログラミング　マイリスト