Utilisez une syntaxe de type ActionScript pour écrire du HTML5 - Partie 7, boutons personnalisés

Partie 7, Personnaliser les boutons


Cette fois, je vais simplifier les choses en personnalisant les boutons.
En fait, avec les classes LSprite, LBitmap et autres définies précédemment, il est très pratique de définir des boutons.
Ce qui suit est le code pour ajouter un bouton,

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

Principe : créez une classe LButton héritée de LSprite, définissez deux images pour le bouton, puis écoutez la position de la souris lorsque la souris. se déplace vers le bouton Lors du changement d'état du bouton, il s'agit d'un simple bouton.


Ici, j'utilise mousemove pour écouter la position de la souris, ajouter un tableau ButtonList à la classe LGlobal, lors de la création d'un bouton, ajouter le bouton à la ButtonList, puis lorsque vous déplacez la souris, vous can Le tableau ButtonList détermine si la souris est sur le bouton, puis lorsque le bouton est supprimé, le bouton est supprimé du tableau ButtonList.


Quelques modifications :
1. Modifier la classe LSprite et ajouter une méthode die Lorsque chaque LSprite est suppriméChild, il appelle sa propre méthode die. à supprimer. L'événement à traiter, comme le bouton cette fois, doit être supprimé de la ButtonList.
2. Ajoutez objectindex à chaque constructeur pour distinguer chaque objet.
3. Modifiez la méthode addChild et ajoutez DisplayObject.parent = self, ce qui signifie attribuer un objet parent à chaque objet self.


Après la préparation, commencez à créer la classe de boutons 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;  
        }  
    }  
}

Ce qui précède consiste à utiliser une syntaxe de type ActionScript pour écrire du HTML5 - Partie 7, le contenu des boutons personnalisés. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn). )!