上一篇,我已经模仿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——第二篇,利用Sprite来实现动画的更多相关文章

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

    一,LegendForHtml5Programming1.0库件是什么?它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称之 ...

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

    第九篇,仿URLLoader读取文件 先看看最后的代码 function readFile(){ urlloader = new LURLLoader(); urlloader.addEventLis ...

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

    第一篇,显示一张图片 一,代码对比 as代码: public var loader:Loader; public function loadimg():void{ loader = new Loade ...

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

    用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支持html5的浏览器 ht ...

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

    用仿ActionScript的语法来编写html5——第五篇,Graphics绘图 canvas本身就是一个Graphics,可以直接进行绘图在actionscript里面,每个Sprite都有一个G ...

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

    一,对比1,html5中首先看看在html5的canvas中的文字显示 var canvas = document.getElementById("myCanvas"); var ...

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

    第三篇,鼠标事件与游戏人物移动 一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用.这样的话,添加鼠标事件,其实只需要给canv ...

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

    第七篇,自定义按钮这次弄个简单点的,自定义按钮.其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了.下面是添加按钮的代码, function gameInit(event){ ...

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

    第四篇,继承与简单的rpg 这次用继承自LSprite的类来实现简单的rpg的demo先看一下最后的代码与as的相似度 var backLayer; //地图 var mapimg; //人物 var ...

随机推荐

  1. AdapterView 和 RecyclerView 的连续滚动

    AdapterView 和 RecyclerView 的连续滚动 android RecyclerView tutorial 概述 ListView 和 GridView 的实现方式 Recycler ...

  2. python笔记- 发送邮件

    依赖: Python代码实现发送邮件,使用的模块是smtplib.MIMEText,实现代码之前需要导入包: import smtplib from email.mime.text import MI ...

  3. 嵌入式驱动开发之spi---spi串口通信调试

    一. 概念 SPI是 Serial Peripheral Interface(串型外部接口)的缩写.SPI接口有4根PIN脚,分别是:          * SPICLK     : 用于传输数据的同 ...

  4. source insight Confirm by typing ‘yes' below"、"has been changed outside of the editor. Do you want to reload the file?"、“

    阅读内核代码习惯和喜欢使用source insight.如果能在source insight上修改内核代码,同时又不需要把修改的内核代码再拷贝到虚拟ubuntu上去那就方便了.于是想通过用samba与 ...

  5. Hibernate Tools插件的使用

            Hibernate Tools是由JBoss推出的一个Eclipse综合开发工具插件,该插件可以简化ORM框架Hibernate,以及JBoss Seam,EJB3等的开发工作.Hib ...

  6. 【BZOJ】1680: [Usaco2005 Mar]Yogurt factory(贪心)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1680 看不懂英文.. 题意是有n天,第i天生产的费用是c[i],要生产y[i]个产品,可以用当天的也 ...

  7. CNN 各layer汇总

    Flattening:类型为:Flatten 基于某个axis进行偏平的意思,如 axis = 1 ,fattens an input of shape n * c * h * w to a simp ...

  8. Machine Learning Yearning - Andrew NG

    链接(1~12章): https://gallery.mailchimp.com/dc3a7ef4d750c0abfc19202a3/files/Machine_Learning_Yearning_V ...

  9. Oracle菜鸟之怎样创建和删除表空间

    1.创建暂时表空间 创建表空间时,dbf文件一般存放在datafile文件的存放文件夹下(通常是在实例名命名的文件夹以下) 能够通过 select * from v$datafile;查看全部数据文件 ...

  10. 1、Android自己的下拉刷新SwipeRefreshLayout

    <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/ ...