Html5 implémente les compétences du didacticiel exemple code_html5 de l'interface de démarrage de l'iPhone-Tutoriel H5-php.cn

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