Komentar: Anda dapat menggunakan HTML5 untuk meniru sistem operasi Apple untuk membuat iOS yang dapat berjalan di platform web. Mari kita hiburan hari ini dan mulai antarmuka boot. Teman yang tertarik dapat merujuknya. Saya harap ini akan membantu semua orang.
Hari ini saya tiba -tiba berpikir untuk menggunakan HTML5 untuk meniru sistem operasi Apple untuk membuat iOS yang dapat berjalan di platform web.Tentu saja, saya harus mengembangkan sistem operasi, dan saya akan membicarakannya setelah saya kembali ke pegunungan selama seratus tahun latihan lagi. Mari kita hiburan hari ini dan mulai antarmuka boot.
Gambar yang sudah selesai:
Saya khawatir gambar itu akan dipenuhi oleh saya, dan saya dapat langsung memasukkan uji alamat berikut:
Karena Lufylegend memang dikemas dengan baik, pengembangan ini masih dilakukan dengan mesin ini. Tidak ada banyak kode, dan teman -teman yang tertarik dapat melihat secara langsung.
Kode dalam index.html:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8" />
<title> iPhone </iteme>
<skrip src = "./ lufylegend-1.7.7.min.js"> </script>
<skrip src = "./ js/main.js"> </script>
</head>
<body>
<div> memuat ... </div>
</body>
</html>
Kode di Main.js:
init (50, "mylegend", 450.640, utama);
Lglobal.setDebug (true);
var loadData = [
{path: "./ js/shape.js", ketik: "js"},
{path: "./ js/bootpage.js", ketik: "js"},
{name: "wallpaper", path: "./ gambar/wall_paper.jpg"}
];
var datalist = {};
var backlayer, iPhonelayer, Screenlayer, ButtonLayer;
var iosshape;
var bootpage;
fungsi main () {
LloadManage.load (loaddata, null, gameinit);
}
function gameInit (hasil) {
datalist = hasil;
// Lapisan Inisialisasi
initlayer ();
// Tambahkan case iPhone
addshape ();
// Tambahkan ke antarmuka boot
addback ();
}
fungsi initlayer () {
// lapisan latar belakang
backlayer = lsprite baru ();
addChild (backlayer);
}
fungsi addshape () {
iosshape = bentuk baru ("iPhone", 400.600);
iosshape.x = 15;
iosshape.y = 5;
backlayer.addchild (iosshape);
}
fungsi addback () {
bootpage = bootpage baru ();
bootpage.x = 40;
bootpage.y = 40;
var wallpaperwidth = iosshape.getScreenWidth ();
var wallpaperheight = iosshape.getScreenHeight ();
bootpage.addwallpaper (lbbitmapdata baru (datasist ["wallpaper"], 200.480, wallpaperwidth, wallpaperheight));
bootpage.addtime ();
bootpage.addslider ();
iosshape.addchild (bootpage);
}
Kode dalam bentuk.js:
/*
* Shape.js
**/
bentuk fungsi (tipe, lebar, tinggi) {
var s = ini;
base (s, lsprite, []);
sx = 0;
sy = 0;
s.devicewidth = lebar;
s.deviceheight = tinggi;
s.type = type;
// lapisan kasus
s.shapelayer = lsprite baru ();
S.AddChild (S.Shapelayer);
// Lapisan tombol beranda
s.homebuttonlayer = lsprite baru ();
S.AddChild (S.Homebuttonlayer);
// Lapisan layar
s.screenlayer = LSPRITE baru ();
S.AddChild (S.Screenlayer);
// tunjukkan diri Anda
s._showself ();
}
Bentuk.prototype._showself = function () {
var s = ini;
switch (s.type) {
case "iPhone":
// Gambarlah shell
var shadow = ldropshadowfilter baru (15,45, "hitam", 20);
s.shapelayer.graphics.drawroundrect (10, "hitam", [0,0, s.devicewidth, s.deviceHeight, 15], true, "hitam");
s.shapelayer.filters = [bayangan];
// Gambarlah layar
S.Screenlayer.graphics.drawrect (0, "hitam", [s.devicewidth/10, s.devicewidth/10, s.devicewidth*0,8, s.deviceheight*0,8], true, "white");
// Gambarlah tombol beranda
s.homebuttonlayer.graphics.drawarc (1, "hitam", [s.devicewidth/2, s.deviceHeight*0,87 + s.devicewidth/10, s.devicewidth/16,0,2*math.pi], true, "#191818");
s.homebuttonlayer.graphics.drawroundrect (3, "putih", [s.devicewidth/2-10, s.deviceHeight*0,87 + s.devicewidth/10 - 10,20,20,5]);
merusak;
}
};
Shape.prototype.getScreenWidth = function () {
var s = ini;
return S.Devicewidth*0.8;
};
Bentuk.prototype.getScreenHeight = function () {
var s = ini;
return S.DevICEHEIGHT*0.8
};
Akhirnya, ada kode di bootpage.js:
/*
* Bootpage.js
**/
fungsi bootpage () {
var s = ini;
base (s, lsprite, []);
sx = 0;
sy = 0;
s.timelayer = LSPRITE baru ();
s.sliderlayer = lsprite baru ();
}
Bootpage.prototype.addWallpaper = function (bitmapData) {
var s = ini;
// Tambahkan gambar latar belakang
S.Wallpaper = LBITMAP baru (BitmapData);
S.AddChild (S.Wallpaper);
};
Bootpage.prototype.addtime = function () {
var s = ini;
var shadow = ldropshadowfilter baru (1,1, "hitam", 8);
S.AddChild (S.Timelayer);
s.timelayer.graphics.drawrect (0, "", [0,0, iosshape.getScreenwidth (), 150], true, "hitam");
// Tambahkan ke area teks waktu
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 = [bayangan];
// Tambahkan area teks tanggal
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 = [bayangan];
S.AddChild (S.Timetext);
S.AddChild (S.DateText);
// Perbarui Tanggal Melalui Acara Timeline
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 ();
}kalau tidak{
s.timetext.text = date.getHours () + ": 0" + date.getMinutes ();
}
}kalau tidak{
if (date.getHours () <10) {
s.timetext.text = "0" + date.getHours () + ":" + date.getMinutes ();
}kalau tidak{
s.timetext.text = date.getHours () + ":" + date.getMinutes ();
}
}
s.dateText.text = date.getMonth () + 1 + "month" + date.getDate () + "day";
})
};
Bootpage.prototype.addslider = function (bitmapData) {
var s = ini;
S.AddChild (S.SliderLayer);
s.sliderlayer.graphics.drawrect (0, "", [0, iosshape.getScreenHeight ()-100, iosshape.getScreenwidth (), 100], true, "hitam");
s.sliderlayer.alpha = 0,3;
// Tambahkan lapisan bingkai slider
var barborder = LSPRITE baru ();
Barborder.x = 35;
Barborder.y = iosshape.getScreenHeight ()-70;
S.AddChild (Barborder);
// Tambahkan instruksi slider
var moveBarcommont = new ltextField ();
moveBarcommont.size = 12;
moveBarcommont.x = 80;
moveBarcommont.y = 10;
moveBarcommont.color = "white";
moveBarcommont.text = "Slide to Unlock.";
Barborder.addchild (Movbarcommont);
// Tambahkan lapisan slider
var bar = lsprite baru ();
bar.x = 35;
bar.y = iosshape.getScreenHeight ()-70;
Bar.CanMoverbar = false;
// Tambahkan Klik Mouse dan Acara Gerakan Mouse
bar.addeventListener (lmouseevent.mouse_down, function (event, s) {
S.CanMoverbar = true;
});
bar.addeventListener (lmouseevent.mouse_up, function (event, s) {
Ltweenlite.to (bar, 0,5, {
X: 35,
Oncomplete: function {
S.CanMoverbar = false;
}
});
S.CanMoverbar = false;
});
S.AddChild (bar);
bar.addeventListener (lmouseevent.mouse_out, function (event, s) {
Ltweenlite.to (bar, 0,5, {
X: 35,
Oncomplete: function {
S.CanMoverbar = false;
}
});
S.CanMoverbar = false;
});
s.addeventListener (lmouseevent.mouse_move, function (event) {
if (bar.canMoverbar == true) {
bar.x = event.offsetx - 70;
if (bar.x> 215) {bar.x = 215;}
if (bar.x <35) {bar.x = 35;}
}
});
S.AddChild (bar);
// Gambarlah kotak slider
barborder.graphics.drawroundrect (2, "#191818", [0,0,250,40,5], benar, "hitam");
Barborder.alpha = 0,7;
// Gambar slider
bar.graphics.drawroundrect (2, "dimgray", [0,0,70,40,5], true, "lightgray");
bar.alpha = 0,7;
};
Sejak saat ini saya menghibur diri sendiri, saya tidak akan berbicara tentang kode lebih banyak, saya hanya akan berbicara tentang penggunaan bentuk.js dan bootpage.js. Shape.js adalah kelas yang digunakan untuk menggambar shell ponsel iPhone kami, sementara bootpage.js adalah kelas untuk antarmuka boot. Fungsi keduanya berbeda, yang setara dengan bentuk. JS digunakan untuk menangani penampilan perangkat keras, dan bootpage.js digunakan untuk menangani tampilan.
Mari kita tinggalkan sisanya untuk Anda lihat. Meskipun kodenya agak panjang, itu tidak logis. Bacalah perlahan! Tentu saja, siswa yang tidak dapat memahami mungkin tidak memahami Lufylegend. Berikut ini adalah situs resmi mesin:
Dokumentasi API Mesin:
Siswa yang merasa sulit untuk membaca kode dengan blog CSDN, jangan gunakan editor Anda untuk membuka kode sumber dan melihat alamat unduhan kode sumber sebagai berikut: