SVGでブロック崩し：rect要素でパドル（バー）の生成

パドルの基本クラス定義

Paddleという名前でクラスを定義します。新しくblock-breaking-paddle.jsというファイルを作成して、以下のように記述します。

function Paddle() {
  this.initialize.apply(this, arguments);
}

applyの引数に自分自身（this）とargumentsを渡します。argumentsはPaddleクラスのインスタンスを作成する時に渡される引数をオブジェクトで保持してくれます。

パドルの初期化処理の定義

これから、クラスの初期処理用のメッソドをinitializeという名前で作成するのですが、過去記事：JavaScriptのapplyとcallメソッドの動作とその違いでも書いた、applyを使用します。Paddleクラスのprototypeプロパティにinitializeメソッドを定義します。

Paddle.prototype.initialize = function(option) {
  this.paddle = option.paddle;
  this.x = option.x;
  this.y = option.y;
  this.w = option.w;
  this.h = option.h;
  this.fill = option.fill;
};

引数のoptionにargumentから値を受け取れるので、インスタンスの値として保存しておきます。この値を使用して、rect要素を作成します。

パドルの描画処理の定義

drawというメソッドを作成しようと思います。以下の通り定義。

Paddle.prototype.draw = function() {
  this.paddle.setAttribute('x',      String(this.x));
  this.paddle.setAttribute('y',      String(this.y));
  this.paddle.setAttribute('width',  String(this.w));
  this.paddle.setAttribute('height', String(this.h));
  this.paddle.setAttribute('fill',   this.fill);
  game.stage.base.appendChild(this.paddle);
};

this.paddle変数にrectオブジェクトをインスタンス化する時に渡します。そのrectオブジェクトの属性値をそれぞれセットして、 appendChildメソッドでステージの子要素とします。

インスタンスを生成

インスタンスの生成をします。クラスの定義ファイルと分けたいので、block-breaking-main.jsというメインの処理コードを書くファイルを新規作成して、そちらに以下のコードを書きます。

var paddle = new Paddle({
  paddle: document.createElementNS(game.stage.svgns, 'rect'),
  x: game.paddle.x,
  y: game.paddle.y,
  w: game.paddle.w,
  h: game.paddle.h,
  fill: game.paddle.fill
});

ポイントは2点。1点目は2行目のcreateElementNSメソッド。通常、要素を生成するときには、createElementを使用しますが、svg要素内に子要素を作成する場合、名前空間（NameSpace）が設定されてあるので、createElementNSメソッドを使用しないと生成されません。第一引数に名前空間（NameSpace）を指定しましょう。

もう1点は、クラスの引数にオブジェクトで初期値を渡すこと。この値をargumentで受け取って、initialize関数にて初期値のセットをします。

描画メソッド（draw）のコール

インスタンスが生成されたので、最後に描画メソッドをコールします。

function main() {
  paddle.draw();
}

main();

できた！＼(^o^)／

ステージ上にパドル（黒い四角形）が出現！ゲームの初期値を変えてみて、サイズや位置、座標などが変化するかどうか試してみましょう。