Pocket

SVGの基本図形:circle要素

前回は、rect要素を生成してパドル(バー)を出現させました。今回は、ブロックにぶつけるボールを生成するのに、circle要素を使います。生成してからボールを動かしてみて、壁にぶつかったら反射するところまで作ってみたいと思います。

初期設定ファイルにボールの初期値を格納

またまた前回作成したblock-breaking-init.jsにボールの初期値を格納する変数を書き足します。

9〜16行目が追加した内容です。それぞれの変数の値は以下の通り。

  • game.ball.r – ボールの半径
  • game.ball.cx – ボールのx座標
  • game.ball.cy – ボールのy座標
  • game.ball.dx – ボールのx座標への移動量
  • game.ball.dy – ボールのy座標への移動量
  • game.ball.fill – ボールの色

この値を元にcircle要素を生成します。

ボールのクラスを定義

パドルのときと同様にボールのインスタンスを生成するために、ボールのクラスを定義します。クラスのメソッドとして、ボールの初期値を受取る処理とその値を使用して描画する処理を定義します。それに加えて、ボールの位置を決める処理と動作処理を定義しようと思います。

ボールの基本クラス定義

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

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

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

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

ボールの描画処理の定義

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

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

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

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

ボールの移動処理の定義

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

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

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

ボールクラスからインスタンス作成

クラスが定義できたところで、パドル同様このクラスを元にインスタンスを生成して描画をします。描画後に動作させてみます。

インスタンスを生成

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

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

描画メソッド(draw)と動作メソッド(move)のコール

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

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

GitHub
※step03フォルダに今回の記事のソースコードが入っています。