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

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

基本のHTMLを準備

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Block Breaking</title>
</head>
<body>
<svg id="stage"></svg>
<script src="block-breaking-init.js"></script>
</body>
</html>

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

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

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

'use strict';

var game = {
  stage : {
    base  : document.getElementById('stage'),
    svgns : 'http://www.w3.org/2000/svg',
    w : 500,
    h : 500
  }
};

game.stage.base.setAttribute('xmlns',  game.stage.svgns);
game.stage.base.setAttribute('width',  String(game.stage.w));
game.stage.base.setAttribute('height', String(game.stage.h));

まずはステージの設定から。ゲームで設定する値は、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賢い。

/**
@param {string} name
@param {string} value
*/
Element.prototype.setAttribute = function(name,value) {};

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

ブラウザで表示確認

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

<svg id="stage" xmlns="http://www.w3.org/2000/svg" width="500" height="500"></svg>

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

<svg id="stage" style="border: solid 1px #000;"></svg>
svg要素でステージ作成

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

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