Atlas.jsブログ

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

丸を動かしてみよう 2!

丸を動かしてみよう2

丸を動かしてみようではクリックしたところに丸が動きました.今度は自動で動く丸を作ってみましょう.

クラスを作ろう

クラスを作る前にクラスの説明をします.

クラスとはある物体のひな形にようなものです.例えば,"服クラス"があったとします,この"服クラス"には以下の

色,形,大きさ

が含まれているとします.しかし,このままでは服ではありません,あくまでひな形です.

では服を作りましょう.
"服クラス"には
色,形,材質,大きさがそれぞれあるので,

色:赤,形:パーカー,大きさ:150-160cmの人向け

と,それぞれ入れることで赤色の150-160cmの人向けのパーカーが出来上がりました.

このように,クラスはあくまでもひな形のようなもので,実物ではありません.実物にするには,実際の情報を持ったものにする必要があります.
この実際に情報を持ったものをインスタンスと言います.

さらに!クラスはこの物体を動かしたりすることが出来ます,これをメソッドといいます.
メソッドはクラス自体にあるものなので,当然インスタンスにも引き継がれます.

服では着ることが出来る!というようなイメージです.
クラスとインスタンスは以下のイメージです.


クラスを作ろう リターンズ

実際に作ってみよう.

ここでは, Shape.Circle classを元にあたらしいMoveCircle classを作ることにします.

Atlas();
window.onload = function(){
    var game = new App();
    game.setQuality(500,500);
    game.setSize(500,500);
    game.fps = 60;
    game.centerize();
    game.setColor("#000000");
    //class宣言部
    //サークルclass作成
    //クラスは必ず大文字から始めます
    MoveCircle = Atlas.createClass(Atlas.Shape.Circle,{
        initialize: function () {//initializeは初期化という意味です
            this.inherit("white",10* 2,0);//Shape.Circleの引数です
            this.speedY = 1;//Y軸の速度を指定しています
            this.setPosition(240, 0);//(500/2-半径)で中心の位置です
        },
         //以下のenterFrameでは、1fps毎に実行されること内容です
        enterFrame : function(){
            this.y += this.speedY;//Y軸の速度をY軸に足しています
            this.speedY += 0.1;//速度を徐々にアップさせています
            if(this.y > 550){//もし、画面外に到達したら
                this.remove();//消える
            }
        }
    });
  
    var Circle = new MoveCircle();
    game.addChild(Circle);
    game.start();
};

各ソースの意味はすでにソースコード内のコメントに記述してあります.

ここで大事なのは,

MoveCircle = Atlas.createClass(Atlas.Shape.Circle,{
  initialize: function () {

この文です.ここからクラスを作ります.
initializeは初期化という意味です,ここに記述されている事はクラスをインスタンスにするときに一番最初に実行されます.コンストラクタとも言います.

enterFrame : function(){

enterFrameでは,このクラスが常にどのような行動をするかを決めています.
詳しく説明すると,1fps毎に毎回実行される関数ということです.60fpsではおおよそ0.013秒に1回実行されると思ってください.

そして最後に.

var Circle = new MoveCircle();

の一文でクラスがインスタンスになります.この時にinitializeに記述したコンストラクタが実行されています.

これで丸が中央から落ちてきて,画面外に行くと消えるプログラムが完成しました.
プログラミングの時は早足で駆けましたが,クラスとはこういうものだ,ということを覚えておくとオブジェクト志向というものが見えてくると思います.

speedX等を追加して丸が右や左に動くようにしてみるといいかもしれませんね!

ここ←にこのプログラムのソースコードを置いておきます.


blog comments powered by Disqus

エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本