ブロック崩しを作る

今回はブロック崩しを作成します。前回作成した「ひとりテニス」のプログラムにブロック関係の処理を追加するだけでできます。そこで、前回とは異なる部分のみ解説を行います。これ以外の部分の処理に関しては前回の記事を参照してください。ゲームのルールですが、パドルを操作しボールを使って画面上部にあるブロックを壊すだけです。全てのブロックを壊した場合には、新たにブロックを作成しゲームを継続します。全部ブロックを破壊してもゲームは終わらず、ひたすらブロックを破壊しつづけることになります。ボールが画面下に落下してしまうとゲームオーバーとなります。持ち玉の数は1つだけでストックはありません。

ブロック崩しのゲーム画面

初期設定

ゲーム開始前には初期設定を行う必要があります。追加したのはブロックに関する変数です。ブロックの有無を示すフラグ変数blockFlag、ブロックの座標を示すblockX, blockY、ブロックの幅を示すblockW, blockH、ブロックの総数と壊したブロックの数をカウントする変数を用意します。

ちなみにオブジェクト指向の場合には、このようにグローバル変数で定義するのではなくブロックオブジェクト内に、それぞれの情報をプロパティとして格納します。

初期設定値は自由に変更できますが、ボールの移動量はボールのサイズより大きくしないでください。ボールがブロックをすり抜けたり、パドルを突き抜けてしまうためです。また、ボールのサイズを大きくすると、ごっそりとブロックが破壊され、あっという間にクリアしてしまいます。ゲームとしてほどほどに遊べるサイズにしておくのがよいでしょう。

ゲーム開始前の状態

コード01

        var ballX = 10; // ボールのX座標
        var ballY = 10; // ボールのY座標
        var ballW = 8;  // ボールの横幅
        var ballH = 8;  // ボールの縦幅
        var dx = 6; // ボールの横の移動量
        var dy = 4; // ボールの縦の移動量
        var padX = 1;   // パドルのX座標
        var padY = 280; // パドルのY座標
        var padW = 48;  // パドルの横幅
        var padH = 16;  // パドルの縦幅
        var blockFlag = new Array();    // ブロックの有無を示すフラグ
        var blockX = new Array();   // ブロックのX座標
        var blockY = new Array();   // ブロックのY座標
        var blockW = 24;    // ブロックの横幅
        var blockH = 8; // ブロックの縦幅
        var total;  // ブロックの総数
        var count;  // 消したブロックをカウントするための変数