Kommentar: Sie können HTML5 verwenden, um das Betriebssystem von Apple zu imitieren, um ein iOS zu erstellen, das auf der Webplattform ausgeführt werden kann. Lassen Sie uns heute einige Unterhaltung haben und eine Startschnittstelle starten. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Heute habe ich plötzlich darüber nachgedacht, HTML5 zu verwenden, um das Betriebssystem von Apple zu imitieren, um ein iOS zu erstellen, das auf der Webplattform ausgeführt werden kann.Natürlich muss ich ein Betriebssystem entwickeln, und ich werde darüber sprechen, nachdem ich für weitere hundertjährige Praxis in die Berge zurückgekehrt bin. Lassen Sie uns heute einige Unterhaltung haben und eine Startschnittstelle starten.
Fertige Bilder:
Ich bin besorgt, dass das Bild von mir gepasiert wird, und ich kann den folgenden Adresstest direkt eingeben:
Da LufyLegend in der Tat gut verpackt ist, wird diese Entwicklung immer noch mit diesem Motor durchgeführt. Es gibt nicht viel Code und interessierte Freunde können sich direkt ansehen.
Code in Index.html:
<! DocType html>
<html>
<kopf>
<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> Laden ... </div>
</body>
</html>
Code in main.js:
Init (50, "MyLegend", 450.640, Main);
Lglobal.setDebug (true);
var loaddata = [
{Pfad: "./ JS/shape.js", Typ: "JS"},
{Pfad: "./ JS/bootpage.js", Typ: "JS"},
{Name: "Wallpaper", Pfad: "./ Images/wall_paper.jpg"}
];
var datalist = {};
var backlayer, iPhonelayer, Screenlayer, ButtonLayer;
var iosshape;
var bootpage;
Funktion main () {
LloadManage.load (loaddata, null, gameInit);
}
Funktion GameInit (Ergebnis) {
Datalist = Ergebnis;
// Initialisierungsschicht
initlayer ();
// Fügen Sie eine iPhone -Hülle hinzu
addShape ();
// zur Boot -Schnittstelle hinzufügen
addback ();
}
Funktion initlayer () {
// Hintergrundschicht
backlayer = new lsprite ();
addChild (Backlayer);
}
Funktion addShape () {
IOSSHAPE = New Shape ("iPhone", 400.600);
iosshape.x = 15;
iosshape.y = 5;
backlayer.addchild (iosshape);
}
Funktion addback () {
bootPage = new BootPage ();
bootPage.x = 40;
bootPage.y = 40;
var wallpaperwidth = iosshape.getscreenwidth ();
var wallpaperHeight = iosshape.getscreenHeight ();
BootPage.Addwallpaper (neue Lbitmapdata (Datalist ["Wallpaper"], 200.480, Wallpaperwidth, Wallpaperheight));
BootPage.AddTime ();
bootPage.addsslider ();
iosshape.addchild (BootPage);
}
Code in Form.js:
/*
* Form.js
**//
Funktionsform (Typ, Breite, Höhe) {
var s = this;
Basis (s, lsprite, []);
sx = 0;
Sy = 0;
S.DeviceWidth = Breite;
S.DevicEHELT = Höhe;
s.type = Typ;
// Fallschicht
s.shapelayer = new lsprite ();
S.Addchild (S. -Shapelayer);
// Home -Taste -Ebene
S.HomebuttonLayer = new lsprite ();
S.Addchild (S.HomebuttonLayer);
// Bildschirmschicht
s.ScreenLayer = new lsprite ();
S.AddChild (S.ScreenLayer);
// Zeig dich
S._Showself ();
}
Shape.Prototype._showself = function () {
var s = this;
Switch (s.type) {
Fall "iPhone":
// Zeichne die Schale
var Shadow = New LdropShadowFilter (15,45, "schwarz", 20);
S. shapelayer.graphics
s.shapelayer.Filters = [Shadow];
// den Bildschirm zeichne
s.screenlayer.graphics.drawrect (0, "schwarz", [S.DeviceWidth/10, S. DeviceWidth/10, S. DeviceWidth*0,8, S. DevicHeight*0,8], True, "White");
// Zeichnen Sie die Home -Taste
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]);
brechen;
}
};
Shape.Prototype.getscreenwidth = function () {
var s = this;
Return S.DeviceWidth*0,8;
};
Shape.Prototype.getscreenHeight = function () {
var s = this;
Return S.DevicEHELT*0,8
};
Schließlich gibt es den Code in BootPage.js:
/*
* BootPage.js
**//
Funktion bootPage () {
var s = this;
Basis (s, lsprite, []);
sx = 0;
Sy = 0;
s.timelayer = new lsprite ();
S.SliderLayer = new lsprite ();
}
Bootpage.prototype.addwallpaper = function (bitmapdata) {
var s = this;
// fügen Sie ein Hintergrundbild hinzu
S.Wallpaper = new lbitmap (bitmapdata);
S.Addchild (S.Wallpaper);
};
Bootpage.prototype.addtime = function () {
var s = this;
var Shadow = New LdropShadowFilter (1,1, "schwarz", 8);
S.AddChild (s.timelayer);
s.timelayer.graphics.drawrect (0, "", [0,0, iosshape.getscreenwidth (), 150], wahr, "schwarz");
// dem Zeittextbereich hinzufügen
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];
// Datum des Textbereichs hinzufügen
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);
// Datum über Timeline -Ereignis aktualisieren
S.AdDeVentListener (Levent.enter_Frame, Funktion (s) {
var date = new Date ();
if (date.getminutes () <10) {
if (Datum.Gethours () <10) {
s.timetext.text = "0" + date.gethours () + ": 0" + date.getminutes ();
}anders{
s.timetext.text = date.gethours () + ": 0" + date.getminutes ();
}
}anders{
if (Datum.Gethours () <10) {
s.timetext.text = "0" + date.gethours () + ":" + date.getminutes ();
}anders{
s.timetext.text = date.gethours () + ":" + date.getminutes ();
}
}
S.DateText.Text = Date.getMonth () + 1 + "Monat" + Date.getDate () + "Tag";
})
};
Bootpage.prototype.addsLider = function (bitmapdata) {
var s = this;
S.Addchild (S.Sliderlayer);
sliderlayer.graphics.drawrect (0, "", [0, iosshape.getscreenHeight ()-100, iosshape.getscreenwidth (), 100], wahr, "schwarz");
S.Sliderlayer.Alpha = 0,3;
// Slider -Rahmenschicht hinzufügen
var barborder = new lspprite ();
Barborder.x = 35;
barborder.y = iosshape.getscreenHeight ()-70;
S.Addchild (Barborder);
// Anweisungen der Schieberegler hinzufügen
var moveBarcommont = new ltextfield ();
MOVEBARCOMMONT.SIZE = 12;
MoveBarcommont.x = 80;
MoveBarcommont.y = 10;
MoveBarcommont.color = "White";
moveBarcommont.text = "Dia zum Entsperren";
Barborder.Addchild (Movbarcommont);
// Slider -Schicht hinzufügen
var bar = new lspprite ();
bar.x = 35;
bar.y = iosshape.getscreenHeight ()-70;
bar.canmoveBar = false;
// Mausklick- und Mausbewegungsereignisse hinzufügen
bar.addeventListener (lmouseeEvent.mouse_down, Funktion (Ereignis, s) {
S.CanMoveBar = True;
});
bar.addeventListener (lmouseeEvent.mouse_up, Funktion (Ereignis, s) {
Ltweenlite.to (bar, 0,5, {
x: 35,
OnComplete: Funktion (s) {
S.CanMoveBar = false;
}
});
S.CanMoveBar = false;
});
S.Addchild (Bar);
bar.addeventListener (lmouseeEvent.mouse_out, Funktion (Ereignis, s) {
Ltweenlite.to (bar, 0,5, {
x: 35,
OnComplete: Funktion (s) {
S.CanMoveBar = false;
}
});
S.CanMoveBar = false;
});
S.AdDeVentListener (lmouseeEvent.mouse_move, Funktion (Ereignis) {
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);
// Zeichnen Sie die Schiebereglerbox
Barborder.Graphics.DrawroundRect (2, "#191818", [0,0,250,40,5], wahr, "schwarz");
Barborder.Alpha = 0,7;
// Zeichne den Schieberegler
bar.graphics.drawroundRect (2, "Dimgray", [0,0,70,40,5], wahr, "LightGray");
bar.alpha = 0,7;
};
Da ich diese Zeit mich selbst unterhalte, werde ich nicht mehr über den Code sprechen, ich werde nur über die Verwendung von Shape.js und BootPage.js sprechen. Shape.js ist eine Klasse, die zum Zeichnen unserer iPhone -Telefonschale verwendet wird, während bootPage.js eine Klasse für die Boot -Schnittstelle ist. Die Funktionen der beiden sind unterschiedlich, was Form entspricht.
Lassen wir den Rest, damit Sie sehen können. Obwohl der Code etwas lang ist, ist er nicht logisch. Lies es langsam! Natürlich haben Studenten, die nicht verstehen können, Lufylegend nicht verstanden. Das Folgende ist die offizielle Website des Motors:
Motor -API -Dokumentation:
Schüler, die es für schwierig halten, Codes mit CSDN -Blogs zu lesen, verwenden Sie Ihren Editor nicht, um den Quellcode zu öffnen und die Adresse des Quellcode -Downloads wie folgt zu sehen: