Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 – Teil 7, benutzerdefinierte Schaltflächen zu schreiben

Teil 7, Schaltflächen anpassen


Dieses Mal mache ich es einfacher und passe die Schaltflächen an.
Tatsächlich ist es mit den zuvor definierten Klassen LSprite, LBitmap und anderen Klassen sehr praktisch, Schaltflächen zu definieren.
Das Folgende ist der Code zum Hinzufügen einer Schaltfläche:

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");  
}

Prinzip: Erstellen Sie eine von LSprite geerbte LButton-Klasse, legen Sie zwei Bilder für die Schaltfläche fest und überwachen Sie dann die Mausposition, wenn die Maus bewegt wird Wechselt zur Schaltfläche. Beim Ändern des Schaltflächenstatus handelt es sich um eine einfache Schaltfläche.


Hier verwende ich Mousemove, um die Mausposition abzuhören, füge ein ButtonList-Array zur LGlobal-Klasse hinzu, füge beim Erstellen einer Schaltfläche die Schaltfläche zur ButtonList hinzu und dann, wenn ich die Maus bewege, Sie Das Array buttonList bestimmt, ob sich die Maus auf der Schaltfläche befindet. Wenn die Schaltfläche gelöscht wird, wird die Schaltfläche aus dem Array buttonList gelöscht.


Einige Änderungen:
1. Ändern Sie die LSprite-Klasse und fügen Sie eine Die-Methode hinzu Das zu verarbeitende Ereignis, z. B. dieses Mal die Schaltfläche, muss aus der Schaltflächenliste gelöscht werden.
2. Fügen Sie jedem Konstruktor einen Objektindex hinzu, um jedes Objekt zu unterscheiden.
3. Ändern Sie die Methode addChild und fügen Sie DisplayObject.parent = self hinzu, was bedeutet, dass jedem self-Objekt ein übergeordnetes Objekt zugewiesen wird.


Wenn Sie bereit sind, beginnen Sie mit der Erstellung der Schaltflächenklasse 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;  
        }  
    }  
}

Das Obige ist die Verwendung einer ActionScript-ähnlichen Syntax zum Schreiben von HTML5 - Teil 7, dem Inhalt benutzerdefinierter Schaltflächen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). )!