Atlas.jsブログ

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

マウスの位置から丸を生成してみよう

暫く更新が滞っていましたXipherです.

丸を常に作ってみよう

以前作った丸が落ちるプログラムとイベントハンドラとエンターフレームを使って丸を常に作り続けてみましょう.

丸が落ちるプログラムを少し変更して,新しくソースを追加してみよう.

以前は.

initialize: function () {//initializeは初期化という意味です
            this.inherit("white",10* 2,0);//Shape.Circleの引数です
            this.speedY = 1;//Y軸の速度を指定しています
            this.setPosition(240, 0);//(500/2-半径)で中心の位置です
        },

でしたが,今回はこのCircleを生成する際に引数を使ってみたいと思います.

initialize: function (x,y) {//initializeは初期化という意味です
          //function()のカッコの中は引数と言ってこのクラスを呼び出す時に引数を入れて値を使えるようにします
            this.inherit("white",10* 2,0);//Shape.Circleの引数です
            this.speedY = 1;//Y軸の速度を指定しています
            this.setPosition(x-20, y-20);//ここで引数として受け取ったxとyを入れています
        },

変更箇所はinitialize function()のカッコの中にx,yというのが増えたところとthis.setPosition()の中です.

funcitionのカッコの中に引数の指定をすることで,このMoveCircleクラスでインスタンス化する際に,値を渡して揚げることが出来ます.今回はマウスの位置を渡すために指定しています.
setPositonでは,引数としてもらった値を自分の座標として指定しています.

また,新しく以下のソースを追加しましょう.
あまり多くはありません.

game.posx = 240;
    game.posy = 0;
    //イベントハンドラのタッチムーブでマウスカーソルの位置をgame.posxとgame.posyに格納しています
    game.touchMove = function(pos){game.posx = pos.x; game.posy = pos.y;};
    game.enterFrame = function(){//1秒間に60回常に呼び出されます
      //新しく丸を作ります。 ここでは1秒間に60個の丸が作られrます
      Circle = new MoveCircle(this.posx,this.posy);//いままでのMoveCircleクラスに引数を入れて新しくCircleを作っています
      game.addChild(Circle);
    };

新しくgame.posxとgame.posyの変数を作りました.
この2つはマウスカーソルの最後の位置を記憶するための変数です.

touchMoveはイベントハンドラでマウスが画面上で動いたときに実行されます.
今回は,マウスカーソルの位置をgame.posxとgame.posyに格納するだけです.

game.enterFrameはクラスの時と同様に常に実行され続けるものです.使い方はMoveCircleの方で習いましたね.
1秒間で60回丸を生成してそれの描画を設定しています.

これだけです!

サンプルプログラムはこちら→丸を生成してみよう!


blog comments powered by Disqus

エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本