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

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

More than 3 years have passed since last update.

今回のTips

様々な色のShapeを画面上のランダムな位置にたくさん表示します。
前回のTipsに色指定を追加します。

shape-random-locate-many2.png

[runstantで確認]

hslとformatメソッドを使った色指定

  • HSL色空間は、色相(Hue)、彩度(Saturation)、輝度(Lightness)で色を指定します。使い方は、[phina.js-Tips-004] Shapeの背景色を指定するを参考にして下さい。
  • formatは、Stringクラスの拡張メソッドで、引数で与えられた値を文字列に引き渡します。以下の様に使います。
var hue = Random.randint(0, 360);
var color = 'hsl({0}, 75%, 50%)'.format(hue);
  • 上の例ですと、変数hueに代入されたランダムな整数値をformatメソッドに与えることで前段の文字列内の{0}hueの値に置き換わります。
  • 'hsl({0}, {1}, 50%)'.format(hue, saturation)のように引数を増やすこともできます。

サンプルコード

// グローバルに展開
phina.globalize();
// 定数
var SCREEN_WIDTH = 640;
var SCREEN_HEIGHT = 960;
var SHAPE_SIZE = 16;
var SHAPE_HALF = SHAPE_SIZE / 2;
var NUM = 50;
var SATURATION = 100;   // 彩度
var LIGHTNESS = 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,
      }).addChildTo(self);
      // 画面上に収まるランダムな位置に配置
      shape.x = Random.randint(SHAPE_HALF, SCREEN_WIDTH - SHAPE_HALF);
      shape.y = Random.randint(SHAPE_HALF, SCREEN_HEIGHT - SHAPE_HALF);
      // 背景色をランダムに設定
      var hue = Random.randint(0, 360);
      shape.backgroundColor = 'hsl({0}, 75%, 50%)'.format(hue);
    });
  },
});
/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // MainScene から開始
    startLabel: 'main',
  });
  // fps表示
  //app.enableStats();
  // 実行
  app.run();
});
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