用仿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中配置你的庫件所在的位置
1,顯示圖片
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的使用
var backLayer = new LSprite(); addChild(backLayer); //在sprite上加child backLayer.addChild(mapimg);3,事件
//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繪圖
6,文字與輸入框
//文字顯示 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,按鈕
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"); }歡迎大家使用以及提出意見等
總結
以上是生活随笔為你收集整理的用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: npm执行命令后无任何响应(window
- 下一篇: GDUFE ACM-1045