>  기사  >  웹 프론트엔드  >  ActionScript와 유사한 구문을 사용하여 html5 작성 - 마지막 기사

ActionScript와 유사한 구문을 사용하여 html5 작성 - 마지막 기사

黄舟
黄舟원래의
2017-01-17 17:03:481733검색

1. LegendForHtml5Programming1.0 라이브러리란 무엇인가요?
ActionScript의 문법을 모방한 자바스크립트 라이브러리로 현재 html5 개발에 사용되는 기능이 비교적 적어서 엔진이라고 할 수 없습니다. 향후 HTML5용 오픈소스 엔진으로 활용되어 HTML5 개발자들에게 서비스를 제공할 수 있기를 기대합니다.


2. LegendForHtml5Programming1.0 라이브러리의 생성 과정
아래 9개의 글을 참고하세요. 최종 코드와 생성 과정은 약간의 차이가 있습니다.
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
다섯 번째 기사, 그래픽 그리기
http://blog.csdn.net/lufy_legend/article/details/6777784
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/details/6824136


3. LegendForHtml5Programming1.0 라이브러리 사용 예
다음은 LegendForHtml5Programming1.0을 사용하여 개발된 두 가지 간단한 게임입니다. 이는 단지 테스트용이며 향후 참고할 수 있는 몇 가지 괜찮은 게임이 개발될 예정입니다.
1, 테트리스
http://fsanguo.comoj.com/html5/jstoas10/index.html
2, 복권 미니 게임
http://fsanguo.comoj.com/html5/lottery_html5 /index.html
개인적으로 이 라이브러리는 사용하기 매우 편리하다고 생각합니다. 특히 위의 Tetris는 이전 AS 코드를 직접 복사하고 구문을 약간 수정하여 바로 실행할 수 있습니다.
게임의 소스 코드는 마우스 오른쪽 버튼을 클릭하여 직접 읽을 수 있으므로 더 이상 설명하지 않겠습니다.


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, events

//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,[])를 호출하여 직접 터치 이벤트를 추가할 필요가 없습니다. 상속의 세 가지 매개 변수
는 자신, 상속할 부모 클래스, 부모 클래스 생성자의 매개 변수
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");

위는 html5 작성 내용입니다 - ActionScript 같은 문법을 사용한 최종 글입니다. 더 많은 관련 내용은 PHP 중국어를 참고해주세요. 홈페이지(www.php.cn)!


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.