用仿ActionScript的语法来编排html5

作者: 关于计算机  发布:2019-11-24

 

 

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

上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示。

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

这次用Sprite来动态显示图片。

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

依然遵循上一篇对显示对象的处理的思路,添加LSprite类,并追加show方法,如下:

 

 

一,假设

function LSprite(){ 

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

    var self = this; 

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

    self.type = "LSprite"; 

二,实现

    self.x = 0; 

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

    self.y = 0; 

 

    self.visible=true; 

LGlobal.setCanvas = function (id,width,height){ 

    self.childList = new Array() 

    LGlobal.canvasObj = document.getElementById(id); 

    if(width)LGlobal.canvasObj.width = width; 

LSprite.prototype = { 

    if(height)LGlobal.canvasObj.height = height; 

    show:function (cood){ 

    LGlobal.width = LGlobal.canvasObj.width; 

        if(cood==null)cood={x:0,y:0}; 

    LGlobal.height = LGlobal.canvasObj.height; 

        var self = this; 

    LGlobal.canvas = LGlobal.canvasObj.getContext("2d"); 

        if(!self.visible)return; 

     

        LGlobal.show(self.childList,{x:self.x+cood.x,y:self.y+cood.y}); 

    LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_DOWN,function(event){ 

    }, 

        LGlobal.mouseEvent(event,LMouseEvent.MOUSE_DOWN); 

    addChild:function (DisplayObject){ 

    }); 

        var self  = this; 

}  

        self.childList.push(DisplayObject); 

LGlobal.mouseEvent = function(event,type){ 

    } 

    var key; 

    for(key in LGlobal.childList){ 

 

        if(LGlobal.childList[key].mouseEvent){ 

 

            LGlobal.childList[key].mouseEvent(event,type); 

因为Sprite上可以有图片等其他的可显示对象,所以我在其构造函数里,添加了childList,用来保存它上面的所有对象。然后在调用它本身的show方法的时候,将其LGlobal循环现实其子对象。

        } 

这样一来,我们上一篇中显示图片的代码,也可以利用Sprite来显示了,代码如下:

    } 

 

function main(){ 

 

    loader = new LLoader(); 

2,给LSprite类添加mouseList数组,用来保存所添加的鼠标事件,然后添加mouseEvent方法

    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata); 

mouseEvent方法中,我们需要做2个处理,

    loader.load("1.png","bitmapData"); 

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

2),如果添加了鼠标事件,判断自己是否被点击,LSprite虽说意义上是可视类,但是其实目前它本身是不可见的,可见的是它上面的Bitmap,准确点说,是这个Bitmap类中的BitmapData,更准确点说,是这个BitmapData中的Image,所以判断自己是否被点击,需要判断的是LSprite中的childList中的可视对象是否被点击,如果被点击,则调用相应的方法

function loadBitmapdata(event){ 

 

    var bitmapdata = new LBitmapData(loader.content); 

mouseEvent:function (event,type,cood){ 

    var mapimg = new LBitmap(bitmapdata); 

        if(cood==null)cood={x:0,y:0}; 

     

        var self = this; 

    var backLayer = new LSprite(); 

        if(self.mouseList.length == 0){ 

    addChild(backLayer); 

            for(key in self.childList){ 

    backLayer.addChild(mapimg); 

                if(self.childList[key].mouseEvent){ 

                    self.childList[key].mouseEvent(event,type,{x:self.x+cood.x,y:self.y+cood.y}); 

 

                } 

 

            } 

我们知道,actionscript中的Sprite可以添加EnterFrame事件,用来动态显示图片,我这里也来模仿一下,因为在LSprite类中show方法是不断循环的,所以,我只需要在show方法中不断调用一个方法,就能让其循环。

            return; 

我假设有一个数组,里面存储了所有不断循环的所有方法,然后我就可以在show方法中循环这个数组,这样就达到了所有方法的循环,看下面

        } 

 

        if(self.childList.length == 0)return; 

function LSprite(){ 

        var key; 

    var self = this; 

        var isclick = false; 

    self.type = "LSprite"; 

        for(key in self.childList){ 

    self.x = 0; 

            isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y}); 

    self.y = 0; 

            if(isclick)break; 

    self.visible=true; 

        } 

    self.childList = new Array() 

        if(isclick){ 

    self.frameList = new Array(); 

            for(key in self.mouseList){ 

                var obj = self.mouseList[key]; 

LSprite.prototype = { 

                if(obj.type == type){ 

    show:function (cood){ 

                    event.selfX = event.offsetX - (self.x+cood.x); 

        if(cood==null)cood={x:0,y:0}; 

                    event.selfY = event.offsetY - (self.y+cood.y); 

        var self = this; 

                    event.currentTarget = self; 

        if(!self.visible)return; 

                    obj.listener(event); 

        LGlobal.show(self.childList,{x:self.x+cood.x,y:self.y+cood.y}); 

                } 

        self.loopframe(); 

            } 

    }, 

            return; 

    loopframe:function (){ 

        } 

        var self = this; 

         

        var key; 

    }, 

        for(key in self.frameList){ 

    ismouseon:function(event,cood){ 

            self.frameList[key](); 

        var self = this; 

        } 

        var key; 

    }, 

        var isclick = false; 

    addChild:function (DisplayObject){ 

        for(key in self.childList){ 

        var self  = this; 

            isclick = self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y}); 

        self.childList.push(DisplayObject); 

            if(isclick)break; 

    } 

        } 

        return isclick; 

 

    } 

 

 

光假设当然是不行的,我们需要有添加这个循环事件的方法,所以我们还需要addEventListener方法,以及移除这个事件的removeEventListener方法

 

 

ismouseon方法,用来判断自己是否被点击

addEventListener:function (type,listener){ 

LBitmap类中也需要判断是否自己被点击,所以添加ismouseon

        var self = this; 

 

        if(type == LEvent.ENTER_FRAME){ 

ismouseon:function(event,cood){ 

            self.frameList.push(listener); 

        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){ 

    removeEventListener:function (type,listener){ 

            return true; 

        var self = this; 

        }else{ 

        var i,length = self.frameList.length; 

            return false; 

        for(i=0;i<length;i++){ 

        } 

            if(type == LEvent.ENTER_FRAME){ 

    } 

                self.frameList.splice(i,1); 

 

                break; 

 

            } 

添加鼠标事件的时候,模仿ActionScript的语法

        } 

 

    } 

backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown); 

 

 

 

 

该添加的都添加了,接下来,就来简单实现一个人物的行走图

 

先来给BitmapData类添加几个方法,用来改变图片显示的区域位置等

 

 

下面,准备一张地图,一个人物行走图,用鼠标事件来控制人物的走动,

LBitmapData.prototype = { 

 

        setProperties:function (x,y,width,height){ 

init(80,"back",800,480,main); 

            var self = this; 

 

            self.x = x; 

 

            self.y = y; 

var list = new Array(); 

            self.width = width; 

var index = 0; 

            self.height = height; 

var backLayer; 

        }, 

//地图 

        setCoordinate:function (x,y){ 

var mapimg; 

            var self = this; 

//人物 

            self.x = x; 

var playerimg; 

            self.y = y; 

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 list = new Array(); 

 

var index = 0; 

//移动目标 

var mapimg; 

var toX = 0; 

var loader 

var toY = 0; 

var imageArray; 

function main(){ 

var animeIndex = 0; 

     

var dirindex = 0; 

    loader = new LLoader(); 

var dirarr = new Array({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1}); 

    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata); 

function main(){ 

    loader.load("back.jpg","bitmapData"); 

    loader = new LLoader(); 

    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata); 

function loadBitmapdata(event){ 

    loader.load("1.png","bitmapData"); 

    var bitmapdata = new LBitmapData(loader.content); 

    mapimg = new LBitmap(bitmapdata); 

function loadBitmapdata(event){ 

    loader = new LLoader(); 

    var bitmapdata = new LBitmapData(loader.content,0,0,70,92); 

    loader.addEventListener(LEvent.COMPLETE,loadOver); 

    imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8); 

    loader.load("1.png","bitmapData"); 

    mapimg = new LBitmap(bitmapdata); 

    mapimg.x = 100; 

function loadOver(event){ 

    mapimg.bitmapData.setCoordinate(0,0); 

    var bitmapdata = new LBitmapData(loader.content,0,0,70,92); 

    index = 0; 

    imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8); 

    var backLayer = new LSprite(); 

    document.getElementById("inittxt").innerHTML=""; 

    addChild(backLayer); 

    playerimg = new LBitmap(bitmapdata); 

    backLayer.addChild(mapimg); 

    playerimg.bitmapData.setCoordinate(0,0); 

    backLayer.addEventListener(LEvent.ENTER_FRAME, onframe) 

    index = 0; 

    backLayer = new LSprite(); 

 

    addChild(backLayer); 

 

    backLayer.addChild(mapimg); 

function onframe(){ 

    backLayer.addChild(playerimg); 

    index++; 

    backLayer.addEventListener(LEvent.ENTER_FRAME, onframe) 

    if(index >= imageArray[0].length){ 

    backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown); 

        index = 0; 

    } 

 

    mapimg.bitmapData.setCoordinate(imageArray[dirindex][index].x,imageArray[dirindex][index].y); 

 

     

function onframe(){ 

    mapimg.x += dirarr[dirindex].x*3; 

    index++; 

    mapimg.y += dirarr[dirindex].y*3; 

    if(index >= imageArray[0].length){ 

    if(animeIndex++ > 20){ 

        index = 0; 

        dirindex++; 

    } 

        if(dirindex > 3)dirindex = 0; 

    var markx = 0,marky = 0; 

        animeIndex = 0; 

    var l = 3; 

    } 

    if(playerimg.x > toX){ 

        playerimg.x -= l; 

 

        markx = -1; 

 

    }else if(playerimg.x < toX){ 

 

        playerimg.x += l; 

 

        markx = 1; 

效果看下面的url,看不到效果的请下载支持html5的浏览器

    } 

    if(playerimg.y > toY){ 

源码的话,直接用浏览器就可以查看了,地球人都知道

        playerimg.y -= l; 

摘自 lufy小屋

        marky = -1; 

这次用Sprite来动态显示图片。 依然遵循上一篇对显...

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

 

 

 

 

看一下成果吧

 

摘自 lufy小屋

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

本文由今晚买四不像发布于关于计算机,转载请注明出处:用仿ActionScript的语法来编排html5

关键词:

上一篇:页面之间的跳转效果
下一篇:没有了