用仿ActionScript的语法来编写html5

最近开始学习html5，因为一直都是研究as，所以还是觉得as顺眼一点，但是html5也不能不学，于是就想出了，可以把html5用as的语法来写出来，做游戏应该来的比较顺手一些，下面开始第一篇

第一篇，显示一张图片

一，代码对比

as代码：

1public var loader:Loader;

2public function loadimg():void{

3 loader = new Loader();

4 loader.contentLoaderInfo.addEventListener(https://www.360docs.net/doc/0217755028.html,PLETE,complete);

5 loader.load(new URLRequest("10594855.png"));

6}

7public function complete(event:Event):void{

8 var image:Bitmap = Bitmap(loader.content);

9 var bitmap:BitmapData = image.bitmapData;

10 addChild(image);

11}

复制代码

js代码:

12window.onload = function(){

13 var canvas = document.getElementById("myCanvas");

14 var context = canvas.getContext("2d");

15

16 image = new Image();

17 image.onload = function(){

18 context.drawImage(image, 0, 0, 240, 240);

19 };

20 image.src = "10594855.png";

21};

复制代码

二,编写js类库(暂命名为legend库)后的代码

22var loader;

23function main(){

24 loader = new LLoader();

25 loader.addEventListener(https://www.360docs.net/doc/0217755028.html,PLETE,loadBitmapdata);

26 loader.load("10594855.png","bitmapData");

27}

28function loadBitmapdata(event){

29 var bitmapdata = new LBitmapData(loader.content);

30 var bitmap = new LBitmap(bitmapdata);

31 addChild(bitmap);

32}

复制代码

三,实现

1,建一个静态类,方便保存及访问公共的方法属性,比如canvas等

33var LGlobal = function (){}

34LGlobal.type = "LGlobal";

复制代码

我们始终都用到canvas,所以要把canvas保存起来，给LGlobal类添加属性和方法35LGlobal.canvas = null;

36LGlobal.width = 0;

37LGlobal.height = 0;

38LGlobal.setCanvas = function (id,width,height){

39 var canvasObj = document.getElementById(id);

40 if(width)canvasObj.width = width;

41 if(height)canvasObj.height = height;

42 LGlobal.width = canvasObj.width;

43 LGlobal.height = canvasObj.height;

44 LGlobal.canvas = canvasObj.getContext("2d");

45}

复制代码

界面的显示，为了能够动态显示，选择不停的刷新canvas

给LGlobal类添加一个不停刷新的方法

46LGlobal.onShow = function (){

47 if(LGlobal.canvas == null)return;

48 LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);

49}

复制代码

然后，我预想把所有现实的对象等都保存在一个数组里面，然后按照顺序显示而所有可以显示的对象，都有一个show方法，用来把自己画到canvas上LGlobal类最后修改为

50var LGlobal = function (){}

51LGlobal.type = "LGlobal";

52LGlobal.canvas = null;

53LGlobal.width = 0;

54LGlobal.height = 0;

55LGlobal.childList = new Array();

56LGlobal.setCanvas = function (id,width,height){

57 var canvasObj = document.getElementById(id);

58 if(width)canvasObj.width = width;

59 if(height)canvasObj.height = height;

60 LGlobal.width = canvasObj.width;

61 LGlobal.height = canvasObj.height;

62 LGlobal.canvas = canvasObj.getContext("2d");

63}

64LGlobal.onShow = function (){

65 if(LGlobal.canvas == null)return;

66 LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);

67 LGlobal.show(LGlobal.childList);

68}

69LGlobal.show = function(showlist){

70 var key;

71 for(key in showlist){

72 if(showlist[key].show){

73 showlist[key].show();

74 }

75 }

76}

复制代码

2,as中，图片显示用到BitmapData和Bitmap两个类，为了实现这两个类的功能，我们分别创建两个类LBitmapData和LBitmap

先来看LBitmapData类，LBitmapData类用来储存图片的数据等，我们把Image()储存到LBitmapData类里面

77function LBitmapData(image,x,y,width,height){

78 var self = this;

79 self.type = "LBitmapData";

80 self.oncomplete = null;

81 if(image){

82 self.image = image;

83 self.x = (x==null?0:x);

84 self.y = (y==null?0:y);

85 self.width = (width==null?self.image.width:width);

86 self.height = (height==null?self.image.height:height);

87 }else{

88 self.x = 0;

89 self.y = 0;

90 self.width = 0;

91 self.height = 0;

92 self.image = new Image();

93 }

94}

