[ 登录注册 ]

HTML5

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

2016/08/17 14:11 [db:作者] 返回上一页

 

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

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

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

 

function LSprite(){ 

    var self = this; 

    self.type = "LSprite"; 

    self.x = 0; 

    self.y = 0; 

    self.visible=true; 

    self.childList = new Array() 

LSprite.prototype = { 

    show:function (cood){ 

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

        var self = this; 

        if(!self.visible)return; 

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

    }, 

    addChild:function (DisplayObject){ 

        var self  = this; 

        self.childList.push(DisplayObject); 

    } 

 

 

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

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

 

function main(){ 

    loader = new LLoader(); 

    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata); 

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

function loadBitmapdata(event){ 

    var bitmapdata = new LBitmapData(loader.content); 

    var mapimg = new LBitmap(bitmapdata); 

     

    var backLayer = new LSprite(); 

    addChild(backLayer); 

    backLayer.addChild(mapimg); 

 

 

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

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

 

function LSprite(){ 

    var self = this; 

    self.type = "LSprite"; 

    self.x = 0; 

    self.y = 0; 

    self.visible=true; 

    self.childList = new Array() 

    self.frameList = new Array(); 

LSprite.prototype = { 

    show:function (cood){ 

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

        var self = this; 

        if(!self.visible)return; 

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

        self.loopframe(); 

    }, 

    loopframe:function (){ 

        var self = this; 

        var key; 

        for(key in self.frameList){ 

            self.frameList[key](); 

        } 

    }, 

    addChild:function (DisplayObject){ 

        var self  = this; 

        self.childList.push(DisplayObject); 

    } 

 

 

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

 

addEventListener:function (type,listener){ 

        var self = this; 

        if(type == LEvent.ENTER_FRAME){ 

            self.frameList.push(listener); 

        } 

    }, 

    removeEventListener:function (type,listener){ 

        var self = this; 

        var i,length = self.frameList.length; 

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

            if(type == LEvent.ENTER_FRAME){ 

                self.frameList.splice(i,1); 

                break; 

            } 

        } 

    } 

 

 

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

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

 

LBitmapData.prototype = { 

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

            var self = this; 

            self.x = x; 

            self.y = y; 

            self.width = width; 

            self.height = height; 

        }, 

        setCoordinate:function (x,y){ 

            var self = this; 

            self.x = x; 

            self.y = y; 

        } 

    } 

 

 

好了,现在准备一张人物的行走图,这就让它动起来

 

var list = new Array(); 

var index = 0; 

var mapimg; 

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

function main(){ 

    loader = new LLoader(); 

    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata); 

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

function loadBitmapdata(event){ 

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

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

    mapimg = new LBitmap(bitmapdata); 

    mapimg.x = 100; 

    mapimg.bitmapData.setCoordinate(0,0); 

    index = 0; 

    var backLayer = new LSprite(); 

    addChild(backLayer); 

    backLayer.addChild(mapimg); 

    backLayer.addEventListener(LEvent.ENTER_FRAME, onframe) 

 

 

function onframe(){ 

    index++; 

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

        index = 0; 

    } 

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

     

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

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

    if(animeIndex++ > 20){ 

        dirindex++; 

        if(dirindex > 3)dirindex = 0; 

        animeIndex = 0; 

    } 

 

 

 

 

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

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

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


摘自 lufy小屋
点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html5/2016/0817/377715.html
评论
发表评论