Help us understand the problem. What is going on with this article?

[phina.js-Tips-007] Shapeをランダムな位置にたくさん表示する

More than 3 years have passed since last update.

今回のTips

Shapeを画面上のランダムな位置にたくさん表示します。
前回のTipsに繰り返し処理を追加します。

shape-random-locate-many.png

[runstantで確認]

timesメソッドを使った繰り返し処理

javascriptで繰り返し処理を行う時には、forを使うのが一般的です。
phina.jsのTipsということもありますので、今回は元々のNumberクラスの拡張メソッドtimesを使います。使い方は以下のとおりです。

(10).times(function(i) {
  console.log(i);
});
  • functionの内部の処理を冒頭に指定された数の回数繰り返します。
  • 変数iにインデックス値が入ってきますので、上の例では結果として0から9の数字が出力されます。
  • 繰り返しが目的であれば、iの値を必ずしも使用する必要はありません。

サンプルコード

// グローバルに展開
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 = 'black';
    // 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);
    });
  },
});
/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // MainScene から開始
    startLabel: 'main',
  });
  // fps表示
  //app.enableStats();
  // 実行
  app.run();
});
  • timesメソッドの回数に指定する数値は変数でも良いので、このサンプルのように定数定義しておくと便利です。
  • timesメソッドのfunction内部でthisを使うとfunctionそのものを参照することになるので、その前にvar self = thisで退避して、内部ではselfを使うことで正しい参照になるようにしています。
alkn203
javascriptのゲームライブラリphina.jsを愛用している趣味プログラマ。ファミコン世代。 Hobbyist programmer javascript/html5/phina.js/retro games
http://qiita.com/alkn203/items/bca3222f6b409382fe20
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away