复制代码

在看LBitmap类，LBitmap类用来显示LBitmapData类里储存的Image() 95function LBitmap(bitmapdata){

96 var self = this;

97 self.type = "LBitmap";

98 self.x = 0;

99 self.y = 0;

100 self.width = 0;

101 self.height = 0;

102 self.scaleX=1;

103 self.scaleY=1;

104 self.visible=true;

105 self.bitmapData = bitmapdata;

106 if(self.bitmapData){

107 self.width = self.bitmapData.width;

108 self.height = self.bitmapData.height;

109 }

110}

复制代码

关于Image()的显示，我们用到一开始说的show方法，实现如下

111LBitmap.prototype = {

112 show:function (){

113 var self = this;

114 if(!self.visible)return;

115 LGlobal.canvas.drawImage(self.bitmapData.image,

116

self.bitmapData.x,self.bitmapData.y,self.bitmapData.width,self.bitmapData.height, 117

self.x,self.y,self.width*self.scaleX,self.height*self.scaleY);

118 }

119}

复制代码

3，最后，还差一个Loader，我们建立自己的LLoader类

120function LLoader(){

121 var self = this;

122 self.loadtype = "";

123 self.content = null;

124 self.oncomplete = null;

125 self.event = {};

126}

127LLoader.prototype = {

128 addEventListener:function(type,listener){

129 var self = this;

130 if(type == https://www.360docs.net/doc/0217755028.html,PLETE){

131 self.oncomplete = listener;

132 }

133 },

134 load:function (src,loadtype){

135 var self = this;

136 self.loadtype = loadtype;

137 if(self.loadtype == "bitmapData"){

138 self.content = new Image();

139 self.content.onload = function(){

140 if(self.oncomplete){

141 self.event.currentTarget = self.content;

142 self.oncomplete(self.event);

143 }

144 }

145 self.content.src = src;

146 }

147 }

148}

复制代码

4，在3里面用到了LEvent类，LEvent类是一个事件类，用来加载事件，点击等，这个以后再慢慢强化

149var LEvent = function (){};

https://www.360docs.net/doc/0217755028.html,PLETE = "complete";

151LEvent.ENTER_FRAME = "enter_frame";

152

153

154LEvent.currentTarget = null;

155LEvent.addEventListener = function (node, type, fun){

156 if(node.addEventListener){

157 node.addEventListener(type, fun, false);

158 }else if(node.attachEvent){

159 node['e' + type + fun] = fun;

160 node[type + fun] = function(){node['e' + type + fun]();}

161 node.attachEvent('on' + type, node[type + fun]);

162 }

163}

复制代码

5，在显示之前，我们需要有个addChild方法，如下

164function addChild(DisplayObject){

165 LGlobal.childList.push(DisplayObject);

166}

复制代码

6，最后，在整个页面读取完成后，就可以把图片显示出来了

167function init(speed,canvasname,width,height,func){

168 LEvent.addEventListener(window,"load",function(){

169 setInterval(function(){LGlobal.onShow();}, speed);

170 LGlobal.setCanvas(canvasname,width,height);

171 func();

172 });

173}

174init(40,"back",300,300,main);

175var loader;

