Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 – Teil 3, Mausereignisse und Spielcharakterbewegungen zu schreiben

Der dritte Artikel, Mausereignisse und Spielcharakterbewegungen

Annahme
Angenommen, alle Objekte, die Mausereignisse hinzufügen können, verfügen über eine MouseEvent-Methode und die hinzugefügten Mausereignisse kommen über diesen MouseEvent-Aufruf .
Um ein Mausereignis hinzuzufügen, müssen Sie in diesem Fall nur ein Mausereignis zur Leinwand hinzufügen und dann die childList in der LGlobal-Klasse schleifen, d. h. alle visuellen Objekte in einer Schleife ausführen , dann rufen Sie die entsprechende Methode auf.
Zweitens: Implementieren Sie
1, fügen Sie die Methode „mouseEvent“ zur LGlobal-Klasse hinzu und ändern Sie dann setCanvas der Klasse „LGlobal“, um das Hinzufügen und Aufrufen von Canvas-Mausereignissen zu implementieren

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, Fügen Sie dem Array der LSprite-Klasse „mouseList“ hinzu, das zum Speichern der hinzugefügten Mausereignisse verwendet wird, und fügen Sie dann die Methode „mouseEvent“ hinzu
In der Methode „mouseEvent“ müssen wir zwei Prozesse ausführen,
1), um festzustellen, ob wir die Maus hinzugefügt haben Wenn nicht, wird eine Schleife erstellt (childList
2). Wenn ein Mausereignis hinzugefügt wird, wird festgestellt, ob darauf geklickt wird. Obwohl LSprite in diesem Sinne eine sichtbare Klasse ist, ist die Bitmap oben sichtbar Genauer gesagt ist es das BitmapData in dieser Bitmap-Klasse, genauer gesagt das Bild in diesem BitmapData. Um festzustellen, ob Sie angeklickt wurden, müssen Sie feststellen, ob das visuelle Objekt in der ChildList im LSprite enthalten ist Wenn darauf geklickt wurde, dann rufen Sie die entsprechende Methode

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-Methode auf, um festzustellen, ob Sie angeklickt wurden
Die LBitmap-Klasse muss auch feststellen, ob Sie angeklickt wurden, also hinzufügen 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;  
        }  
    }

Imitieren Sie bei der Verwendung von Mausereignissen die Syntax von ActionScript

backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);

Bereiten Sie als Nächstes eine Karte und eine Charakterlaufkarte vor und verwenden Sie Mausereignisse, um die Bewegung des Charakters zu steuern.

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

Das ist es. Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 zu schreiben – Teil 3, über Mausereignisse und Spielcharakterbewegungen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). )!