Home > Article > Web Front-end > Use ActionScript-like syntax to write html5 - the final article
1. What is the LegendForHtml5Programming1.0 library?
It is a javascript library that imitates the syntax of ActionScript and is used for the development of HTML5. Currently, it has relatively few functions and cannot be called an engine. It is hoped that it can be used as an open source engine for HTML5 in the future to provide services for HTML5 developers.
2. The construction process of LegendForHtml5Programming1.0 library
Please refer to the nine articles below. There will be some discrepancies between the final code and the construction process. The source code shall prevail.
Use ActionScript-like syntax to write a series of html5 articles
First article, display a picture
http://blog.csdn.net/lufy_legend/article/details/6753032
Second article , use Sprite to realize animation
http://blog.csdn.net/lufy_legend/article/details/6753032
The third article, mouse events and game character movement
http://blog.csdn. net/lufy_legend/article/details/6760812
The fourth article, inheritance and simple rpg
http://blog.csdn.net/lufy_legend/article/details/6770713
The fifth article, Graphics drawing
http://blog.csdn.net/lufy_legend/article/details/6777784
Article 6, TextField and input box
http://blog.csdn.net/lufy_legend/article/details/ 6782218
The seventh article, custom button
http://blog.csdn.net/lufy_legend/article/details/6798187
The eighth article, image processing + particle effect
http:// blog.csdn.net/lufy_legend/article/details/6798192
Article 9, imitating URLLoader to read files
http://blog.csdn.net/lufy_legend/article/details/6824136
3. Examples of using LegendForHtml5Programming1.0 library
The following are two simple games developed using LegendForHtml5Programming1.0. They are just for testing and are very simple. Several decent games will be developed for reference in the future. .
1, Tetris
http://fsanguo.comoj.com/html5/jstoas10/index.html
2, Lottery mini game
http://fsanguo.comoj.com/html5/ lottery_html5/index.html
Personally, I feel that this library is very convenient to use, especially the Tetris above. I directly copied the previous AS code and slightly modified the syntax, and it can be run directly.
Regarding the source code of the game, you can read it yourself by right-clicking the mouse, so I won’t say more.
Four, syntax examples of LegendForHtml5Programming1.0 library
Before use, you need to Introduce the legend.js file of LegendForHtml5Programming1.0 library in html, and then configure the location of your library in legend.js
1 and display the picture
var loader; function main(){ loader = new LLoader(); loader.addEventListener(LEvent.COMPLETE,loadBitmapdata); loader.load("10594855.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 usage
var backLayer = new LSprite(); addChild(backLayer); //在sprite上加child backLayer.addChild(mapimg);
3, event
//frame事件 //backLayer.addEventListener(LEvent.ENTER_FRAME, onframe) //鼠标事件 //backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onframe)
Mouse events can add MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE
If you are developing iphone, ipad or android, then this library The software will automatically convert MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE to TOUCH_START, TOUCH_END, TOUCH_MOVE. There is no need to add touch events yourself
4, inheritance
can be achieved by calling base(this,LSprite,[]); method in the constructor Inheritance
The three parameters are yourself, the parent class to be inherited, the parameters of the parent class constructor
5, Graphics drawing
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, text and input box
//文字显示 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);
7, Button
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");
The above is the content of writing html5 - the final article using ActionScript-like syntax. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!