176function main(){

177 loader = new LLoader();

178 loader.addEventListener(https://www.360docs.net/doc/0217755028.html,PLETE,loadBitmapdata);

179 loader.load("10594855.png","bitmapData");

180}

181function loadBitmapdata(event){

182 var bitmapdata = new LBitmapData(loader.content);

183 var bitmap = new LBitmap(bitmapdata);

184 addChild(bitmap);

185}

复制代码

第一篇完成，下一篇，实现Sprite类

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

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

依然遵循上一篇对显示对象的处理的思路，添加LSprite类，并追加show方法，如下：1functionLSprite(){

2 var self = this;

3 self.type = "LSprite";

4 self.x = 0;

5 self.y = 0;

6 self.visible=true;

7 self.childList = new Array()

8}

9LSprite.prototype = {

10 show:function (cood){

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

12 var self = this;

13 if(!self.visible)return;

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

15 },

16 addChild:function (DisplayObject){

17 var self = this;

18 self.childList.push(DisplayObject);

19 }

20}

复制代码

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

这样一来，我们上一篇中显示图片的代码，也可以利用Sprite来显示了，代码如下：21function main(){

22 loader = new LLoader();

23 loader.addEventListener(https://www.360docs.net/doc/0217755028.html,PLETE,loadBitmapdata);

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

25}

26function loadBitmapdata(event){

27 var bitmapdata = new LBitmapData(loader.content);

28 var mapimg = new LBitmap(bitmapdata);

29

30 var backLayer = new LSprite();

31 addChild(backLayer);

32 backLayer.addChild(mapimg);

33}

复制代码

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

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

34function LSprite(){

35 var self = this;

36 self.type = "LSprite";

37 self.x = 0;

38 self.y = 0;

39 self.visible=true;

40 self.childList = new Array()

41 self.frameList = new Array();

42}

43LSprite.prototype = {

44 show:function (cood){

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

46 var self = this;

47 if(!self.visible)return;

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

49 self.loopframe();

50 },

51 loopframe:function (){

52 var self = this;

53 var key;

54 for(key in self.frameList){

55 self.frameList[key]();

56 }

57 },

58 addChild:function (DisplayObject){

59 var self = this;

60 self.childList.push(DisplayObject);

61 }

62}

复制代码

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

63addEventListener:function (type,listener){

64 var self = this;

65 if(type == LEvent.ENTER_FRAME){

66 self.frameList.push(listener);

67 }

68 },

69 removeEventListener:function (type,listener){

70 var self = this;

71 var i,length = self.frameList.length;

72 for(i=0;i

73 if(type == LEvent.ENTER_FRAME){

74 self.frameList.splice(i,1);

75 break;

76 }

77 }

78 }

复制代码

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

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

79LBitmapData.prototype = {

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

81 var self = this;

82 self.x = x;

83 self.y = y;

84 self.width = width;

85 self.height = height;

86 },

87 setCoordinate:function (x,y){

88 var self = this;

89 self.x = x;

90 self.y = y;

91 }

92 }

复制代码

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

93var list = new Array();

94var index = 0;

95var mapimg;

96var loader

97var imageArray;

98var animeIndex = 0;

99var dirindex = 0;

100var dirarr = new Array({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1});

101function main(){

102 loader = new LLoader();

103 loader.addEventListener(https://www.360docs.net/doc/0217755028.html,PLETE,loadBitmapdata);

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

105}

106function loadBitmapdata(event){

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

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

109 mapimg = new LBitmap(bitmapdata);

110 mapimg.x = 100;

111 mapimg.bitmapData.setCoordinate(0,0);

112 index = 0;

113 var backLayer = new LSprite();

114 addChild(backLayer);

115 backLayer.addChild(mapimg);

116 backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)

117}

118

119function onframe(){

120 index++;

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

122 index = 0;

123 }

124

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

125

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

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

128 if(animeIndex++ > 20){

129 dirindex++;

130 if(dirindex > 3)dirindex = 0;

131 animeIndex = 0;

132 }

133}

复制代码

效果看下面的url

https://www.360docs.net/doc/0217755028.html,/html5/jstoas01/index.html

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

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

第三篇，鼠标事件与游戏人物移动

一，假设

假设，所有可添加鼠标事件的对象，都有一个mouseEvent方法，添加的鼠标事件同过这个mouseEvent来调用。

这样的话，添加鼠标事件，其实只需要给canvas添加一个鼠标事件，然后循环LGlobal类里的childList，即循环所有的可视对象，如果被添加了鼠标事件，那么就调用它相应的方法。二，实现

1，给LGlobal类追加mouseEvent方法，然后修改LGlobal类的setCanvas，实现canvas的鼠标事件的添加与调用

1LGlobal.setCanvas = function (id,width,height){

2 LGlobal.canvasObj = document.getElementById(id);

3 if(width)LGlobal.canvasObj.width = width;

4 if(height)LGlobal.canvasObj.height = height;

5 LGlobal.width = LGlobal.canvasObj.width;

6 LGlobal.height = LGlobal.canvasObj.height;

7 LGlobal.canvas = LGlobal.canvasObj.getContext("2d");

8

9

LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_DOWN,function(event){

10 LGlobal.mouseEvent(event,LMouseEvent.MOUSE_DOWN);

11 });

12}

13LGlobal.mouseEvent = function(event,type){

14 var key;

15 for(key in LGlobal.childList){

16 if(LGlobal.childList[key].mouseEvent){

17 LGlobal.childList[key].mouseEvent(event,type);

18 }

19 }

20}

复制代码

