HTML5는 iPhone 부팅 인터페이스 샘플 code_html5 튜토리얼 기술을 구현합니다.

오늘 갑자기 아이디어가 떠올랐고 Html5를 사용하면 Apple 운영체제를 모방하여 웹 플랫폼에서 실행될 수 있는 iOS를 만들 수 있겠다는 생각이 들었습니다. 물론 운영체제를 개발하고 다시 산으로 돌아가 백년을 더 연습할 때까지 기다려야 합니다. 오늘은 재미있게 놀면서 먼저 시작 인터페이스를 만들어 보겠습니다. 완성된 사진 : 제가 포토샵한 사진이라 걱정되는 학생들은 다음 주소로 직접 가서 테스트 하시면 됩니다. http://www.cnblogs.com /yorhom/articles /3163078.html lufylegend가 정말 잘 패키징되어 있기 때문에 이 개발은 여전히 이 엔진을 사용하여 이루어지고 있습니다. 코드가 많지 않으므로 관심 있는 친구들이 직접 살펴볼 수 있습니다. index.html의 코드:

코드 복사 코드는 다음과 같습니다. ; /script> 로드 중... >

Main.js의 코드:

코드 복사 코드는 다음과 같습니다. init(50,"mylegend",450,640,main) LGlobal.setDebug(true); var loadData = [ {path : "./js/Shape.js",type:"js"}, {경로:"./js/BootPage.js",type:"js"}, {이름:"wallpaper" , 경로:"./images/wall_paper.jpg"} ]; var datalist = {}; var backLayer,iphoneLayer,buttonLayer var iosShape; ; function main(){ LLoadManage.load(loadData,null,gameInit) } function gameInit(result){ datalist = result //초기화 레이어 initLayer() //iPhone 쉘 추가 addShape() //시작 인터페이스 추가 addBack() function initLayer(); 🎜 >//배경 레이어 backLayer = new LSprite(); addChild(backLayer); } function addShape(){ iosShape = new Shape("IPHONE",400,600) ; iosShape.x = 15; iosShape.y = 5; backLayer.addChild(iosShape) } function addBack(){ bootPage() ; bootPage.x = 40; bootPage.y = 40; var wallPaperWidth = iosShape.getScreenWidth() var wallPaperHeight = iosShape.getScreenHeight(); new LBitmapData(datalist["wallpaper"],200,480,wallPaperWidth,wallPaperHeight)); bootPage.addTime() bootPage.addSlider() iosShape.addChild(bootPage);

Shape.js의 코드:

코드 복사

코드는 다음과 같습니다. 다음:

/* * Shape.js **/ function Shape(type,width,height){ var s = this; base(s,LSprite ,[]); s.y = 0; s.deviceWidth = 너비; s.type = 유형 ; / /쉘 레이어 s.shapeLayer = new LSprite(); s.addChild(s.shapeLayer) //홈 버튼 레이어 s.homeButtonLayer = new LSprite( ); s.addChild(s.homeButtonLayer); //화면 레이어 s.screenLayer = new LSprite() s.addChild(s.screenLayer)// 자체 표시 s._showSelf(); } Shape.prototype._showSelf = function(){ var s = this switch(s.type){ case; "IPHONE": //쉘 그리기 var Shadow = new LDropShadowFilter(15,45,"black",20) s.shapeLayer.graphics.drawRoundRect(10,"black",[ 0,0,s.deviceWidth,s.deviceHeight,15],true,"black"); s.shapeLayer.filters = [shadow] //화면 그리기 graphic.drawRect(0," black",[s.deviceWidth/10,s.deviceWidth/10,s.deviceWidth*0.8,s.deviceHeight*0.8],true,"white") //그립니다. 홈 버튼 s.homeButtonLayer .graphics.drawArc(1,"black",[s.deviceWidth/2,s.deviceHeight*0.87 s.deviceWidth/10,s.deviceWidth/16,0,2*Math.PI ],true,"#191818" ); s.homeButtonLayer.graphics.drawRoundRect(3,"white",[s.deviceWidth/2-10,s.deviceHeight*0.87 s.deviceWidth/10 - 10,20 ,20,5]); break; } }; Shape.prototype.getScreenWidth = function(){ var s = this; 0.8; }; Shape.prototype.getScreenHeight = function(){ var s = this; return s.deviceHeight*0.8

마지막은 BootPage.js의 코드입니다.

코드 복사 코드는 다음과 같습니다. /* * BootPage.js **/ function BootPage(){ var s = this; ); s.y = 0; s.timeLayer = new LSprite(); s.sliderLayer = } BootPage.prototype .addWallPaper = function( bitmapdata){ var s = this; //배경 이미지 추가 s.wallPaper = new LBitmap(bitmapdata) s.addChild(s.wallPaper); 🎜>}; BootPage.prototype.addTime = function(){ var s = this; var Shadow = new LDropShadowFilter(1,1,"black",8); addChild(s.timeLayer ); s.timeLayer.graphics.drawRect(0,"",[0,0,iosShape.getScreenWidth(),150],true,"black"); 시간 텍스트 영역 s.timeLayer.alpha = 0.3; s.timeText = new LTextField() s.timeText.x = 70; >s.timeText.size = 50; s.timeText.color = "white"; s.timeText.weight = "bold"; >//날짜 텍스트 영역 결합 s.dateText = new LTextField(); s.dateText.size = 20 s.dateText.x = 110; 100; s.dateText.color = "white"; s.dateText.weight = "bold"; s.dateText.filters = s.addChild(s. timeText); s.addChild(s.dateText); //타임라인 이벤트를 통해 날짜 업데이트 s.addEventListener(LEvent.ENTER_FRAME,function(s){ var date = new Date( ); if(date.getMinutes() if(date.getHours() s.timeText.text = "0" date.getHours() " :0" 날짜 .getMinutes(); }else{ s.timeText.text = date.getHours() ":0" date.getMinutes(); } }else{ if( date.getHours() s.timeText.text = "0" date.getHours() ":" date.getMinutes() }else{ s; .timeText.text = date.getHours() ":" date.getMinutes(); } } s.dateText.text = date.getMonth() 1 "월" date.getDate() "일"; }) BootPage.prototype.addSlider = function(bitmapdata){ var s = this; >s.sliderLayer .graphics.drawRect(0,"",[0,iosShape.getScreenHeight()-100,iosShape.getScreenWidth(),100],true,"black") s.sliderLayer.alpha = 0.3; //슬라이더 프레임 레이어 추가 var barBorder = new LSprite(); barBorder.x = 35>barBorder.y = iosShape.getScreenHeight()-70; s.addChild( barBorder);//슬라이더 설명 추가 var moveBarCommont = new LTextField(); moveBarCommont.x = 80; = 10 ; moveBarCommont.color = "white"; moveBarCommont.text = "슬라이드하여 잠금 해제."; barBorder.addChild(moveBarCommont) //슬라이더 레이어 추가 var bar = new LSprite(); bar.x = 35; bar.y = iosShape.getScreenHeight()-70; bar.canMoveBar = false //마우스 클릭 추가 이동 이벤트 bar.addEventListener(LMouseEvent.MOUSE_DOWN,function(event,s){ s.canMoveBar = true; }) bar.addEventListener(LMouseEvent.MOUSE_UP,function(event, s) ){ LTweenLite.to(bar,0.5,{ x:35, onComplete:function(s){ s.canMoveBar = false; } } ); s.canMoveBar = false; }); s.addChild(bar) bar.addEventListener(LMouseEvent.MOUSE_OUT,function(event,s){ LTweenLite. to( bar,0.5,{ x:35, onComplete:function(s){ s.canMoveBar = false; } }); false; }); s.addEventListener(LMouseEvent.MOUSE_MOVE,function(event){ if(bar.canMoveBar == true){ bar.x = event.offsetX - 70; if(bar.x > 215){bar.x = 215;} if(bar.x } }); s.addChild(bar); //슬라이더 상자 그리기 barBorder.graphics.drawRoundRect(2,"#191818",[0,0,250,40,5],true,"black" ) ; barBorder.alpha = 0.7; //슬라이더 그리기 bar.graphics.drawRoundRect(2,"dimgray",[0,0,70,40,5],true,"lightgray "); bar.alpha = 0.7; };

이것은 단지 재미를 위한 것이므로 코드에 대해 자세히 설명하지 않고 Shape.js 및 BootPage.js의 사용에 대해서만 이야기하겠습니다. Shape.js는 iPhone의 셸을 그리는 데 사용되는 클래스이고 BootPage.js는 시작 인터페이스를 위한 클래스입니다. 둘의 기능은 서로 다릅니다. 이는 하드웨어의 모양을 처리하는 데 Shape.js가 사용되고 디스플레이를 처리하는 데 BootPage.js가 사용되는 것과 동일합니다. 나머지는 직접 확인하도록 남겨 두겠습니다. 코드가 조금 길긴 하지만 논리적이지 않습니다. 천천히 읽어보세요! 물론, 이해하지 못하는 학생들은 lufylegend에 대해 모를 수도 있습니다. 다음은 엔진의 공식 웹사이트입니다: http://lufylegend.com/lufylegend 엔진 API 문서: http:/ /lufylegend.com /lufylegend/api CSDN 블로그를 사용하여 코드를 읽기 어려운 학생들은 편집기를 사용하여 소스 코드를 열고 소스 코드 다운로드 주소를 살펴보십시오. http://files.cnblogs.com/yorhom/iphone01.rar