Utilisez une syntaxe de type ActionScript pour écrire du HTML5 - l'article final

1. Qu'est-ce que la bibliothèque LegendForHtml5Programming1.0 ?
C'est une bibliothèque javascript qui imite la syntaxe d'ActionScript et est utilisée pour le développement de html5. Elle implémente actuellement relativement peu de fonctions et ne peut pas être appelée moteur. On espère qu'il pourra être utilisé comme moteur open source pour HTML5 à l'avenir afin de fournir des services aux développeurs HTML5.


2. Le processus de construction de la bibliothèque LegendForHtml5Programming1.0
Veuillez vous référer aux neuf articles ci-dessous. Il y aura quelques divergences entre le code final et le processus de construction.
Utilisez la syntaxe de type ActionScript pour écrire une série d'articles HTML5
Le premier article, affiche une image
http://blog.csdn.net/lufy_legend/article/details/6753032
Le second article, utilisez Sprite pour réaliser une animation
http://blog.csdn.net/lufy_legend/article/details/6753032
Le troisième article, les événements de la souris et les mouvements des personnages du jeu
http://blog.csdn .net/lufy_legend/article/details/6760812
Le quatrième article, héritage et RPG simple
http://blog.csdn.net/lufy_legend/article/details/6770713
Le cinquième article, Dessin graphique
http://blog.csdn.net/lufy_legend/article/details/6777784
Article 6, TextField et zone de saisie
http://blog.csdn.net/lufy_legend/article/details/ 6782218
Le septième article, bouton personnalisé
http://blog.csdn.net/lufy_legend/article/details/6798187
Le huitième article, effet de particules de traitement d'image
http://blog .csdn .net/lufy_legend/article/details/6798192
Article 9, imitant URLLoader pour lire les fichiers
http://blog.csdn.net/lufy_legend/article/details/6824136


3. Exemples d'utilisation de la bibliothèque LegendForHtml5Programming1.0
Voici deux jeux simples développés à l'aide de LegendForHtml5Programming1.0. Ils sont uniquement destinés aux tests et sont très simples. Plusieurs jeux décents seront développés pour référence dans le futur.
1, Tetris
http://fsanguo.comoj.com/html5/jstoas10/index.html
2, mini-jeu de loterie
http://fsanguo.comoj.com/html5/ lottery_html5 /index.html
Personnellement, je pense que cette bibliothèque est très pratique à utiliser, surtout le Tetris ci-dessus. J'ai directement copié le code AS précédent et légèrement modifié la syntaxe, et elle peut être exécutée directement
Concernant le. code source du jeu, vous pouvez le lire vous-même en faisant un clic droit sur la souris, donc je n'en dirai pas plus


Quatre exemples de syntaxe de la bibliothèque LegendForHtml5Programming1.0
Avant utilisation, vous besoin Introduisez le fichier legend.js de la bibliothèque LegendForHtml5Programming1.0 en html, puis configurez l'emplacement de votre bibliothèque dans legend.js


1, et affichez l'image

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. Utilisation de Sprite

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

3. Événements

//frame事件  
//backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)    
//鼠标事件  
//backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onframe)

Les événements de souris peuvent ajouter MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE
Si vous développez pour iPhone, iPad. ou Android, la bibliothèque convertira automatiquement MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE en TOUCH_START, TOUCH_END, TOUCH_MOVE. Il n'est pas nécessaire d'ajouter des événements tactiles vous-même
4, d'hériter de
et d'appeler base(this,LSprite,[] in. le constructeur ); La méthode peut réaliser l'héritage
Les trois paramètres sont lui-même, la classe parent à hériter, les paramètres du constructeur de la classe parent
5, le dessin graphique

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. , texte et zone de saisie

//文字显示    
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, bouton

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

Ce qui précède est le contenu de l'utilisation d'une syntaxe de type ActionScript pour écrire du HTML5 - l'article final . Pour plus de contenu connexe, veuillez suivre le site Web PHP chinois (m.sbmmt.com) !