ホームページ >ウェブフロントエンド >H5 チュートリアル >ActionScript のような構文を使用して html5 を記述する - 最終記事
まず、LegendForHtml5Programming1.0 ライブラリとは何ですか?
ActionScript の構文を模倣した JavaScript ライブラリで、現時点では比較的機能が少なく、エンジンとは言えません。将来的にはエンジンとして使用でき、HTML5 開発者にサービスを提供する HTML5 用のオープンソース エンジンです。
第二に、LegendForHtml5Programming1.0ライブラリの構築プロセス
最終的なコードと構築プロセスの間にはいくつかの矛盾があるため、ソースコードが優先されます。
ActionScript のような構文を使用して一連の HTML5 記事を作成します
最初の記事には画像が表示されます
http://blog.csdn.net/lufy_legend/article/details/6753032
2 番目の記事はスプライトを使用してアニメーションを実装します
http : //blog.csdn.net/lufy_legend/article/details/6753032
3 番目の記事、マウス イベントとゲーム キャラクターの動き
http://blog.csdn.net/lufy_legend/article/details/6760812
4 番目の記事、継承簡単なRPG
http://blog.csdn.net/lufy_legend/article/details/6770713
パート5、グラフィック描画
http://blog.csdn.net/lufy_legend/article/details/6777784
パート5 6つの記事、TextField と入力ボックス
http://blog.csdn.net/lufy_legend/article/details/6782218
記事 7、カスタム ボタン
http://blog.csdn.net/lufy_legend/article/details/ 6798187
8 つ目記事、画像処理+パーティクルエフェクト
http://blog.csdn.net/lufy_legend/article/details/6798192
9回目の記事、URLLoaderを模倣してファイルを読み取る
http://blog.csdn.net/lufy_legend/article/詳細/6824136
LegendForHtml5Programming1.0 ライブラリを使用する 3 つの例
以下は、LegendForHtml5Programming1.0 を使用して開発された 2 つの単純な小さなゲームです。将来的には、いくつかのまともなゲームが開発される予定です。 . ゲームの参考にしてください。
1、テトリス
http://fsanguo.comoj.com/html5/jstoas10/index.html
2、宝くじ
http://fsanguo.comoj.com/html5/lottery_html5/index.html
個人的な感想、これライブラリは非常に使いやすく、特に上記のテトリスは、以前の AS コードを直接コピーして構文を少し変更したので、マウスを右クリックして直接実行できます。自分で説明するので、多くは言いません
4、LegendForHtml5Programming1.0 ライブラリの構文例
使用する前に、LegendForHtml5Programming1.0 ライブラリの legend.js ファイルを HTML に導入し、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、スプライトの使用
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 に自動的に変換します。タッチ イベントを自分で追加する必要はありません
4. コンストラクターで Base(this,LSprite,[]) を呼び出します。継承
3つのパラメータは、それ自体、継承される親クラス、親クラスのコンストラクタ
5、グラフィック描画
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]);
//文字显示 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);
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");