「WebEffect」でマウスをクリックすると何かが起こるプログラムを書いてみる

前回の続きです。

今回は、「マウスをクリックすると何かが起こる」というイベントに関して、オブジェクト「player」をクリックするとビームが発射されるというものを書いてみます。
あいかわらずのへたれようですが許してください。

今回はオブジェクト「player」の形を最初に変更して（というのはビームらしい赤色と色がかぶっていたため）、新しいオブジェクト「beam」（ビーム）を作成します。

そのあと、シーンの「Enter Scene」アクションを今回もまたいじります。追記するだけですが。


function shot():Void{
    // ビームの位置を10ずつ上に移動していく
    if(beam._y > -100){
        beam._y -= 10;
    }
}

まずはビームの位置を上の方へ移動させるための関数を用意します。この関数が呼び出されるごとにビームの座標が上へ１０ピクセルずつ移動します。
画面の外でいつまでの座標が変わり続けるのはなんだか気持ちが悪いので、y座標が-100（表示されるウィンドウの上部より100ピクセル上の画面外の領域）よりも下にオブジェクトがある場合のみ移動するようにしています。
なお、オブジェクトの縦のサイズが１００以上あるとちょっとだけ見えてしまうかもしれないので注意しましょう。


player.onMouseDown = function():Void{    // オブジェクトplayerをクリック(MouseDown)したときのイベント
    beam._x = _xmouse;    // オブジェクトbeamのx座標をマウスのx座標にする
    beam._y = _ymouse;    // オブジェクトbeamのy座標をマウスのy座標にする
};

マウスにプレイヤーオブジェクト「player」がついてきてくれているので、ここでやりやすいのがコイツをクリックするイベントを考えればビームが発射できるというわけですよ。
つまり、ついてくるプレイヤーをクリックするとビームが発射するようにします。
ビームの初期座標はマウスのｘ、ｙ座標。
プレイヤーのｘ、ｙ座標でもいいでしょうけど。


setInterval(this, "shot", 10);    // 10ミリ秒ごとに関数shotを実行する

最後にコレ。
先ほど作成した関数shotを10ミリ秒＝0.01秒ごとに実行します。
ただし、常に実行しているので、見えないところでも動き続けています。それゆえ、先ほど制約を加えたわけですが。

ちなみに、インターバルを解除することもできます。setInterval()の返り値はインターバルのIDなので、これを使って解除します。細かいことはまたあとでやるかもしれませんが、自分で調べた方が早いかもです。
とりあえず、ここではインターバル解除の必要性がないので省いているだけです。



で、今回のプログラムにより若干それっぽくなってきた感はありますが、ここで考えるべきはビームは１つ分しか生成していないため、１発しかうてないということです。
しかも、画面上にビームが存在する状態でマウスクリックすると、その場所にビームが移動してしまいます。

ビームは１発までという制約を加えればいいかもしれませんが（その場合はビームが画面上に表示されている間は次の発射をできなくしないとだめですが）、やっぱり何発もうちたいですよね。


というわけで、次回はその辺を改善するかもしれません。



今回作成したプログラムのプロジェクトはこちら。
http://cid-1b0a73ffbf74d345.office.live.com/self.aspx/WebEffect/onMouseMove2.gla

拡張子は「gla」です。「Windows Live SkyDrive」にアップロードしました。
直接WebEffectから開くこともできます。

実行ファイルはこちら。
http://cid-1b0a73ffbf74d345.office.live.com/self.aspx/WebEffect/onMouseMove2.swf

拡張子は「swf」です。同じく「Windows Live SkyDrive」にアップロードしました。
GOM Playerやブラウザで開くことができます。