세 번째 글, 마우스 이벤트와 게임 캐릭터 이동
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)를 참고하세요!