ActionScript와 유사한 구문을 사용하여 html5 작성 - 7부, 사용자 정의 버튼

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 클래스를 생성하고 버튼에 두 개의 그림을 설정한 후 마우스가 해당 위치로 이동할 때 마우스 위치를 듣습니다. 버튼, 버튼 상태를 변경하는 것은 간단한 버튼입니다.


여기에서는 mousemove를 사용하여 마우스 위치를 듣고, LGlobal 클래스에 ButtonList 배열을 추가하고, 버튼을 생성할 때 해당 버튼을 ButtonList에 추가한 다음, 마우스를 움직일 때 버튼 리스트 배열은 마우스가 버튼 위에 있는지 확인하고, 버튼이 삭제되면 버튼이 버튼 리스트 배열에서 삭제됩니다.


일부 수정:
1. LSprite 클래스를 수정하고 die 메소드를 추가합니다. 각 LSprite가 제거될 때 자체 die 메소드를 호출해야 합니다. 이번에는 버튼 등 처리할 이벤트를 버튼리스트에서 삭제해야 합니다.
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 중국어 웹사이트(www.php.cn)를 참고하세요!