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

原创 2011年09月08日 16:25:15
上一篇,我已经模仿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
源码的话,直接用浏览器就可以查看了,地球人都知道


下一篇,该研究鼠标事件了

用仿ActionScript的语法来编写html5——第七篇,自定义按钮

第七篇,自定义按钮 这次弄个简单点的,自定义按钮。 其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了。 下面是添加按钮的代码, function gameI...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月21日 18:41
  • 5207

用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件

第九篇,仿URLLoader读取文件 先看看最后的代码 function readFile(){ urlloader = new LURLLoader(); urlloader.addEv...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月26日 21:39
  • 5048

[转帖]FMS客户端 ActionScript 语言参考(1)

[转帖]FMS客户端 ActionScript 语言参考(1)来源:蓝色理想译者:起舞弄清影译者博客:http://wenjun.flash9.net/ 面的代码摘自他的博客.招收翻译人员若干加入这个...
  • sujun10
  • sujun10
  • 2007年04月02日 11:13
  • 1246

用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg

第四篇,继承与简单的rpg 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.csdn.net/lufy_legend/article/d...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月13日 17:36
  • 5096

用仿ActionScript的语法来编写html5——第一篇,显示一张图片

最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇 ...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月06日 13:15
  • 24769

用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果

第八篇,图片处理+粒子效果用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月21日 18:45
  • 6856

用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件

用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件终篇,LegendForHtml5Programming1.0开源库件此贴为...
  • lufy_Legend
  • lufy_Legend
  • 2011年10月05日 11:21
  • 13531

用仿ActionScript的语法来编写html5——第五篇,Graphics绘图

用仿ActionScript的语法来编写html5——第五篇,Graphics绘图 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.cs...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月15日 12:44
  • 7288

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

第三篇,鼠标事件与游戏人物移动 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.csdn.net/lufy_legend/article...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月13日 11:34
  • 7680

用仿ActionScript的语法来编写html5——第六篇,TextField与输入框

用仿ActionScript的语法来编写html5——第六篇,TextField与输入框 一,对比 1,html5中 首先看看在html5的canvas中的文字显示 var canva...
  • lufy_Legend
  • lufy_Legend
  • 2011年09月16日 15:28
  • 7196
收藏助手
不良信息举报
您举报文章:用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画
举报原因:
原因补充:

(最多只允许输入30个字)