ActionScript와 유사한 구문을 사용하여 html5 작성 - 3부, 마우스 이벤트 및 게임 캐릭터 이동

세 번째 글, 마우스 이벤트와 게임 캐릭터 이동

1. 가정
마우스 이벤트를 추가할 수 있는 모든 객체에는 mouseEvent 메소드가 있고, 추가된 마우스 이벤트는 이 mouseEvent 호출을 통해 온다고 가정합니다. .
이 경우 마우스 이벤트를 추가하려면 캔버스에 마우스 이벤트를 추가한 다음 LGlobal 클래스에서 childList를 반복하면 됩니다. 즉, 마우스 이벤트가 추가되면 모든 시각적 개체를 반복하면 됩니다. , 해당 메서드를 호출합니다.
두 번째,
1을 구현하고 LGlobal 클래스에 mouseEvent 메서드를 추가한 다음 LGlobal 클래스의 setCanvas를 수정하여 캔버스 마우스 이벤트 추가 및 호출을 구현합니다.

LGlobal.setCanvas = function (id,width,height){  
    LGlobal.canvasObj = document.getElementById(id);  
    if(width)LGlobal.canvasObj.width = width;  
    if(height)LGlobal.canvasObj.height = height;  
    LGlobal.width = LGlobal.canvasObj.width;  
    LGlobal.height = LGlobal.canvasObj.height;  
    LGlobal.canvas = LGlobal.canvasObj.getContext("2d");  
      
    LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_DOWN,function(event){  
        LGlobal.mouseEvent(event,LMouseEvent.MOUSE_DOWN);  
    });  
}   
LGlobal.mouseEvent = function(event,type){  
    var key;  
    for(key in LGlobal.childList){  
        if(LGlobal.childList[key].mouseEvent){  
            LGlobal.childList[key].mouseEvent(event,type);  
        }  
    }  
}

2, LSprite 클래스에 mouseList 배열을 추가하고, 추가된 마우스 이벤트를 저장한 다음 mouseEvent 메소드를 추가하는 데 사용됩니다.
mouseEvent 메소드에서는 마우스 이벤트 추가 여부를 확인하기 위해
1) 2가지 프로세스를 수행해야 합니다. . 그렇지 않은 경우 childList를 반복합니다
2) 클릭 여부를 확인하기 위해 마우스 이벤트를 추가하면 LSprite는 의미상 표시되는 클래스이지만 실제로 표시되는 것은 비트맵입니다. 정확하게 말하면 이 Bitmap 클래스의 BitmapData, 더 정확하게 말하면 이 BitmapData의 이미지입니다. 따라서 클릭되었는지 확인하려면 LSprite의 childList에 있는 시각적 객체가 있는지 확인해야 합니다. 클릭되면 해당

mouseEvent:function (event,type,cood){  
        if(cood==null)cood={x:0,y:0};  
        var self = this;  
        if(self.mouseList.length == 0){  
            for(key in self.childList){  
                if(self.childList[key].mouseEvent){  
                    self.childList[key].mouseEvent(event,type,{x:self.x+cood.x,y:self.y+cood.y});  
                }  
            }  
            return;  
        }  
        if(self.childList.length == 0)return;  
        var key;  
        var isclick = false;  
        for(key in self.childList){  
            isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});  
            if(isclick)break;  
        }  
        if(isclick){  
            for(key in self.mouseList){  
                var obj = self.mouseList[key];  
                if(obj.type == type){  
                    event.selfX = event.offsetX - (self.x+cood.x);  
                    event.selfY = event.offsetY - (self.y+cood.y);  
                    event.currentTarget = self;  
                    obj.listener(event);  
                }  
            }  
            return;  
        }  
          
    },  
    ismouseon:function(event,cood){  
        var self = this;  
        var key;  
        var isclick = false;  
        for(key in self.childList){  
            isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});  
            if(isclick)break;  
        }  
        return isclick;  
    }

ismouseon 메서드를 호출하여 클릭 여부를 확인합니다.
LBitmap 클래스도 클릭 여부를 확인해야 하므로 ismouseon<을 추가합니다. 🎜>

ismouseon:function(event,cood){  
        var self = this;  
        if(event.offsetX >= self.x + cood.x && event.offsetX <= self.x + cood.x + self.width &&   
            event.offsetY >= self.y + cood.y && event.offsetY <= self.y + cood.y + self.height){  
            return true;  
        }else{  
            return false;  
        }  
    }

마우스 이벤트를 추가할 때는 ActionScript 구문을 모방합니다.

backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);

다음으로 맵과 캐릭터 걷기 맵을 준비하고 마우스 이벤트를 사용하여 캐릭터의 움직임을 제어합니다.

init(80,"back",800,480,main);  
  
  
var list = new Array();  
var index = 0;  
var backLayer;  
//地图  
var mapimg;  
//人物  
var playerimg;  
var loader  
var imageArray;  
var animeIndex = 0;  
var dirindex = 0;  
var dirarr = new Array({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1},{x:-1,y:1},{x:1,y:1},{x:-1,y:-1},{x:1,y:-1});  
var dirmark = {"0,1":0,"-1,0":1,"1,0":2,"0,-1":3,"-1,1":4,"1,1":5,"-1,-1":6,"1,-1":7};  
  
  
//移动目标  
var toX = 0;  
var toY = 0;  
function main(){  
      
    loader = new LLoader();  
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
    loader.load("back.jpg","bitmapData");  
}  
function loadBitmapdata(event){  
    var bitmapdata = new LBitmapData(loader.content);  
    mapimg = new LBitmap(bitmapdata);  
    loader = new LLoader();  
    loader.addEventListener(LEvent.COMPLETE,loadOver);  
    loader.load("1.png","bitmapData");  
}  
function loadOver(event){  
    var bitmapdata = new LBitmapData(loader.content,0,0,70,92);  
    imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8);  
    document.getElementById("inittxt").innerHTML="";  
    playerimg = new LBitmap(bitmapdata);  
    playerimg.bitmapData.setCoordinate(0,0);  
    index = 0;  
    backLayer = new LSprite();  
    addChild(backLayer);  
    backLayer.addChild(mapimg);  
    backLayer.addChild(playerimg);  
    backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)  
    backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);  
}  
  
  
function onframe(){  
    index++;  
    if(index >= imageArray[0].length){  
        index = 0;  
    }  
    var markx = 0,marky = 0;  
    var l = 3;  
    if(playerimg.x > toX){  
        playerimg.x -= l;  
        markx = -1;  
    }else if(playerimg.x < toX){  
        playerimg.x += l;  
        markx = 1;  
    }  
    if(playerimg.y > toY){  
        playerimg.y -= l;  
        marky = -1;  
    }else if(playerimg.y < toY){  
        playerimg.y += l;  
        marky = 1;  
    }  
    if(markx !=0 || marky != 0){  
        var mark = markx+","+marky;  
        dirindex = dirmark[mark];  
    }  
    playerimg.bitmapData.setCoordinate(imageArray[dirindex][index].x,imageArray[dirindex][index].y);  
}  
function onmousedown(event){  
    toX = parseInt(event.selfX/3)*3;  
    toY = parseInt(event.selfY/3)*3;  
}

위의 내용은 ActionScript와 유사한 구문을 사용하여 html5를 작성하는 방법입니다. —— 세 번째 기사에서는 마우스 이벤트 및 게임 캐릭터 이동에 대해 다루고 있으며, 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!