2，给LSprite类添加mouseList数组，用来保存所添加的鼠标事件，然后添加mouseEvent 方法

mouseEvent方法中，我们需要做2个处理，

1)，判断自己是否添加了鼠标事件，如果没有添加，则循环它的childList

2)，如果添加了鼠标事件，判断自己是否被点击,LSprite虽说意义上是可视类，但是其实目前它本身是不可见的，可见的是它上面的Bitmap,准确点说，是这个Bitmap类中的BitmapData,更准确点说，是这个BitmapData中的Image，所以判断自己是否被点击，需要判断的是LSprite中的childList中的可视对象是否被点击，如果被点击，则调用相应的方法

21mouseEvent:function (event,type,cood){

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

23 var self = this;

24 if(self.mouseList.length == 0){

25 for(key in self.childList){

26 if(self.childList[key].mouseEvent){

27

self.childList[key].mouseEvent(event,type,{x:self.x+cood.x,y:self.y+cood.y});

28 }

29 }

30 return;

31 }

32 if(self.childList.length == 0)return;

33 var key;

34 var isclick = false;

35 for(key in self.childList){

36 isclick =

self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});

37 if(isclick)break;

38 }

39 if(isclick){

40 for(key in self.mouseList){

41 var obj = self.mouseList[key];

42 if(obj.type == type){

43 event.selfX = event.offsetX - (self.x+cood.x);

44 event.selfY = event.offsetY - (self.y+cood.y);

45 event.currentTarget = self;

46 obj.listener(event);

47 }

48 }

49 return;

50 }

51

52 },

53 ismouseon:function(event,cood){

54 var self = this;

55 var key;

56 var isclick = false;

57 for(key in self.childList){

58 isclick =

self.childList[key].ismouseon(event,{x:self.x+cood.x,y:self.y+cood.y});

59 if(isclick)break;

60 }

61 return isclick;

62 }

复制代码

ismouseon方法，用来判断自己是否被点击

LBitmap类中也需要判断是否自己被点击，所以添加ismouseon

63ismouseon:function(event,cood){

64 var self = this;

65 if(event.offsetX >= self.x + cood.x && event.offsetX <= self.x + cood.x

+ self.width &&

66 event.offsetY >= self.y + cood.y && event.offsetY <= self.y +

cood.y + self.height){

67 return true;

68 }else{

69 return false;

70 }

71 }

复制代码

添加鼠标事件的时候，模仿ActionScript的语法

72backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);

复制代码

下面，准备一张地图，一个人物行走图，用鼠标事件来控制人物的走动，73init(80,"back",800,480,main);

74

75var list = new Array();

76var index = 0;

77var backLayer;

78//地图

79var mapimg;

80//人物

81var playerimg;

82var loader

83var imageArray;

84var animeIndex = 0;

85var dirindex = 0;

86var dirarr = new Array({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1},{x:-1,y:1},{x:1,y:1},{x:-1,y:-1},{x:1,y: -1});

87var dirmark = {"0,1":0,"-1,0":1,"1,0":2,"0,-1":3,"-1,1":4,"1,1":5,"-1,-1":6,"1,-1":7};

88

89//移动目标

90var toX = 0;

91var toY = 0;

92function main(){

93

94 loader = new LLoader();

95 loader.addEventListener(https://www.360docs.net/doc/0217755028.html,PLETE,loadBitmapdata);

96 loader.load("back.jpg","bitmapData");

97}

98function loadBitmapdata(event){

99 var bitmapdata = new LBitmapData(loader.content);

100 mapimg = new LBitmap(bitmapdata);

101 loader = new LLoader();

102 loader.addEventListener(https://www.360docs.net/doc/0217755028.html,PLETE,loadOver);

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

104}

105function loadOver(event){

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

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

108 document.getElementById("inittxt").innerHTML="";

109 playerimg = new LBitmap(bitmapdata);

110 playerimg.bitmapData.setCoordinate(0,0);

111 index = 0;

112 backLayer = new LSprite();

113 addChild(backLayer);

114 backLayer.addChild(mapimg);

115 backLayer.addChild(playerimg);

116 backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)

117 backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);

118}

119

120function onframe(){

121 index++;

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

123 index = 0;

124 }

125 var markx = 0,marky = 0;

126 var l = 3;

127 if(playerimg.x > toX){

128 playerimg.x -= l;

129 markx = -1;

130 }else if(playerimg.x < toX){

131 playerimg.x += l;

132 markx = 1;

133 }

