コメント：HTML5を使用して、Appleのオペレーティングシステムを模倣して、Webプラットフォームで実行できるiOSを作成できます。今日エンターテイメントを持ち、ブートインターフェイスを始めましょう。興味のある友達はそれを参照できます。私はそれが誰にでも役立つことを願っています。
今日、私は突然、HTML5を使用してAppleのオペレーティングシステムを模倣して、Webプラットフォームで実行できるiOSを作成することを考えました。もちろん、私はオペレーティングシステムを開発する必要があります。さらに100年の練習のために山に戻った後、それについて話します。今日はエンターテイメントがあり、ブートインターフェイスを始めましょう。
完成した写真：
私は写真が私によって詩的になるのではないかと心配しており、次のアドレステストを直接入力できます。
Lufylegendは確かに十分にパッケージ化されているため、この開発はこのエンジンでまだ行われています。コードはあまりありません。興味のある友達は直接見ることができます。
index.htmlのコード：
<！doctype html>
<html>
<head>
<Meta charset = "utf-8" />
<Title> iPhone </title>
<スクリプトsrc = "./ lufylegend-1.7.7.min.js"> </scrip>
<スクリプトsrc = "./ js/main.js"> </script>
</head>
<body>
<div>読み込み... </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"}、
{名前：「壁紙」、パス： "./画像/wall_paper.jpg"}
];
var datalist = {};
var Backlayer、iphonelayer、screenlayer、buttonlayer;
var iosshape;
var bootpage;
関数main（）{
lloadmanage.load（loaddata、null、gameinit）;
}
function gameinit（result）{
Datalist = result;
//初期化レイヤー
initlayer（）;
// iPhoneケースを追加します
addshape（）;
//ブートインターフェイスに追加します
アドバック（）;
}
関数initlayer（）{
//背景レイヤー
backlayer = new lsprite（）;
AddChild（Backlayer）;
}
関数addshape（）{
iosshape = new Shape（ "iPhone"、400,600）;
iosshape.x = 15;
iosshape.y = 5;
backlayer.addchild（iosshape）;
}
function vodback（）{
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
**/
関数の形状（タイプ、幅、高さ）{
var s = this;
base（s、lsprite、[]）;
sx = 0;
sy = 0;
S.DeviceWidth = width;
S.DeviceHeight = height;
s.type = 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）{
ケース「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"）;
//ホームボタンを描画します
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]）;
壊す;
}
};
shape.prototype.getScreenWidth = function（）{
var s = this;
S.DeviceWidth*0.8を返します。
};
shape.prototype.getscreenheight = function（）{
var s = this;
S.DeviceHeight*0.8を返します
};
最後に、bootpage.jsにコードがあります：
/*
* bootpage.js
**/
function bootpage（）{
var s = this;
base（s、lsprite、[]）;
sx = 0;
sy = 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"）;
// TIMEテキスト領域に追加します
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 {
var date = new Date（）;
if（date.getMinutes（）<10）{
if（date.gethours（）<10）{
s.timetext.text = "0" + date.gethours（） + "：0" + date.getMinutes（）;
}それ以外{
s.timetext.text = date.gethours（） + "：0" + date.getMinutes（）;
}
}それ以外{
if（date.gethours（）<10）{
s.timetext.text = "0" + date.gethours（） + "：" + date.getMinutes（）;
}それ以外{
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;
//スライダーフレームレイヤーを追加します
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 = "スライドを解除する。";
barborder.addchild（movbarcommont）;
//スライダーレイヤーを追加します
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,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はブートインターフェイスのクラスです。 2つの関数は異なり、shape.jsはハードウェアの外観を処理するために使用され、bootpage.jsはディスプレイを処理するために使用されます。
あなたが見るために残りを残しましょう。コードは少し長いですが、論理的ではありません。ゆっくりと読んでください！もちろん、理解できない学生はLufylegendを理解していないかもしれません。以下は、エンジンの公式ウェブサイトです。
エンジンAPIドキュメント：
CSDNブログでコードを読むのが難しいと感じる学生は、エディターを使用してソースコードを開き、ソースコードのダウンロードアドレスを次のように表示しないでください。