Html5 implémente les compétences du didacticiel exemple code_html5 de l'interface de démarrage de l'iPhone

Aujourd'hui, j'ai soudainement eu une idée et j'ai pensé que je pourrais utiliser Html5 pour imiter le système d'exploitation Apple afin de créer un iOS pouvant fonctionner sur la plate-forme Web. Bien sûr, je dois développer un système d'exploitation et attendre de retourner à la montagne pour pratiquer pendant encore cent ans. Amusons-nous aujourd'hui et créons d'abord une interface de démarrage. La photo complétée : Les étudiants qui craignent que la photo ait été retouchée par mes soins peuvent se rendre directement à l'adresse suivante pour tester : http://www.cnblogs.com /yorhom/articles /3163078.html Étant donné que lufylegend est très bien emballé, ce développement est toujours effectué en utilisant ce moteur. Il n'y a pas beaucoup de code, les amis intéressés peuvent y jeter un œil directement. Code dans index.html :

Copier le code Le code est le suivant : ; chargement... >

Code dans Main.js :

Copier le code Le code est le suivant : init(50,"mylegend",450,640,main); LGlobal.setDebug(true>var loadData = [ {path); : "./js/Shape.js",type:"js"}, {chemin:"./js/BootPage.js",type:"js"}, {name:"wallpaper" , chemin :"./images/wall_paper.jpg"} ]; var datalist = {}; var backLayer,screenLayer,buttonLayer; ; function main(){ LLoadManage.load(loadData,null,gameInit); } function gameInit(result){ datalist = result //Couche d'initialisation; initLayer(); //Ajouter une coque iPhone addShape(); //Ajouter une interface de démarrage addBack(); function initLayer(){ //Couche d'arrière-plan 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 = new 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);

Le code dans Shape.js :

Copiez le code

Le code est tel suit :

/* * Shape.js **/ function Shape(type,width,height){ var s = base(s,LSprite ,[]); s.x = 0; s.y = 0; s.deviceWidth = width; ; / /Shell Layer s.shapeLayer = new LSprite(); s.addChild(s.shapeLayer); //Home Button Layer s.homeButtonLayer = new LSprite(); ); s.addChild(s.homeButtonLayer); //Couche d'écran s.screenLayer = new LSprite(); S'afficher s._showSelf(); } Shape.prototype._showSelf = function(){ var s = switch(s.type){ case; "IPHONE": //Dessinez le shell 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];//Dessiner l'écran s.screenLayer. graphiques.drawRect(0," black",[s.deviceWidth/10,s.deviceWidth/10,s.deviceWidth*0.8,s.deviceHeight*0.8],true,"white"); //Dessinez le Bouton Accueil 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 = return s.deviceWidth* 0.8; }; Shape.prototype.getScreenHeight = function(){ var s = this; return s.deviceHeight*0.8 }; Le dernier est le code dans BootPage.js :

Copiez le code Le code est le suivant : /* * BootPage.js **/ function BootPage(){ var s = base(s,LSprite,[] ); s.x = 0; s.y = 0; s.timeLayer = new LSprite(); s.sliderLayer = new LSprite(); .addWallPaper = function( bitmapdata){ var s = this; //Ajouter une image d'arrière-plan s.wallPaper = new LBitmap(bitmapdata); 🎜>}; BootPage.prototype.addTime = function(){ var s = this; var shadow = new LDropShadowFilter(1,1,"black",8 s. addChild(s.timeLayer ); s.timeLayer.graphics.drawRect(0,"",[0,0,iosShape.getScreenWidth(),150],true,"black"); zone de texte temporel s.timeLayer.alpha = 0.3; s.timeText = new LTextField(); s.timeText.x = 70; >s.timeText.size = 50; s.timeText.color = "blanc"; s.timeText.weight = "gras"; s.timeText.filters = [ombre]; >//Joindre la zone de texte de la date s.dateText = new LTextField(); s.dateText.size = 20; s.dateText.x = 110; 100 ; s.dateText.color = "white"; s.dateText.weight = "bold"; s.dateText.filters = [shadow]; timeText); s.addChild(s.dateText); //Mettre à jour la date via l'événement de chronologie s.addEventListener(LEvent.ENTER_FRAME,function(s){ var date = new Date( ); if(date.getMinutes() if(date.getHours() s.timeText.text = "0" date.getHours() " :0" date .getMinutes(); }else{ s.timeText.text = date.getHours() ":0" date.getMinutes(); } }else{ if( date.getHours() s.timeText.text = "0" date.getHours() ":" date.getMinutes(); .timeText.text = date.getHours() ":" date.getMinutes(); } } s.dateText.text = date.getMonth() 1 "mois" date.getDate() "jour"; }) }; 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; //Ajouter le calque du cadre du curseur var barBorder = new LSprite(); barBorder.x = 35; barBorder.y = iosShape.getScreenHeight()-70; s.addChild( barBorder); //Ajouter une description du curseur var moveBarCommont = new LTextField(); moveBarCommont.size = 12; moveBarCommont.x = 80; = 10 ; moveBarCommont.color = "white"; moveBarCommont.text = "Faites glisser pour déverrouiller."; barBorder.addChild(moveBarCommont); bar = new LSprite(); bar.x = 35; bar.y = iosShape.getScreenHeight()-70; bar.canMoveBar = false; mouvement Event bar.addEventListener(LMouseEvent.MOUSE_DOWN,function(event,s){ s.canMoveBar = true; }); 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); //Dessinez la zone du curseur barBorder.graphics.drawRoundRect(2,"#191818",[0,0,250,40,5],true,"black" ) ; barBorder.alpha = 0.7 //Dessinez le curseur 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用來處理顯示。 其他的就留個大家自己看吧。雖然程式碼有點長，但是都不帶邏輯性。慢慢讀就Ok！當然，讀不懂的同學可能是沒有了解lufylegend，以下是引擎官方的網站： http://lufylegend.com/lufylegend 引擎API文件： http://lufylegend.com /lufylegend/api 覺得用CSDN部落格閱讀程式碼有些困難的同學，不彷用你的編輯器開啟原始碼看看，原始碼下載網址如下： http://files.cnblogs.com/ yorhom/iphone01.rar