134 if(playerimg.y > toY){

135 playerimg.y -= l;

136 marky = -1;

137 }else if(playerimg.y < toY){

138 playerimg.y += l;

139 marky = 1;

140 }

141 if(markx !=0 || marky != 0){

142 var mark = markx+","+marky;

143 dirindex = dirmark[mark];

144 }

145

playerimg.bitmapData.setCoordinate(imageArray[dirindex][index].x,imageArray[dirindex][in dex].y);

146}

147function onmousedown(event){

148 toX = parseInt(event.selfX/3)*3;

149 toY = parseInt(event.selfY/3)*3;

150}

复制代码

看一下成果吧

https://www.360docs.net/doc/0217755028.html,/html5/jstoas02/index.html

第四篇，继承与简单的rpg

本文转自偶滴博客

https://www.360docs.net/doc/0217755028.html,/lufy_legend/article/details/6771962

这次用继承自LSprite的类来实现简单的rpg的demo

先看一下最后的代码与as的相似度

1var backLayer;

2//地图

3var mapimg;

4//人物

5var playerimg;

6var loader

7var imageArray;

8var loadIndex = 0;

9var imgData = new Array({name:"back.jpg",img:null},{name:"1.png",img:null},{name:"2.png",img:null});

10var chara;

11var charaList;

12

13functionmain(){

14 loadImage();

15}

16function loadImage(){

17 if(loadIndex >= imgData.length){

18 gameInit();

19 return;

20 }

21 loader = new LLoader();

22 loader.addEventListener(https://www.360docs.net/doc/0217755028.html,PLETE,loadComplete);

23 loader.load(imgData[loadIndex].name,"bitmapData");

24}

25function loadComplete(event){

26 imgData[loadIndex].img = loader.content;

27 loadIndex++;

28 loadImage();

29}

30function gameInit(event){

31 var bitmapdata;

32 bitmapdata = new LBitmapData(imgData[0].img);

33 mapimg = new LBitmap(bitmapdata);

34

35 document.getElementById("inittxt").innerHTML="";

36 backLayer = new LSprite();

37 addChild(backLayer);

38 backLayer.addChild(mapimg);

39

40 bitmapdata = new LBitmapData(imgData[1].img,0,0,70,92);

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

42 playerimg = new LBitmap(bitmapdata);

43 chara = new CharacterSprite(true,playerimg,imageArray,0,0);

44 backLayer.addChild(chara);

45

46 charaList = new Array();

47 for(var i=0;i<10;i++){

48 bitmapdata = new LBitmapData(imgData[2].img,0,0,80,91);

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

50 playerimg = new LBitmap(bitmapdata);

51 var npcx = parseInt(Math.random()*800/3)*3;

52 var npcy = parseInt(Math.random()*480/3)*3;

53 var npc = new CharacterSprite(false,playerimg,imageArray,npcx,npcy);

54 backLayer.addChild(npc);

55 charaList.push(npc);

56 }

57

58 backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)

59 backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);

60}

61

62function onframe(){

63 chara.onframe();

64

65 for(var i=0;i

66 charaList[i].onframe();

67 }

68}

69function onmousedown(event){

70 chara.toCoordinate.x = parseInt(event.selfX/3)*3;

71 chara.toCoordinate.y = parseInt(event.selfY/3)*3;

72}

复制代码

应该还算可以吧？

看一下成果吧

https://www.360docs.net/doc/0217755028.html,/html5/jstoas03/index.html

下面说一说如何继承，继承的话，js没有办法像as那样继承，

js的继承看下面

73function base(derive,baseSprite,baseArgs){

74 baseSprite.apply(derive,baseArgs);

75

76 for(prop in baseSprite.prototype){

77 var proto = derive.constructor.prototype;

78 if(!proto[prop]){

79 proto[prop] = baseSprite.prototype[prop];

80 }

81 }

82}

复制代码

三个参数分别是child,base,base构造器参数数组

这个方法可以实现js的完美继承

现在来建立一个继承自LSprite的类CharacterSprite

只需要在构造器里调用base(this,LSprite,[])就可以实现继承

而且CharacterSprite因为继承了LSprite的方法，所以它有addChild等方法CharacterSprite类代码如下

83function CharacterSprite(ishero,bitmap,imageArray,x,y){

84 base(this,LSprite,[]);

85 var self = this;