Pocket

ブロック崩しゲームの作成

皆さんはブロック崩しをご存知でしょうか?(すぐ出てくる人は、大分おっさ…….)あのブロックが並べてあって、ボールとパドル(バー)を駆使してブロックにぶつけて消していくあれです。昔、Flashなどで作ったことはあるのですが、JavaScriptでは作ったことがなかったのと、SVG要素の学習もかねて作ってみることにしました。

基本のHTMLを準備

まずは、基本のHTMLファイルを準備します。svg要素にid属性を設定して、body要素内に配置します。(8行目)

HTMLファイル側は基本これだけ。あとは、JavaScriptを読み込む処理を追加するぐらいで、基本的には全てJavaScript側で記述していきます。とりあえずこれから作成するblock-breaking-init.jsを読み込む準備をしておきます。(9行目)

ゲームの初期設定ファイルを作成

これからJavaScriptのファイルをいくつかに分けて書いていきます。全部同じファイル内に書いてもよいのですが、可読性が悪くなりそうなので処理ごとに分けることにしました。まずは、初期設定用のファイルを作成します。block-breaking-init.jsという名前で新規作成。

まずはステージの設定から。ゲームで設定する値は、gameという変数(オブジェクト)で全て持たせることにします。それぞれの値の解説。

  • game.stage.base – HTMLで配置したsvg要素を格納。
  • game.stage.svgns – 名前空間を格納。あとで要素を生成するときにも使うので変数にとっておく。
  • game.stage.w – ステージの幅。
  • game.stage.h – ステージの高さ。

この値を使用して、game.stage.baseオブジェクト(svg要素)の属性をsetAttributeメソッドで設定します。

setAttributeメソッドの第二引数が数値型のままだと、PHPStormが以下のような警告を出しました。

Argument type number is not assignable to parameter type string less…
Checks JavaScript called function arguments , return values , assigned expressions to be of correct type. The validation works in JavaScript, html or jsp files.

要は第二引数のタイプを文字型にしなさいという警告。JavaScriptのコアファイルの方で、JSDocに文字列型(string)の記述があった。PHPStorm賢い。

ステージの幅と高さの値を数値で保持しているので、setAttributeメソッドにセットするタイミングで、 標準ビルトインオブジェクトのStringオブジェクトを使用して文字型に変換して渡しています。これで準備OK。

ブラウザで表示確認

では、GoogleChromeのデベロッパーツールでsvg要素に設定されているか確認します。

ただ、真っ白な画面に空っぽのsvg要素が生成されているだけなので見た目何も見えないので、svg要素にstyle属性を設定して枠線を出します。とりあえずインラインで。

svg要素でステージ作成

できた!\(^o^)/
とりあえず枠線表示して、svg要素で作った500×500の大きさのステージができました。次回は、パドル(バー)の生成を行います。

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