Html5 implements iPhone boot interface sample code_html5 tutorial skills

Today I suddenly had an idea and thought that I could use Html5 to imitate the Apple operating system to make an ios that can run on the Web platform. Of course, I have to develop an operating system and wait until I return to the mountain to practice for another hundred years. Let’s have fun today and make a startup interface first. The completed picture: Students who are worried that the picture has been photoshopped by me can go directly to the following address to test: http://www.cnblogs.com/yorhom/articles /3163078.html Since lufylegend is packaged really well, this development is still done using this engine. There is not much code, interested friends can take a look directly. Code in index.html:

Copy code The code is as follows: iphone loading... Code in Main.js:

Copy code The code is as follows: init(50,"mylegend",450,640,main); LGlobal.setDebug(true); var loadData = [ {path: "./js/Shape.js",type:"js"}, {path:"./js/BootPage.js",type:"js"}, {name:"wallpaper", path:"./images/wall_paper.jpg"} ]; var datalist = {}; var backLayer,iphoneLayer,screenLayer,buttonLayer; var iosShape; var bootPage; function main(){ LLoadManage.load(loadData,null,gameInit); } function gameInit(result){ datalist = result; //Initialization layer initLayer(); //Add iphone shell addShape(); //Add startup interface addBack(); } function initLayer(){ //Background layer 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(); bootPage.addWallPaper(new LBitmapData(datalist["wallpaper"],200,480,wallPaperWidth,wallPaperHeight)); bootPage.addTime(); bootPage.addSlider(); iosShape.addChild(bootPage); } The code in Shape.js:

Copy the code The code is as follows: /* * Shape.js **/ function Shape(type,width,height){ var s = this; base(s,LSprite ,[]); s.x = 0; s.y = 0; s.deviceWidth = width; s.deviceHeight = height; s.type = type; / /Shell Layer s.shapeLayer = new LSprite(); s.addChild(s.shapeLayer); //Home Button Layer s.homeButtonLayer = new LSprite(); s.addChild(s.homeButtonLayer); //Screen layer s.screenLayer = new LSprite(); s.addChild(s.screenLayer); //Display itself s._showSelf(); } Shape.prototype._showSelf = function(){ var s = this; switch(s.type){ case "IPHONE": //Draw the 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]; //Draw the screen s.screenLayer.graphics.drawRect(0," black",[s.deviceWidth/10,s.deviceWidth/10,s.deviceWidth*0.8,s.deviceHeight*0.8],true,"white"); //Draw the Home button 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; return s.deviceWidth*0.8; }; Shape.prototype.getScreenHeight = function(){ var s = this; return s.deviceHeight*0.8 }; The last is the code in BootPage.js:

Copy the code The code is as follows: /* * BootPage.js **/ function BootPage(){ var s = this; base(s,LSprite,[]); s.x = 0; s.y = 0; s.timeLayer = new LSprite(); s.sliderLayer = new LSprite(); } BootPage.prototype.addWallPaper = function( bitmapdata){ var s = this; //Add background image s.wallPaper = new LBitmap(bitmapdata); s.addChild(s.wallPaper); }; 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"); //Add time text area s.timeLayer.alpha = 0.3; s.timeText = new LTextField(); s.timeText.x = 70; s.timeText.y = 20; s.timeText. size = 50; s.timeText.color = "white"; s.timeText.weight = "bold"; s.timeText.filters = [shadow]; //Join date Text area s.dateText = new LTextField(); s.dateText.size = 20; s.dateText.x = 110; s.dateText.y = 100; s.dateText.color = "white"; s.dateText.weight = "bold"; s.dateText.filters = [shadow]; s.addChild(s.timeText); s.addChild(s.dateText); //Update date through timeline event 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(); }else{ s.timeText.text = date.getHours() ":" date.getMinutes(); } } s.dateText.text = date.getMonth() 1 "month" date.getDate() "day"; }) }; BootPage.prototype.addSlider = function(bitmapdata){ var s = this; s.addChild(s.sliderLayer); s.sliderLayer .graphics.drawRect(0,"",[0,iosShape.getScreenHeight()-100,iosShape.getScreenWidth(),100],true,"black"); s.sliderLayer.alpha = 0.3; //Add the slider frame layer var barBorder = new LSprite(); barBorder.x = 35; barBorder.y = iosShape.getScreenHeight()-70; s.addChild( barBorder); //Add slider description var moveBarCommont = new LTextField(); moveBarCommont.size = 12; moveBarCommont.x = 80; moveBarCommont.y = 10 ; moveBarCommont.color = "white"; moveBarCommont.text = "Slide to unlock."; barBorder.addChild(moveBarCommont); //Add slider layer var bar = new LSprite(); bar.x = 35; bar.y = iosShape.getScreenHeight()-70; bar.canMoveBar = false; //Add mouse click and mouse movement Event 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; } }); s.canMoveBar = 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); //Draw the slider box barBorder.graphics.drawRoundRect(2,"#191818",[0,0,250,40,5],true,"black") ; barBorder.alpha = 0.7; //Draw the slider bar.graphics.drawRoundRect(2,"dimgray",[0,0,70,40,5],true,"lightgray "); bar.alpha = 0.7; }; Since this is just for my own entertainment, I won’t go into much detail about the code. I will only talk about the uses of Shape.js and BootPage.js. Shape.js is the class used to draw the shell of our iPhone, and BootPage.js is the class for the startup interface. The functions of the two are different, which is equivalent to Shape.js being used to handle the appearance of the hardware, and BootPage.js being used to handle the display. I’ll leave the rest for you to see for yourself. Although the code is a bit long, it is not logical. Just read it slowly! Of course, students who don’t understand may not know about lufylegend. The following is the official website of the engine: http://lufylegend.com/lufylegend Engine API documentation: http://lufylegend.com /lufylegend/api For students who find it difficult to read code using CSDN blogs, why not use your editor to open the source code and take a look. The source code download address is as follows: http://files.cnblogs.com/ yorhom/iphone01.rar