Shapeをランダムな位置にたくさん表示させる【Phina.js】

Shapeをランダムな位置にたくさん表示させる

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

var SCREEN_WIDTH = 640;
var SCREEN_HEIGHT = 960;
var SHAPE_SIZE = 16;
var SHAPE_HALF = SHAPE_SIZE / 2;
var NUM = 50;

// メインシーン
phina.define("MainScene", {

  // 継承
  superClass: 'DisplayScene',

  //初期化
  init: function () {
    //親クラス初期化
    this.superInit();
    //背景色
    this.backgroundColor = 'lightgray';
    // function内でthisを参照するための設定
    var self = this;
    //繰り返し処理
    (NUM).times(function (i) {
      // Shapeを作成してシーンに追加
      var shape = Shape({
        width: SHAPE_SIZE,
        height: SHAPE_SIZE,
        backgroundColor: 'red',
      }).addChildTo(self);

      //画面上に収まるランダムな位置に配置
      shape.x = Random.randint(SHAPE_HALF, SCREEN_WIDTH - SHAPE_HALF);
      shape.y = Random.randint(SHAPE_HALF, SCREEN_HEIGHT - SHAPE_HALF);
    });
  },

  //毎フレーム更新処理
  update: function () {

    //以下にコードを書いていく

  },
});

//メイン処理

phina.main(function () {
  // アプリケーションを生成
  var app = GameApp({
    // MainSceneから開始
    startLabel: 'main',
  });
  // fps表示
  //app.enableStats();
  //実行
  app.run();
});

▷繰り返し処理・thisの退避

(NUM).times(function (i) {
  // Shapeを作成してシーンに追加
  var shape = Shape({
    width: SHAPE_SIZE,
    height: SHAPE_SIZE,
    backgroundColor: 'red',
  }).addChildTo(self);

  //画面上に収まるランダムな位置に配置
  shape.x = Random.randint(SHAPE_HALF, SCREEN_WIDTH - SHAPE_HALF);
  shape.y = Random.randint(SHAPE_HALF, SCREEN_HEIGHT - SHAPE_HALF);
});

timesはNUM回繰り返すphina.js版for文。
変数iにインデックス値が入る(省略可)。

timesメソッドのfunction中でthisを使うとfunctionそのものを指すので、あらかじめ退避させてから正しく参照させる。