DIV CSS 佈局教程網

庫件下載地址
http://legendforHtml5programming.googlecode.com/files/LegendForHtml5Programming1.0.rar

一,LegendForHtml5Programming1.0庫件是什麼?
它是一個Javascript庫，它模仿了ActionScript的語法，用於Html5的開發，目前實現的功能相對較少，還不能稱之為引擎，希望將來可以作為Html5的開源引擎，為Html5開發者提供服務。

二，LegendForHtml5Programming1.0庫件的構建過程
請參照下面的九篇文章，最終代碼和構建過程會有些出入，以源碼為准。

三，LegendForHtml5Programming1.0庫件的使用舉例
下面是使用LegendForHtml5Programming1.0開發的兩個簡陋的小游戲，只是為了試驗，非常簡陋，以後會開發幾個像樣的游戲來做參照。
1，俄羅斯方塊
http://fsanguo.comoj.com/Html5/JStoas10/index.Html
2，抽獎小游戲
http://fsanguo.comoj.com/html5/lottery_Html5/index.Html
個人感覺，該庫件使用起來還是很方便的，尤其上面的俄羅斯方塊，我是直接把以前的AS代碼復制過來，在語法上稍加修改，竟然直接可以運行了
關於游戲的源碼,大家點擊鼠標右鍵就可以自己看了，我就不多說了

四，LegendForHtml5Programming1.0庫件的語法舉例
使用前，需要在html中引進LegendForHtml5Programming1.0庫件的legend.JS文件，然後在legend.JS中配置你的庫件所在的位置

1，顯示圖片

JavaScript Code復制內容到剪貼板

1. var loader;    
2. function main(){    
3.     loader = new LLoader();    
4.     loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);    
5.     loader.load("10594855.png","bitmapData");    
6. }    
7. function loadBitmapdata(event){    
8.     var bitmapdata = new LBitmapData(loader.content);    
9.     var bitmap = new LBitmap(bitmapdata);    
10.     addChild(bitmap);    
11. }    
12. //圖片的縮放  
13. bitmapdata = new LBitmapData(imglist["chara"]);  
14. showImg2 = new LBitmap(bitmapdata);  
15. showImg2.scaleX = 0.2;  
16. showImg2.scaleY = 0.2;  
17. //圖片的透明度  
18. bitmapdata = new LBitmapData(imglist["chara"]);  
19. showImg3 = new LBitmap(bitmapdata);  
20. showImg3.alpha = 0.2;  
21. //圖片的旋轉  
22. bitmapdata = new LBitmapData(imglist["chara"]);  
23. showImg4 = new LBitmap(bitmapdata);  
24. showImg4.rotate = 50;  

2，Sprite的使用
  JavaScript Code復制內容到剪貼板

1. var backLayer = new LSprite();    
2. addChild(backLayer);   
3. //在sprite上加child  
4. backLayer.addChild(mapimg);    

3，事件   JavaScript Code復制內容到剪貼板

1. //frame事件  
2. //backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)    
3. //鼠標事件  
4. //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事件

4，繼承
在構造器中調用base(this,LSprite,[]);方法既可實現繼承
三個參數分別是自己,要繼承的父類,父類構造器的參數

5，Graphics繪圖

JavaScript Code復制內容到剪貼板

1. backLayer = new LSprite();    
2. addChild(backLayer);    
3. //畫一圓    
4. backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");    
5. //畫一個矩形    
6. backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");    
7. //畫一條線    
8. backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);  

6，文字與輸入框   JavaScript Code復制內容到剪貼板

1. //文字顯示    
2. var txt = new LTextFIEld();    
3. txt.x = 100;    
4. txt.text = "TextFIEld 測試";    
5. addChild(txt);    
6. //輸入框    
7. var txt1 = new LTextFIEld();    
8. txt1.x = 100;    
9. txt1.y = 50;    
10. txt1.setType(LTextFIEldType.INPUT);    
11. addChild(txt1);    

7，按鈕   JavaScript Code復制內容到剪貼板

1. function gameInit(event){    
2.     backLayer = new LSprite();    
3.     addChild(backLayer);    
4.         
5.     btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"])));    
6.     btn01.x = 76;    
7.     btn01.y = 50;    
8.     backLayer.addChild(btn01);    
9.         
10.     btn02 = new LButton(new LBitmap(new LBitmapData(imglist["quit_button_up"])),new LBitmap(new LBitmapData(imglist["quit_button_over"])));    
11.     btn02.x = 76;    
12.     btn02.y = 100;    
13.     backLayer.addChild(btn02);    
14.         
15.     btn01.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown01);    
16.     btn02.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown02);    
17. }    
18. function onmousedown01(event){    
19.     alert("btn01 on click");    
20. }    
21. function onmousedown02(event){    
22.     alert("btn02 on click");    
23. }    

歡迎大家使用以及提出意見等