Commentaire: Vous pouvez utiliser HTML5 pour imiter le système d'exploitation d'Apple pour créer un iOS qui peut fonctionner sur la plate-forme Web. Ayons un divertissement aujourd'hui et commençons une interface de démarrage. Les amis intéressés peuvent y faire référence. J'espère que ce sera utile à tout le monde.
Aujourd'hui, j'ai soudainement pensé à utiliser HTML5 pour imiter le système d'exploitation d'Apple pour créer un iOS qui peut fonctionner sur la plate-forme Web.Bien sûr, je dois développer un système d'exploitation, et j'en parlerai après mon retour dans les montagnes pendant encore des centaines d'années de pratique. Ayons un divertissement aujourd'hui et commençons une interface de démarrage.
Images terminées:
Je crains que l'image ne soit pose par moi, et je peux dire directement le test d'adresse suivant:
Étant donné que Lufylegend est en effet bien emballé, ce développement se fait toujours avec ce moteur. Il n'y a pas beaucoup de code et les amis intéressés peuvent jeter un œil directement.
Code dans index.html:
<! Doctype html>
<html>
<adal>
<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> Chargement ... </div>
</docy>
</html>
Code dans main.js:
init (50, "Mylegend", 450 640, Main);
Lglobal.setdebug (true);
var chargedata = [
{path: "./ js / shape.js", type: "js"},
{path: "./ js / bootpage.js", type: "js"},
{Name: "Wallpaper", chemin: "./ images / wall_paper.jpg"}
]]
var datalist = {};
var backlayer, iPhonELayer, screenlayer, boutonlayer;
var iosshape;
var bootpage;
fonction main () {
LloadManage.Load (LoadData, Null, GameInit);
}
fonction gameInit (résultat) {
datalist = résultat;
// couche d'initialisation
InitLayer ();
// Ajouter un étui iPhone
addShape ();
// ajouter à l'interface de démarrage
addback ();
}
fonction initLayer () {
// couche d'arrière-plan
backlayer = new lsprite ();
addChild (backlayer);
}
fonction addShape () {
iosshape = nouvelle forme ("iPhone", 400 600);
iosshape.x = 15;
iosshape.y = 5;
backlayer.addchild (iosshape);
}
fonction 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);
}
Code dans forme.js:
/ *
* Forme.js
** /
Forme de fonction (type, largeur, hauteur) {
var s = this;
base (s, lsprite, []);
sx = 0;
sy = 0;
S.DeviceWidth = largeur;
S.DeviceHeight = hauteur;
s.type = type;
// Couche de cas
S.ShapElayer = new lsprite ();
S.Addchild (S.Shapeller);
// couche de bouton d'accueil
S.HomeButtonLayer = new lsprite ();
S.Addchild (S.Homebuttonlayer);
// calque d'écran
S.ScreenLayer = new lsprite ();
S.Addchild (S.Screenlayer);
// montre-toi
s._showself ();
}
Forme.prototype._showself = function () {
var s = this;
commutateur (s.type) {
cas "iPhone":
// dessine la coque
var shadow = new LDropshadowFilter (15,45, "noir", 20);
S.ShapElayer.Graphics.DrawroundRect (10, "Black", [0,0, S.DeviceWidth, S.DeviceHeight, 15], vrai, "noir");
S.ShapElayer.Filters = [Shadow];
// dessine l'écran
S.ScreenLayer.Graphics.Drawrect (0, "Black", [S.DeviceWidth / 10, S.DeviceWidth / 10, S.DeviceWidth * 0.8, S.DeviceHeight * 0.8], vrai, "blanc");
// dessiner le bouton d'accueil
s.homebuttonlayer.graphics.drawarc (1, "noir", [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]);
casser;
}
};
Shape.prototype.getScreenWidth = function () {
var s = this;
retour s.devicewidth * 0,8;
};
Shape.prototype.getScreenHeight = function () {
var s = this;
retour s.deviceheight * 0,8
};
Enfin, il y a le code dans bootpage.js:
/ *
* Bootpage.js
** /
fonction bootPage () {
var s = this;
base (s, lsprite, []);
sx = 0;
sy = 0;
S.TimeLayer = new lsprite ();
s.sliderLayer = new lsprite ();
}
Bootpage.prototype.addwallpaper = fonction (bitmapdata) {
var s = this;
// Ajouter une image d'arrière-plan
s.wallpaper = new Lbitmap (bitmapdata);
S.Addchild (S.Wallpaper);
};
Bootpage.prototype.addtime = function () {
var s = this;
var shadow = new LDropShadowFilter (1,1, "noir", 8);
S.Addchild (S.timeLayer);
s.timeLayer.Graphics.Drawrect (0, "", [0,0, iosshape.getScreenWidth (), 150], vrai, "noir");
// Ajouter à la zone de texte du temps
s.timelayer.alpha = 0,3;
s.TimeText = new LTextField ();
s.timettext.x = 70;
s.TimeText.y = 20;
S.TimeText.Size = 50;
S.TimeText.Color = "White";
S.TimeText.Weight = "Bold";
S.TimeText.Filters = [Shadow];
// Ajouter la zone de texte de la date
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);
// MISE À JOUR DATE via l'événement de chronologie
S.AddeventListener (levent.enter_frame, fonction (s) {
var date = new Date ();
if (date.getMinutes () <10) {
if (date.gethours () <10) {
S.TimeText.Text = "0" + date.Gethours () + ": 0" + date.getMinutes ();
}autre{
s.TimeText.Text = date.Gethours () + ": 0" + date.getMinutes ();
}
}autre{
if (date.gethours () <10) {
s.timeText.Text = "0" + date.Gethours () + ":" + date.getMinutes ();
}autre{
s.TimeText.Text = date.Gethours () + ":" + date.getMinutes ();
}
}
S.DateText.Text = Date.getMonth () + 1 + "Month" + Date.getDate () + "Day";
})
};
Bootpage.prototype.addslider = fonction (bitmapdata) {
var s = this;
S.Addchild (S.SliderLayer);
S.SliderLayer.Graphics.Drawrect (0, "", [0, iosshape.getScreenHeight () - 100, iosshape.getScreenWidth (), 100], true, "noir");
s.sliderLayer.alpha = 0,3;
// Ajouter une couche de trame de curseur
var barborter = new lsprite ();
barborter.x = 35;
barborter.y = iosshape.getScreenHeight () - 70;
S.Addchild (barborder);
// Ajouter des instructions de curseur
var movebarcommont = new ltextfield ();
movebarcommont.size = 12;
movebarcommont.x = 80;
movebarcommont.y = 10;
movebarcommont.color = "blanc";
movebarcommont.text = "Slide to Déverrouiller.";
Barborder.Addchild (movbarcommont);
// Ajouter une couche de curseur
var bar = new lsprite ();
bar.x = 35;
bar.y = iosshape.getScreenHeight () - 70;
bar.CanMoveBar = false;
// Ajouter des événements de clic de souris et de mouvement de la souris
bar.addeventListener (lmouseevent.mouse_down, fonction (événement, s) {
S.CanMoveBar = true;
});
bar.addeventListener (lmouseevent.mouse_up, fonction (événement, s) {
Ltweenlite.to (bar, 0,5, {
X: 35,
onComplete: fonction (s) {
S.CanMoveBar = False;
}
});
S.CanMoveBar = False;
});
S.Addchild (bar);
bar.addeventListener (lmouseevent.mouse_out, fonction (événement, s) {
Ltweenlite.to (bar, 0,5, {
X: 35,
onComplete: fonction (s) {
S.CanMoveBar = False;
}
});
S.CanMoveBar = False;
});
S.AddeventListener (lmousEEvent.mouse_move, fonction (événement) {
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);
// dessine la boîte de curseur
Barborder.Graphics.DrawroundRect (2, "# 191818", [0,0,250,40,5], vrai, "noir");
barborter.alpha = 0,7;
// dessine le curseur
Bar.Graphics.DrawroundRect (2, "Dimgray", [0,0,70,40,5], true, "LightGray");
bar.alpha = 0,7;
};
Depuis cette fois je me divertit, je ne parlerai plus du code, je ne parlerai que des utilisations de Shape.js et de bootpage.js. Shape.js est une classe utilisée pour dessiner notre shell téléphonique iPhone, tandis que bootpage.js est une classe pour l'interface de démarrage. Les fonctions des deux sont différentes, ce qui équivaut à Shape.js utilisé pour gérer l'apparence du matériel, et BootPage.js étant utilisé pour gérer l'affichage.
Laissons le reste à voir. Bien que le code soit un peu long, il n'est pas logique. Lisez-le lentement! Bien sûr, les étudiants qui ne peuvent pas comprendre peuvent ne pas avoir compris Lufylegend. Ce qui suit est le site officiel du moteur:
Documentation de l'API du moteur:
Les étudiants qui pensent qu'il est difficile de lire les codes avec les blogs CSDN, n'utilisez pas votre éditeur pour ouvrir le code source et voir l'adresse de téléchargement du code source comme suit: