欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-02 23:05:58
  第三篇,鼠标事件与游戏人物移动 用仿actionscript的语法来编写html5——第一篇, 用仿actionscript的语法来编写html5&md...

 

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

用仿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].ismoun(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.pidecoordinate(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; 

 

 

 

 

看一下成果吧

http://fsanguo.comoj.com/html5/jstoas02/index.html

 


摘自 lufy小屋