Write html5 with the syntax of the imitation of the ActionScript-the final article, LegendForHtml5Programming1.0 open-source

 

Write html5 with the syntax of the imitation of the ActionScript-the final article, LegendForHtml5Programming1.0 open-source Library

 

The text on this page allows modification and reuse under the CC-BY-SA 3.0 protocol and the GNU Free Documentation License.

 

 

 

End: LegendForHtml5Programming1.0 open-source Library

 

 

Warehouse

Http://code.google.com/p/legendforhtml5programming/downloads/list

 

 

I. What is the Library of LegendForHtml5Programming1.0?

It is a javascript library that imitates the ActionScript syntax and is used for html5 development. Currently, it has fewer functions and cannot be called an engine. It is expected to serve as an open-source html5 engine in the future, provides services for html5 developers.

 

 

Ii. LegendForHtml5Programming1.0 repository Construction Process

Refer to the following nine articles. The final code and build process may be somewhat different. The Source Code prevails.

Write html5 series articles using the syntax similar to ActionScript

 

 

Write html5 with the syntax of the imitation of the ActionScript-article 1,

Write html5 using the syntax similar to ActionScript -- Article 2: Use Sprite to implement animation

Compiling html5 using the syntax similar to ActionScript -- Article 3: mouse events and movement of game characters

Write html5 with the syntax of the imitation of ActionScript-Article 4: inheritance and simple rpg

Write html5 with the syntax of the imitation of ActionScript -- Article 5: Graphics plotting

Write html5 using the syntax similar to ActionScript-article 6, and use the syntax similar to ActionScript to write html5 for TextField and input box-Article 7, custom buttons use the syntax similar to the ActionScript to write html5-Article 8, image processing + particle effect use the syntax similar to the ActionScript to write html5-Article 9, copy URLLoader to read files

 

 

 

Iii. Examples of using the LegendForHtml5Programming1.0 Library

The following are two simple games developed using LegendForHtml5Programming1.0. They are just for experimentation and are very simple. In the future, we will develop several decent games for reference.

1, Tetris

Http://fsanguo.comoj.com/html5/jstoas10/index.html

2. Lottery Games

Http://fsanguo.comoj.com/html5/lottery_html5/index.html

I personally feel that this library is very convenient to use. In particular, in the Russian square above, I copied the previous AS Code directly and made some modifications to the syntax, you can run it directly.

Right-click the game source code and you will be able to read it by yourself.

 

 

4. Syntax example of the LegendForHtml5Programming1.0 Library

Before use, you need to introduce the LegendForHtml5Programming1.0 library legend. js file in html, and then configure the location of your library in legend. js.

 

 

1. Show Images

Www.2cto.com

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 );

}

// Resize the image

Bitmapdata = new LBitmapData (imglist ["chara"]);

ShowImg2 = new LBitmap (bitmapdata );

Showimg2.scalex= 0.2;

Showimg2.scale= 0.2;

// Image transparency

Bitmapdata = new LBitmapData (imglist ["chara"]);

ShowImg3 = new LBitmap (bitmapdata );

ShowImg3.alpha = 0.2;

// Rotate the image

Bitmapdata = new LBitmapData (imglist ["chara"]);

ShowImg4 = new LBitmap (bitmapdata );

ShowImg4.rotate = 50;

 

2. Use of Sprite

Www.2cto.com

Var backLayer = new LSprite ();

AddChild (backLayer );

// Add child to sprite

BackLayer. addChild (mapimg );

 

3. Events

Www.2cto.com

// Frame event

// BackLayer. addEventListener (LEvent. ENTER_FRAME, onframe)

// Mouse event

// BackLayer. addEventListener (LMouseEvent. MOUSE_DOWN, onframe)

 

You can add MOUSE_DOWN, MOUSE_UP, and MOUSE_MOVE to mouse events.

If you are developing an iphone, ipad, or android, the library automatically converts MOUSE_DOWN, MOUSE_UP, and MOUSE_MOVE to TOUCH_START, TOUCH_END, and TOUCH_MOVE. You do not need to add touch events by yourself.

4. Inheritance

Call base (this, LSprite, []) in the constructor; methods can be inherited

The three parameters are respectively the parent class to be inherited and the parameters of the parent class constructor.

5. Graphics plotting

Www.2cto.com

BackLayer = new LSprite ();

AddChild (backLayer );

// Draw a circle

BackLayer. graphics. drawRect (1, "black", [20, 20,150, 20], true, "# cccccc ");

// Draw a rectangle

BackLayer. graphics. drawArc (2, "black", [100,100, 50, * Math. PI, false], true, "# FF0000 ");

// Draw a line

BackLayer. graphics. drawLine (2, "# FF0000", [200, 20,100, 50]);

 

6. Text and input boxes

Www.2cto.com

// Text display

Var txt = new LTextField ();

. Txt. x = 100;

Txt. text = "TextField test ";

AddChild (txt );

// Input box

Var txt1 = new LTextField ();

Txt1.x = 100;

Txt1.y = 50;

Txt1.setType (LTextFieldType. INPUT );

AddChild (txt1 );

 

7. Buttons

Www.2cto.com

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 ");

}

 

Welcome to use and provide comments.

 

 

From lufy hut