Heim > Web-Frontend > H5-Tutorial > Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 zu schreiben – den letzten Artikel

Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 zu schreiben – den letzten Artikel

黄舟
Freigeben: 2017-01-17 17:03:48
Original
1758 Leute haben es durchsucht

1. Was ist die LegendForHtml5Programming1.0-Bibliothek?
Es handelt sich um eine Javascript-Bibliothek, die für die Entwicklung von HTML5 verwendet wird und nicht als Engine bezeichnet werden kann Es besteht die Hoffnung, dass es in Zukunft als Open-Source-Engine für HTML5 verwendet werden kann, um Dienste für HTML5-Entwickler bereitzustellen.


Der Erstellungsprozess der LegendForHtml5Programming1.0-Bibliothek
Bitte beachten Sie die folgenden neun Artikel. Es wird einige Abweichungen zwischen dem endgültigen Code und dem Erstellungsprozess geben.
Verwenden Sie eine ActionScript-ähnliche Syntax, um eine Reihe von HTML5-Artikeln zu schreiben
Der erste Artikel zeigt ein Bild an
http://blog.csdn.net/lufy_legend/article/details/6753032
Der zweite Artikel: Verwenden Sie Sprite, um Animationen zu realisieren
http://blog.csdn.net/lufy_legend/article/details/6753032
Der dritte Artikel, Mausereignisse und Spielcharakterbewegungen
http://blog.csdn .net/lufy_legend/article/details/6760812
Der vierte Artikel, Vererbung und einfaches Rollenspiel
http://blog.csdn.net/lufy_legend/article/details/6770713
Der fünfte Artikel, Grafikzeichnung
http://blog.csdn.net/lufy_legend/article/details/6777784
Artikel 6, TextFeld und Eingabefeld
http://blog.csdn.net/lufy_legend/article/details/ 6782218
Der siebte Artikel, benutzerdefinierte Schaltfläche
http://blog.csdn.net/lufy_legend/article/details/6798187
Der achte Artikel, Bildverarbeitung + Partikeleffekt
http:// Blog. csdn.net/lufy_legend/article/details/6798192
Artikel 9, imitiert URLLoader zum Lesen von Dateien
http://blog.csdn.net/lufy_legend/article/details/6824136


3. Beispiele für die Verwendung der LegendForHtml5Programming1.0-Bibliothek
Die folgenden einfachen Spiele dienen nur zum Testen und werden in Zukunft als Referenz entwickelt.
1, Tetris
http://fsanguo.comoj.com/html5/jstoas10/index.html
2, Lotterie-Minispiel
http://fsanguo.comoj.com/html5/ lottery_html5 /index.html
Ich persönlich finde, dass diese Bibliothek sehr praktisch ist, insbesondere das obige Tetris. Ich habe den vorherigen AS-Code direkt kopiert und die Syntax leicht geändert, und sie kann direkt ausgeführt werden Quellcode des Spiels, Sie können ihn selbst lesen, indem Sie mit der rechten Maustaste klicken, daher werde ich nicht mehr sagen


Vier Syntaxbeispiele der LegendForHtml5Programming1.0-Bibliothek
Vor der Verwendung Bedarf Führen Sie die Datei legend.js der LegendForHtml5Programming1.0-Bibliothek in HTML ein, konfigurieren Sie dann den Speicherort Ihrer Bibliothek in legend.js


1 und zeigen Sie das Bild an

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;
Nach dem Login kopieren
2. Verwendung von Sprite

var backLayer = new LSprite();    
addChild(backLayer);   
//在sprite上加child  
backLayer.addChild(mapimg);
Nach dem Login kopieren
3. Ereignisse


//frame事件  
//backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)    
//鼠标事件  
//backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onframe)
Nach dem Login kopieren
Mausereignisse können MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE hinzufügen

Wenn Sie für iPhone, iPad oder entwickeln Android, dann konvertiert die Bibliothek MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE automatisch in TOUCH_START, TOUCH_END, TOUCH_MOVE. Es ist nicht erforderlich, selbst Touch-Ereignisse hinzuzufügen
4, erben
und rufen Sie base(this,LSprite,[] auf Konstruktor); Die Methode kann Vererbung realisieren
Die drei Parameter sind selbst, die zu vererbende übergeordnete Klasse, die Parameter des übergeordneten Klassenkonstruktors
5, Grafikzeichnung

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]);
Nach dem Login kopieren
6, Text- und Eingabefeld


//文字显示    
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);
Nach dem Login kopieren
7, Schaltfläche


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");
Nach dem Login kopieren
Das Obige ist der Inhalt der Verwendung einer ActionScript-ähnlichen Syntax zum Schreiben von HTML5 – der letzte Artikel. Für weitere verwandte Inhalte folgen Sie bitte der chinesischen PHP-Website (www.php.cn)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage