Atlas.jsブログ

Webブラウザで動作する、教育用JavaScriptゲームエンジン、Atlas.jsに関する知識共有ブログです。

ブロック崩しを作ってみよう〜ブロックを作ってみよう〜

こんにちは。moltomheadです。前回はバーの作成をしました。ということは残っているのはブロックの作成ですね。今日はブロックの作成について解説したいと思います。
今回のブロックは、ボールやバーと違って複数置くことになります。そしてそれぞれのブロックにはボールが当たった時に消えるように処理をしないといけません。それをブロックごとに一個づつ判定・処理を書いていくなんてとても面倒ですよね。実はそんなことをしなくても一回書くだけで済む方法があります。それはクラスです。OGSでもう聞いたことのある人はいると思いますが、クラスとはデータ(プロパティ)や操作(メソッド)をまとめたひな形です。例えば車の工場(クラス)があったとしたら、車の情報である色というデータや、走るという操作を指定することで、その能力を持つ車を作ることができます。前回のブログでこんなコードを見た方もいると思います。

var bar = new Shape.Box("black",100,10);
var ball = new Shape.Circle("white",10);

このnewの後に続くものがクラスです。Atlas.jsではBoxクラスやCircleクラスなどを提供し、色だったり、どういう風に動かすかを設定することができます。では、今回のようにAtlas.jsが提供しているクラスに自分が使いたい機能がなかった場合どうすればいいでしょう?そうです。なければ作ればいいんです。Atlas.jsでは既存のクラスから新しいクラスを作る機能を提供しています。では実際にボールが当たったら、消えるように動作するBlockクラスを作ってみましょう。Atlas.jsでは新しくクラスを作る場合、Atlas.createClassを使います。下のコードを参考にしてみてください。

/*ブロックのクラス*/
  	Block = Atlas.createClass(Atlas.Shape.Box,{//このクラスをBlockという名前にする
     	initialize: function(col,numx,numy,coordinatex,coordinatey){//初期化処理
         	this.inherit(col,numx,numy);//元になるクラスの引数を利用できる
          	this.setPosition(coordinatex,coordinatey);//表示位置の設定
          	this.collided = false;//ボールと初めて当たったかの判定
         },
         enterFrame: function(){//ループ処理
         	if(ball.hitTest(this)){//ボールがブロックに当たったか
              	 if(this.collided == false)//初めてボールと当たったら
                       ball.speedY = -ball.speedY;//ボールを移動方向を反転
         		this.remove();//ブロックを消す。(消してもボールと当たる判定は残る)
              	 this.collided = true;//ボールに当たったためtrueに
        	}
         }
                            
   	});

前回と比べて大分難しくなったと思いますから一から順番に説明していきます。まず先ほど言ったAtlas.createClassでは元となるクラス、追加する機能の順番に書いていきます。Atlas.Shape.Boxが元のクラス、その後に続く{}で囲まれているのが追加する機能です。今回作るのはブロックのクラスなので、Boxクラスを使ってクラスを作っていきます。ボールの場合はCircleクラスを使いましょう。
まず最初にクラスを作る場合、初期化処理をしなければなりません。それがinitializeメソッドです。initializeメソッドではクラスがもつ位置や色の情報などを指定することができます。また、独自にプロパティを指定することもできます。上の例ではthis.colliedがそれにあたります。this.inheritでは元になるクラスの引数をそのまま利用することができます。ここは難しいと思うので、とりあえず上の例のように書いてみてください。引数などがわからないという方は前回のブログを見てみてください。プログラミングの基礎的な解説〜関数〜
初期化処理が終わったらあとはボールに当たった場合の処理を書いていきます。これはボール作成の時にやったenterFrameの処理に似ていますね。ブロック崩しを作ってみよう〜ボールを作る〜
このようにenterFrameはクラス内でも利用することができます。enterFrame内ではボールが当たったら、消えるような処理をしています。ボールの方もブロックと当たった場合、反射するように処理をしています。ただし、ブロックは消すことはできますが、ボールと当たる判定が残ってしまうので、上では、this.collided = false;を使ってボールがブロックと初めて当たった場合はtrueにし、それ以降ボールが反射しないようにしています。
これで、ブロックの衝突判定を設定することが出来ました。ただ、クラスを書いただけで画面に表示できるわけではありません。実際に画面に表示させたい場合はループ処理などを使って何回もaddChildをする必要があります。

for(var i=1;i<=6;i++){//ループ処理
      	for(var j=1;j<=4;j++){
             	block = new Block("red",70,30,70*i-30,30*j+50);//位置、大きさ、色の指定
                game.addChild(block);//画面に表示
        }
 }

このようにループしながら、表示する位置をずらすことで、何個もブロックを並べることができます。そして実際にボールと組み合わせたサンプルがこれです。
ボールに当たったブロックが消えるサンプル
どうですか?ボールでブロックを消せるようになればあと一歩でブロック崩しの完成です。頑張りましょう。
今回はここまでです。ありがとうございました。


blog comments powered by Disqus

エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本