ActionScript のような構文を使用して html5 を作成する - パート 7、カスタムボタン-H5 チュートリアル-php.cn

ActionScript のような構文を使用して html5 を作成する - パート 7、カスタムボタン

黄舟

リリース： 2017-01-17 16:56:20

オリジナル

1282 人が閲覧しました

その7、カスタムボタン

今回は、よりシンプルなカスタムボタンを作ります。
実際、LSprite、LBitmap、および以前に定義されたその他のクラスを使用すると、ボタンを定義するのが非常に便利です。
以下はボタンを追加するコードです

function gameInit(event){  
    backLayer = new LSprite();  
    addChild(backLayer);  
      
    btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"])));  
    btn01.x = 76;  
    btn01.y = 50;  
    backLayer.addChild(btn01);  
      
    btn02 = new LButton(new LBitmap(new LBitmapData(imglist["quit_button_up"])),new LBitmap(new LBitmapData(imglist["quit_button_over"])));  
    btn02.x = 76;  
    btn02.y = 100;  
    backLayer.addChild(btn02);  
      
    btn01.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown01);  
    btn02.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown02);  
}  
function onmousedown01(event){  
    alert("btn01 on click");  
}  
function onmousedown02(event){  
    alert("btn02 on click");  
}

ログイン後にコピー

原理: LSprite から継承した LButton クラスを作成し、ボタンに 2 つの画像を設定し、マウスの位置をリッスンしてボタンに移動すると、ボタンを変更します。状態、つまり単純なボタンです。

ここでは、mousemoveを使用してマウスの位置をリッスンし、LGlobalクラスにbuttonList配列を追加します。ボタンを作成するときに、ボタンをbuttonListに追加します。その後、マウスが移動されたかどうかを判断できます。ボタンを buttonList 配列に追加し、ボタンが削除されると、buttonList 配列からボタンを削除します。

いくつかの変更: 1. LSprite クラスを変更し、die メソッドを追加します。各 LSprite は、今回のように、削除時に処理する必要があるいくつかのイベントを呼び出します。 buttonList から削除されるボタン。
2. 各オブジェクトを区別するために、各コンストラクターに objectindex を追加します。
3. addChild メソッドを変更し、DisplayObject.parent = self を追加します。これは、親オブジェクトを各 self オブジェクトに割り当てることを意味します。

準備が整ったので、ボタンクラス LButton の作成を開始します。

function LButton(bitmap_up,bitmap_over){  
    base(this,LSprite,[]);  
    var self = this;  
    self.type = "LButton";  
    self.bitmap_up = bitmap_up;  
    self.addChild(bitmap_up);  
    if(bitmap_over == null){  
        bitmap_over = bitmap_up;  
    }else{  
        self.addChild(bitmap_over);  
    }  
    self.bitmap_over = bitmap_over;  
  
  
    self.bitmap_over.visible = false;  
    self.bitmap_up.visible = true;  
    LGlobal.buttonList.push(self);  
}  
  
  
LButton.prototype.buttonModeChange = function (){  
    var self = this;  
    var cood={x:0,y:0};  
    var parent = self.parent;  
    while(parent != "root"){  
        cood.x += parent.x;  
        cood.y += parent.y;  
        parent = parent.parent;  
    }  
    if(self.ismouseon(LGlobal.mouseMoveEvent,cood)){  
        self.bitmap_up.visible = false;  
        self.bitmap_over.visible = true;  
    }else{  
        self.bitmap_over.visible = false;  
        self.bitmap_up.visible = true;  
    }  
}  
LButton.prototype.die = function (){  
    var self = this;  
    arguments.callee.super.die.call(this);  
    for(var i=0;i<LGlobal.buttonList.length;i++){  
        if(LGlobal.buttonList[i].objectindex == self.objectindex){  
            LGlobal.buttonList.splice(i,1);  
            break;  
        }  
    }  
}

ログイン後にコピー

上記は、ActionScript のような構文を使用して html5 を記述することです - パート 7、カスタムボタンのコンテンツ詳細については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。