SVGでブロック崩し：circle要素でボールの生成と反射移動

ボールの基本クラス定義

Ballという名前でクラスを定義します。新しくblock-breaking-ball.jsというファイルを作成して、以下のように記述します。基本はパドルと一緒。

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

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

ボールの初期化処理の定義

こちらもパドルの時と同様に処理を書きます。セットする変数名が違うだけです。

Ball.prototype.initialize = function(option) {
  this.ball = option.ball;
  this.r  = option.r;
  this.cx = option.cx;
  this.cy = option.cy;
  this.dx = option.dx;
  this.dy = option.dy;
  this.fill = option.fill;
};

ボールの描画処理の定義

こちらもパドルの時と同様にdrawというメソッドを定義。

Ball.prototype.draw = function() {
  this.ball.setAttribute('r',  String(this.r));
  this.ball.setAttribute('cx', String(this.cx));
  this.ball.setAttribute('cy', String(this.cy));
  this.ball.setAttribute('fill', this.fill);
  game.stage.base.appendChild(this.ball);
};

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

ボールの座標セット処理の定義

ここからがパドルにはなかった処理。positionというメソッドを定義して現在位置（cx, cy）に移動量（dx, dy）を足した値を返すようにします。

Ball.prototype.position = function() {
  return {
    cx: this.cx + this.dx,
    cy: this.cy + this.dy
  };
};

ボールの移動処理の定義

moveというメソッドを定義します。先程のpositionメソッドで座標計算した値を元にステージの壁に当たったら反射させる処理を書きます。

Ball.prototype.move = function() {
  var pos = this.position();

  if (pos.cx < this.r || pos.cx > game.stage.w - this.r) {
    this.dx *= -1;
  }
  if (pos.cy < this.r || pos.cy > game.stage.h + this.r) {
    this.dy *= -1;
  }

  this.cx += this.dx;
  this.cy += this.dy;
  this.ball.setAttribute('cx', String(this.cx));
  this.ball.setAttribute('cy', String(this.cy));
};

2行目で先程の座標計算メソッドを呼び出し座標位置を決定します。それから、x座標は左の壁の座標（0）と右の壁の座標（ステージの幅）からはみ出したら反転させています。y座標も同様に上の壁の座標（0）と下の壁の座標（ステージの高さ）からはみ出したら反転させています。

その値を座標に再セットして、circle要素の属性に設定しています。これでボールのクラス設定は完了。

インスタンスを生成

これもパドルと同様に、block-breaking-main.jsファイルの中にコードを書きます。

var ball = new Ball({
  ball: document.createElementNS(game.stage.svgns, 'circle'),
  r : game.ball.r,
  cx: game.ball.cx,
  cy: game.ball.cy,
  dx: game.ball.dx,
  dy: game.ball.dy,
  fill: game.ball.fill
});

パドルとの違いは生成するインスタンの要素がcircleというところ。

描画メソッド（draw）と動作メソッド（move）のコール

インスタンスが生成されたので、最後に描画メソッド（draw）をコールします。その後に動作メソッド（move）をコールするのですが、これは1回だけでなく繰り返しコールして動作しているように見せるのでsetIntervalで10ミリ秒毎にコールするようにします。

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

  setInterval(function() {
    ball.move();
  }, 10);
}

main();

できた！＼(^o^)／
ボールのスピード（10ミリ秒）はリテラル値でなく変数に持たせて初期設定で変えられるようにしておいたほうがいいな。