Pocket

SVGの基本図形:rect要素

前回は、ブロック崩しのステージ設定を実装しました。今回は、SVGの基本図形であるrect要素を使って、パドル(バー)を作成しようと思います。

初期設定ファイルにパドルの初期値を格納

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

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

  • game.paddle.x – パドルのx座標
  • game.paddle.y – パドルのy座標
  • game.paddle.w – パドルの幅
  • game.paddle.h – パドルの高さ
  • game.paddle.fill – パドルの色

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

パドルのクラスを定義

パドルのインスタンスを生成するために、パドルのクラスを定義します。クラスのメソッドとして、パドルの初期値を受取る処理とその値を使用して描画する処理を定義します。

パドルの基本クラス定義

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

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

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

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

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

パドルの描画処理の定義

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

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

Paddleクラスからインスタンス作成

クラスも定義できたところで、このクラスを元にインスタンスを生成して描画をします。

インスタンスを生成

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

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

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

描画メソッド(draw)のコール

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

できた!\(^o^)/

パドル生成

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

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