今天我突發其想，想到可以用Html5來仿照蘋果作業系統做一個能在Web平台啟動並執行ios。
當然，要開發出一個作業系統，等我再歸山修練一百年再說吧。今天就先娛樂一下，先搞一個開機介面。
完工後的圖片：
擔心圖片是被我PS後的同學可以直接進入下面的地址測試：
http://www.cnblogs.com/yorhom/articles/3163078.html
由於lufylegend封裝得的確不錯，本次開發還是用該引擎做的。代碼不多，感興趣的朋友可以直接看一下。
index.html中的代碼：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>iphone</title><script src="./lufylegend-1.7.7.min.js"></script><script src="./js/Main.js"></script></head><body><div id="mylegend">loading......</div></body></html>
Main.js中的代碼：
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;//初始化層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 = 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);}
Shape.js裡的代碼：
/** 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;//外殼層s.shapeLayer = new LSprite();s.addChild(s.shapeLayer);//Home按鈕層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];//畫螢幕s.screenLayer.graphics.drawRect(0,"black",[s.deviceWidth/10,s.deviceWidth/10,s.deviceWidth*0.8,s.deviceHeight*0.8],true,"white");//畫Home按鈕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};
最後是BootPage.js裡的代碼：
/** 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;//加入背景圖片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");//加入時間文本區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];//加入日期文本區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);//通過時間軸事件更新日期s.addEventListener(LEvent.ENTER_FRAME,function(s){var date = new Date();if(date.getMinutes() < 10){if(date.getHours() < 10){s.timeText.text = "0" + date.getHours() + ":0" + date.getMinutes();}else{s.timeText.text = date.getHours() + ":0" + date.getMinutes();}}else{if(date.getHours() < 10){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.addChild(s.sliderLayer);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.size = 12;moveBarCommont.x = 80;moveBarCommont.y = 10; moveBarCommont.color = "white"; moveBarCommont.text = "Slide to unlock.";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;}});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 < 35){bar.x = 35;}}});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用來處理顯示。
其他的就留個大家自己看吧。雖然代碼有點長，但是都不帶邏輯性。慢慢讀就Ok！當然，讀不懂的同學可能是沒有瞭解過lufylegend，以下是引擎官方的網站：
http://lufylegend.com/lufylegend
引擎API文檔：
http://lufylegend.com/lufylegend/api
覺得用CSDN部落格閱讀代碼有些困難的同學，不仿用你的編輯器開啟原始碼看看，原始碼如下：
http://files.cnblogs.com/yorhom/iphone01.rar
謝謝大家閱讀本文，支援就是最大的鼓勵。
----------------------------------------------------------------
歡迎大家轉載我的文章。
轉載請註明：轉自Yorhom's Game Box
http://blog.csdn.net/yorhomwang
歡迎繼續關注我的部落格
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
