ActionScript のような構文を使用して html5 を記述する - 最終記事-H5 チュートリアル-php.cn

ActionScript のような構文を使用して html5 を記述する - 最終記事

黄舟

リリース： 2017-01-17 17:03:48

オリジナル

1731 人が閲覧しました

まず、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]);

ログイン後にコピー

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 の記述の最後の部分です。その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。