モノに属性を付けてみよう！

さて、前回のサンプルで画面にマルを出したのはいいんだけど・・・
このマルって、いつまでたっても消えないじゃない！
これじゃ困っちゃうんだよな～。
なんとかしてマルが消えるようにしたいんだけど。。。
　
　「ならば、オブジェクトだ！」　-- by 業界の人

えっ、オブジェクトって、何？
　
　「オブジェクトとは、モノに“属性”と“働き”が付いたものだ。
　　今の場合は、青いマルに“寿命”という属性を付けるのだ（クワッ！）」

えっ、えっ、何のこと？
何だかよくわからないけど、とにかく業界の人のアドバイス通りやってみるね。。。

スタートするには光をクリックしてね！　>> サンプルをダウンロード

問題の、オブジェクトっていうのは、これ。

// 表示オブジェクト
var DispObject = function(obj0, lifetime0) {
　　this.obj = obj0; // 表示オブジェクト
　　this.lifetime = lifetime0; // 寿命
}

この DispObject っていうモノの中に、青いマルと、青いマルの寿命を１パッケージにまとめているんだ。
あと、一度作った青マルを後から消そうと思ったら、作りっぱなしじゃダメ。
ちゃんと作ったモノを、ぜーんぶ覚えてなくっちゃ。
そのために、objArray っていう配列を用意したよ。

var objArray = new Array();

この配列に、作った青マルを入れておくの。

準備ができたところで、青いマルを出すところを、こんな風にしてみるね。

myScript.js の中：
// Xamlオブジェクトを生成
function addObj()
{
　　var obj = theControl.content.createFromXaml(
　　　　'<Ellipse Width="20" Height="20" Fill="Blue"/> );

　　obj["Canvas.Left"] = ClickX;
　　obj["Canvas.Top"] = ClickY;

　　// 作った青いマル＋寿命(50)＝表示オブジェクトを作る
　　var dispObj = new DispObject( obj, 50 );
　　objArray.push( dispObj ); // 表示オブジェクトを配列に記憶しておく。

　　theCanvas.children.Add( obj ); // こうすると、青いマルが画面に追加される
}

こうすれば、「画面に出しっ放し」じゃなくて、ちゃんと寿命を覚えていられるようになるんだね。

一定時間で青マルを消すには、作った青マルを全部チェックして、
寿命が無くなったかどうか調べなくちゃいけません。
それをやっているのが、removeObj ってところ。

// Xamlオブジェクトを削除
function removeObj( obj_array )
{
　　for(var i=0; i < obj_array.length; i++) { // 配列を順番にチェック
　　　　var dispObj = obj_array[i];
　　　　if( --dispObj.lifetime <= 0 ){ // 寿命を１つ縮めて、それが０になったら
　　　　　　theCanvas.children.Remove( dispObj.obj ); // 画面から青マルを消す
　　　　　　dispObj.obj = null; // こうするとメモリーからも完全に消えるみたい
　　　　　　dispObj = null;
　　　　　　objArray.splice( i, 1 ); // 配列からも青マルを消す
　　　　　　--i; // １つ消えたんだから、チェックの順番を繰り上げる
　　　　}
　　}
}

ふぅ。。。消すのって、出すのよりも手間かかるんだ。
そーいえば、部屋を散らかすより、片付ける方が大変だって気がするなぁ。。。

これでもう、モノに“属性”を付ける方法がわかったよね。
よ～し、あとは一気に完成を目指しちゃうぞ！




Copyright(c) 2008 NakaNaka All Rights Reserved.