当前位置:编程学习 > html/css >>

用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动

 

第三篇,鼠标事件与游戏人物移动

用仿ActionScript的语法来编写html5——第一篇,

用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画

 

一,假设

假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用。

这样的话,添加鼠标事件,其实只需要给canvas添加一个鼠标事件,然后循环LGlobal类里的childList,即循环所有的可视对象,如果被添加了鼠标事件,那么就调用它相应的方法。

二,实现

1,给LGlobal类追加mouseEvent方法,然后修改LGlobal类的setCanvas,实现canvas的鼠标事件的添加与调用

 

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方法中,我们需要做2个处理,

1),判断自己是否添加了鼠标事件,如果没有添加,则循环它的childList

2),如果添加了鼠标事件,判断自己是否被点击,LSprite虽说意义上是可视类,但是其实目前它本身是不可见的,可见的是它上面的Bitmap,准确点说,是这个Bitmap类中的BitmapData,更准确点说,是这个BitmapData中的Image,所以判断自己是否被点击,需要判断的是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); 

 

 

 

 

下面,准备一张地图,一个人物行走图,用鼠

补充:web前端 , HTML 5 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,