用仿ActionScript的语法来编写html5_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
用仿ActionScript的语法来编写html5
上传于||暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩37页未读，继续阅读
你可能喜欢我是软工专业，目前大二，没有确切的目标。
我觉得还是有帮助的。AS和JS语法上相似度很高，尤其是未来的JS支持ES6之后。用脚本语言做游戏的思路其实很相似，会AS做游戏，在某些库的帮助下（比如说Egret，lufylegend），很多功能也能用JS（TS）去做。
学习Flash对于学习HTML5来说没有直接的帮助。不过注意一点，各种平台的不同主要是在API和工具上。而开发不仅仅是API而已。比如算法、交互设计、3D建模等，无论你用何种语言，在何种平台下开发，都是共通的。所以你要注重的是这个培训是工具和API的使用为主，还是会教你那些共通的东西。
学习Flash对于学习HTML5来说没有直接的帮助。不过注意一点，各种平台的不同主要是在API和工具上。而开发不仅仅是API而已。比如算法、交互设计、3D建模等，无论你用何种语言，在何种平台下开发，都是共通的。所以你要注重的是这个培训是工具和API的使用为主…
现在讨论的所谓Html5——核心是JS，html5本身内容很少的。PC端浏览器兼容性有限，实现3D相关需要canvas、css3，在中国IE6占比势必会慢慢下降，但未来很长时间内IE8还会是主流，不支持。所以需要前端展示立体动态时还是只能靠Flash。所以html5会因为手机浏览器的htm5兼容性较高而逐步向移动端扩张，pc端as还会继续保留自己的一席之地。
现在讨论的所谓Html5——核心是JS，html5本身内容很少的。PC端浏览器兼容性有限，实现3D相关需要canvas、css3，在中国IE6占比势必会慢慢下降，但未来很长时间内IE8还会是主流，不支持。所以需要前端展示立体动态时还是只能靠Flash。所以html5会因为手机浏览…
已有帐号？
无法登录？
社交帐号登录
不会卖萌的程序员不是好程序员查看: 7268|回复: 2
用仿ActionScript的语法来编写html5（一）
该用户从未签到
库件下载地址
LegendForHtml5Programming1.0库件是什么?
它是一个javascript库，它模仿了ActionScript的语法，用于html5的开发，目前实现的功能相对较少，还不能称之为引擎，希望将来可以作为html5的开源引擎，为html5开发者提供服务。
LegendForHtml5Programming1.0库件的构建过程
最终代码和构建过程会有些出入，以源码为准。
用仿ActionScript的语法来编写html5系列文章（共九篇）
第一篇，显示一张图片
一、代码对比
as代码：
public var loader:L
public function loadimg():void{
& & & & loader = new Loader();
& & & & loader.contentLoaderInfo.PLETE,complete);
& & & & loader.load(new URLRequest(&.png&));
}
public function complete(event:Event):void{
& & & & var image:Bitmap = Bitmap(loader.content);
& & & & var bitmap:BitmapData = image.bitmapD
& & & & addChild(image);
}复制代码
js代码：
window.onload = function(){&&
& & var canvas = document.getElementById(&myCanvas&);&&
& & var context = canvas.getContext(&2d&);&&
& &
& & image = new Image();&&
& & image.onload = function(){&&
& && &&&context.drawImage(image, 0, 0, 240, 240);&&
& & };&&
& & image.src = &.png&;
};复制代码
二、编写js类库（暂命名为legend库）后的代码
function main(){
& & & & loader = new LLoader();
& & & & loader.PLETE,loadBitmapdata);
& & & & loader.load(&.png&,&bitmapData&);
}
function loadBitmapdata(event){
& & & & var bitmapdata = new LBitmapData(loader.content);
& & & & var bitmap = new LBitmap(bitmapdata);
& & & & addChild(bitmap);
}复制代码
1、建一个静态类，方便保存及访问公共的方法属性，比如canvas等
var LGlobal = function (){}
LGlobal.type = &LGlobal&;复制代码
我们始终都用到canvas,所以要把canvas保存起来，给LGlobal类添加属性和方法
LGlobal.canvas =
LGlobal.width = 0;
LGlobal.height = 0;
LGlobal.setCanvas = function (id,width,height){
& & & & var canvasObj = document.getElementById(id);
& & & & if(width)canvasObj.width =
& & & & if(height)canvasObj.height =
& & & & LGlobal.width = canvasObj.
& & & & LGlobal.height = canvasObj.
& & & & LGlobal.canvas = canvasObj.getContext(&2d&);
} 复制代码
界面的显示，为了能够动态显示，选择不停的刷新canvas
给LGlobal类添加一个不停刷新的方法
LGlobal.onShow = function (){
& & & & if(LGlobal.canvas == null)
& & & & LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);
}复制代码
然后，我预想把所有现实的对象等都保存在一个数组里面，然后按照顺序显示
而所有可以显示的对象，都有一个show方法，用来把自己画到canvas上
LGlobal类最后修改为
var LGlobal = function (){}
LGlobal.type = &LGlobal&;
LGlobal.canvas =
LGlobal.width = 0;
LGlobal.height = 0;
LGlobal.childList = new Array();
LGlobal.setCanvas = function (id,width,height){
& & & & var canvasObj = document.getElementById(id);
& & & & if(width)canvasObj.width =
& & & & if(height)canvasObj.height =
& & & & LGlobal.width = canvasObj.
& & & & LGlobal.height = canvasObj.
& & & & LGlobal.canvas = canvasObj.getContext(&2d&);
}
LGlobal.onShow = function (){
& & & & if(LGlobal.canvas == null)
& & & & LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);
& & & & LGlobal.show(LGlobal.childList);
}
LGlobal.show = function(showlist){
& & & &
& & & & for(key in showlist){
& & & & & & & & if(showlist[key].show){
& & & & & & & & & & & & showlist[key].show();
& & & & & & & & }
& & & & }
}复制代码
2、as中，图片显示用到BitmapData和Bitmap两个类，为了实现这两个类的功能，我们分别创建两个类LBitmapData和LBitmap
先来看LBitmapData类，LBitmapData类用来储存图片的数据等，我们把Image()储存到LBitmapData类里面
function LBitmapData(image,x,y,width,height){
& & & & var self =
& & & & self.type = &LBitmapData&;
& & & & self.oncomplete =
& & & & if(image){
& & & & & & & & self.image =
& & & & & & & & self.x = (x==null?0:x);&&
& & & & & & & & self.y = (y==null?0:y);&&
& & & & & & & & self.width = (width==null?self.image.width:width);&&
& & & & & & & & self.height = (height==null?self.image.height:height);
& & & & }else{
& & & & & & & & self.x = 0;&&
& & & & & & & & self.y = 0;&&
& & & & & & & & self.width = 0;&&
& & & & & & & & self.height = 0;
& & & & & & & & self.image = new Image();
& & & & }
}复制代码
在看LBitmap类，LBitmap类用来显示LBitmapData类里储存的Image()
function LBitmap(bitmapdata){
& & & & var self =
& & & & self.type = &LBitmap&;
& & & & self.x = 0;&&
& & & & self.y = 0;&&
& & & & self.width = 0;&&
& & & & self.height = 0;&&
& & & & self.scaleX=1;
& & & & self.scaleY=1;
& & & & self.visible=
& & & & self.bitmapData =
& & & & if(self.bitmapData){
& & & & & & & & self.width = self.bitmapData.
& & & & & & & & self.height = self.bitmapData.
& & & & }
}复制代码
关于Image()的显示，我们用到一开始说的show方法，实现如下
LBitmap.prototype = {
& & & & show:function (){
& & & & & & & & var self =
& & & & & & & & if(!self.visible)
& & & & & & & & LGlobal.canvas.drawImage(self.bitmapData.image,
& & & & & & & & & & & & & & & & self.bitmapData.x,self.bitmapData.y,self.bitmapData.width,self.bitmapData.height,
& & & & & & & & & & & & & & & & self.x,self.y,self.width*self.scaleX,self.height*self.scaleY);
& & & & }
}复制代码
3、最后，还差一个Loader，我们建立自己的LLoader类
function LLoader(){
& & & & var self =
& & & & self.loadtype = &&;
& & & & self.content =
& & & & self.oncomplete =
& & & & self.event = {};
}
LLoader.prototype = {
& & & & addEventListener:function(type,listener){
& & & & & & & & var self =
& & & & & & & & if(type == PLETE){
& & & & & & & & & & & & self.oncomplete =
& & & & & & & & }
& & & & },
& & & & load:function (src,loadtype){
& & & & & & & & var self =
& & & & & & & & self.loadtype =
& & & & & & & & if(self.loadtype == &bitmapData&){
& & & & & & & & & & & & self.content = new Image();
& & & & & & & & & & & & self.content.onload = function(){
& & & & & & & & & & & & & & & & if(self.oncomplete){
& & & & & & & & & & & & & & & & & & & & self.event.currentTarget = self.
& & & & & & & & & & & & & & & & & & & & self.oncomplete(self.event);
& & & & & & & & & & & & & & & & }
& & & & & & & & & & & & }
& & & & & & & & & & & & self.content.src =
& & & & & & & & }
& & & & }
}复制代码
4、在3里面用到了LEvent类，LEvent类是一个事件类，用来加载事件，点击等，这个以后再慢慢强化
var LEvent = function (){};
<PLETE = &complete&;
LEvent.ENTER_FRAME = &enter_frame&;
LEvent.currentTarget =
LEvent.addEventListener = function (node, type, fun){
& & & & if(node.addEventListener){
& & & & & & & & node.addEventListener(type, fun, false);
& & & & }else if(node.attachEvent){
& & & & & & & & node['e' + type + fun] =
& & & & & & & & node[type + fun] = function(){node['e' + type + fun]();}
& & & & & & & & node.attachEvent('on' + type, node[type + fun]);
& & & & }
}复制代码
5、在显示之前，我们需要有个addChild方法，如下
function addChild(DisplayObject){
& & & & LGlobal.childList.push(DisplayObject);
}复制代码
6、最后，在整个页面读取完成后，就可以把图片显示出来了
function init(speed,canvasname,width,height,func){
& & & & LEvent.addEventListener(window,&load&,function(){
& & & & & & & & setInterval(function(){LGlobal.onShow();}, speed);
& & & & & & & & LGlobal.setCanvas(canvasname,width,height);
& & & & & & & & func();
& & & & });
}
init(40,&back&,300,300,main);
function main(){
& & & & loader = new LLoader();
& & & & loader.PLETE,loadBitmapdata);
& & & & loader.load(&.png&,&bitmapData&);
}
function loadBitmapdata(event){
& & & & var bitmapdata = new LBitmapData(loader.content);
& & & & var bitmap = new LBitmap(bitmapdata);
& & & & addChild(bitmap);
}复制代码
第一篇完成，敬请期待第二篇文章
该用户从未签到
感谢楼主分享！
该用户从未签到
Powered by用仿ActionScript的语法来编写html5——终篇，LegendForHtml5Programming1.0开源库件-android100学习网
用仿ActionScript的语法来编写html5——终篇，LegendForHtml5Programming1.0开源库件
用仿ActionScript的语法来编写html5——终篇，LegendForHtml5Programming1.0开源库件
本页面的文字允许在CC-BY-SA 3.0
用仿ActionScript的语法来编写html5——终篇，LegendForHtml5Programming1.0开源库件
本页面的文字允许在CC-BY-SA 3.0协议和GNU自由文档许可证下修改和再使用。
终篇，LegendForHtml5Programming1.0开源库件
库件下载地址
/p/legendforhtml5programming/downloads/list
一,LegendForHtml5Programming1.0库件是什么?
它是一个javascript库，它模仿了ActionScript的语法，用于html5的开发，目前实现的功能相对较少，还不能称之为引擎，希望将来可以作为html5的开源引擎，为html5开发者提供服务。
二，LegendForHtml5Programming1.0库件的构建过程
请参照下面的九篇文章，最终代码和构建过程会有些出入，以源码为准。
用仿ActionScript的语法来编写html5系列文章
用仿ActionScript的语法来编写html5——第一篇，
用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画
用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动
用仿ActionScript的语法来编写html5——第四篇，继承与简单的rpg
用仿ActionScript的语法来编写html5——第五篇，Graphics绘图
用仿ActionScript的语法来编写html5——第六篇，TextField与输入框
用仿ActionScript的语法来编写html5——第七篇，自定义按钮
用仿ActionScript的语法来编写html5——第八篇，图片处理+粒子效果
用仿ActionScript的语法来编写html5——第九篇，仿URLLoader读取文件
三，LegendForHtml5Programming1.0库件的使用举例
下面是使用LegendForHtml5Programming1.0开发的两个简陋的小游戏，只是为了试验，非常简陋，以后会开发几个像样的游戏来做参照。
1，俄罗斯方块
oj.com/html5/jstoas10/index.html
2，抽奖小游戏
oj.com/html5/lottery_html5/index.html
个人感觉，该库件使用起来还是很方便的，尤其上面的俄罗斯方块，我是直接把以前的AS代码复制过来，在语法上稍加修改，竟然直接可以运行了
关于游戏的源码,大家点击鼠标右键就可以自己看了，我就不多说了
四，LegendForHtml5Programming1.0库件的语法举例
使用前，需要在html中引进LegendForHtml5Programming1.0库件的legend.js文件，然后在legend.js中配置你的库件所在的位置
1，显示图片
function main(){&&&
&&& loader = new LLoader();&&&
&&& loader.PLETE,loadBitmapdata);&&&
&&& loader.load(".png","bitmapData");&&&
function loadBitmapdata(event){&&&
&&& var bitmapdata = new LBitmapData(loader.content);&&&
&&& var bitmap = new LBitmap(bitmapdata);&&&
&&& addChild(bitmap);&&&
//图片的缩放&
bitmapdata = new LBitmapData(imglist["chara"]);&
showImg2 = new LBitmap(bitmapdata);&
showImg2.scaleX = 0.2;&
showImg2.scaleY = 0.2;&
//图片的透明度&
bitmapdata = new LBitmapData(imglist["chara"]);&
showImg3 = new LBitmap(bitmapdata);&
showImg3.alpha = 0.2;&
//图片的旋转&
bitmapdata = new LBitmapData(imglist["chara"]);&
showImg4 = new LBitmap(bitmapdata);&
showImg4.rotate = 50;&
2，Sprite的使用
var backLayer = new LSprite();&&&
addChild(backLayer);&&
//在sprite上加child&
backLayer.addChild(mapimg);&&&
//frame事件&
//backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)&&&
//鼠标事件&
//backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onframe)&&&
鼠标事件可以添加MOUSE_DOWN，MOUSE_UP，MOUSE_MOVE
如果你开发的是iphone,ipad或者android，那么该库件会自动将MOUSE_DOWN，MOUSE_UP，MOUSE_MOVE转换为TOUCH_START，TOUCH_END，TOUCH_MOVE，无需自己添加touch事件
在构造器中调用base(this,LSprite,[]);方法既可实现继承
三个参数分别是自己,要继承的父类,父类构造器的参数
5，Graphics绘图
backLayer = new LSprite();&&&
addChild(backLayer);&&&
//画一圆&&&
backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");&&&
//画一个矩形&&&
backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");&&&
//画一条线&&&
backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);&&&
6，文字与输入框
//文字显示&&&
var txt = new LTextField();&&&
txt.x = 100;&&&
txt.text = "TextField 测试";&&&
addChild(txt);&&&
//输入框&&&
var txt1 = new LTextField();&&&
txt1.x = 100;&&&
txt1.y = 50;&&&
txt1.setType(LTextFieldType.INPUT);&&&
addChild(txt1);&&&
function gameInit(event){&&&
&&& backLayer = new LSprite();&&&
&&& addChild(backLayer);&&&
&&& btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"])));&&&
&&& btn01.x = 76;&&&
&&& btn01.y = 50;&&&
&&& backLayer.addChild(btn01);&&&
&&& btn02 = new LButton(new LBitmap(new LBitmapData(imglist["quit_button_up"])),new LBitmap(new LBitmapData(imglist["quit_button_over"])));&&&
&&& btn02.x = 76;&&&
&&& btn02.y = 100;&&&
&&& backLayer.addChild(btn02);&&&
&&& btn01.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown01);&&&
&&& btn02.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown02);&&&
function onmousedown01(event){&&&
&&& alert("btn01 on click");&&&
function onmousedown02(event){&&&
&&& alert("btn02 on click");&&&
欢迎大家使用以及提出意见等
摘自 lufy小屋