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

时间2024-01-26 11:15:02发布访客分类HTML浏览666

导读：收集整理的这篇文章主要介绍了html5教程-用仿ActionScript的语法来编写html5――第二篇，利用Sprite来实现动画，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家...

收集整理的这篇文章主要介绍了html5教程-用仿ActionScript的语法来编写html5――第二篇，利用Sprite来实现动画，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

上一篇，我已经模仿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; ilength; 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.pideCoordinate(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的浏览器

https://fsanguo.comoj.com/htML5/jstoas01/index.html

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

摘自 lufy小屋

上一篇，我已经模仿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来显示了，代码如下：

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

}

我假设有一个数组，里面存储了所有不断循环的所有方法，然后我就可以在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; ilength; 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.pideCoordinate(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的浏览器

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

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

摘自 lufy小屋

觉得可用，就经常来吧！欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

API Array div HTML html5 let Map post-format-gallery Prop this 数组

若转载请注明出处：用仿ActionScript的语法来编写html5――第二篇，利用Sprite来实现动画
本文地址： https://pptw.com/jishu/586687.html

用仿ActionScript的语法来编写html5――第五篇，Graphics绘图用仿ActionScript的语法来编写html5――第一篇，显示一张图片