このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第91回

DeviceOrientation Eventでブロック崩し作ってみた

2012年07月26日 13時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
js-labo

 iOS 5.1に実装された「DeviceOrientation Event」APIと、ゲームライブラリー「enchant.js」を使ったスマートフォン用ゲームを前回に続き作ります。今回は、前回のスカッシュゲームをベースにブロック崩しを仕上げていきましょう。

ブロックの描画

 ブロック崩しの基本的な原理はスカッシュと同じですが、ブロック崩しではボールで崩していく大量のブロックが必要です。enchant.jsはオブジェクト指向なのでブロッククラスを作っても処理できますが、今回は配列にブロックの情報を入れて処理する、昔ながらの方法を採用します(クラスを使ったサンプルは最後のページにURLを記載してありますので参考にしてみてください)。

 ブロックの合計数を入れる変数「count」、ブロックの情報を入れる配列「block」を用意します。ブロックをすべて消すと再度ブロックを表示してゲームを続行するため、消したブロックの数を入れる変数「total」も用意しました。


// ブロックの総数を入れるカウンタ変数
var count = 0;
// ブロックを格納する配列
var block = new Array();
// 消したブロックの総数を入れる変数
var total = 0;

 ブロックはゲーム開始時だけでなくすべて消し終わったときにも描画するので、関数として用意しましょう。関数drawBlock()ではブロックはスプライト(関連記事)として作成し、for命令を使ってX, Y座標に沿って規則正しく並べていきます。


function drawBlock(){
  count = 0// ブロックの総数を示すカウンタを0にする
  // ボールの設定を縦横の数だけ繰り返し生成
  for(var y=0; y<5; y++){
    for(var x=0; x<7; x++){
      block[count] = new Sprite(24, 12);
      block[count].image = game.assets["images/block.png"];
      block[count].x = x * 32+12// X座標
      block[count].y = y * 18 + 30; // Y座標
      game.rootScene.addChild(block[count]);
      count = count + 1// ブロックの総数を示すカウンタを増やす
    }
  }
  total = count; // 消すブロックの総数を変数に入れる
}

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング