用仿ActionScript的語法來編寫html5——終篇,LegendForHtml5Programming1.0開源庫件

一,LegendForHtml5Programming1.0庫件是什麼?
它是一個javascript庫,它模仿了ActionScript的語法,用於html5的開發,目前實現的功能相對較少,還不能稱之爲引擎,但願未來能夠做爲html5的開源引擎,爲html5開發者提供服務。


二,LegendForHtml5Programming1.0庫件的構建過程
請參照下面的九篇文章,最終代碼和構建過程會有些出入,以源碼爲準。
用仿ActionScript的語法來編寫html5系列文章
第一篇,顯示一張圖片
http://blog.csdn.net/lufy_legend/article/details/6753032
第二篇,利用Sprite來實現動畫
http://blog.csdn.net/lufy_legend/article/details/6753032
第三篇,鼠標事件與遊戲人物移動
http://blog.csdn.net/lufy_legend/article/details/6760812
第四篇,繼承與簡單的rpg
http://blog.csdn.net/lufy_legend/article/details/6770713
第五篇,Graphics繪圖
http://blog.csdn.net/lufy_legend/article/details/6777784
第六篇,TextField與輸入框
http://blog.csdn.net/lufy_legend/article/details/6782218
第七篇,自定義按鈕
http://blog.csdn.net/lufy_legend/article/details/6798187
第八篇,圖片處理+粒子效果
http://blog.csdn.net/lufy_legend/article/details/6798192
第九篇,仿URLLoader讀取文件
http://blog.csdn.net/lufy_legend/article/details/6824136


三,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中配置你的庫件所在的位置javascript

1,顯示圖片html

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的使用html5

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

3,事件java

//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事件
4,繼承
在構造器中調用base(this,LSprite,[]);方法既可實現繼承
三個參數分別是本身,要繼承的父類,父類構造器的參數
5,Graphics繪圖android

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,文字與輸入框api

//文字顯示  
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,按鈕iphone

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

歡迎你們使用以及提出意見等測試

相關文章
相關標籤/搜索