ความคิดเห็น: คุณสามารถใช้ HTML5 เพื่อเลียนแบบระบบปฏิบัติการของ Apple เพื่อสร้าง iOS ที่สามารถทำงานบนแพลตฟอร์มเว็บได้ วันนี้มีความบันเทิงกันดีกว่าและเริ่มอินเทอร์เฟซบูต เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน
วันนี้ฉันคิดถึงการใช้ HTML5 เพื่อเลียนแบบระบบปฏิบัติการของ Apple เพื่อสร้าง iOS ที่สามารถทำงานบนแพลตฟอร์มเว็บได้แน่นอนฉันต้องพัฒนาระบบปฏิบัติการและฉันจะพูดคุยเกี่ยวกับเรื่องนี้หลังจากที่ฉันกลับไปที่ภูเขาอีกร้อยปีของการฝึกฝน มามีความบันเทิงกันดีกว่าวันนี้และเริ่มอินเทอร์เฟซบูต
รูปภาพที่เสร็จสมบูรณ์:
ฉันกังวลว่าภาพจะถูก psed โดยฉันและฉันสามารถป้อนการทดสอบที่อยู่ต่อไปนี้โดยตรง:
เนื่องจาก 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> โหลด ... </div>
</body>
</html>
รหัสใน main.js:
init (50, "Mylegend", 450,640, Main);
lglobal.setdebug (จริง);
var loaddata = [
{path: "./ js/shape.js", พิมพ์: "js"},
{path: "./ js/bootpage.js", พิมพ์: "js"},
{ชื่อ: "วอลล์เปเปอร์", เส้นทาง: "./ images/wall_paper.jpg"}
-
var datalist = {};
var backlayer, iphonelayer, screenlayer, buttonlayer;
var iosshape;
var bootpage;
ฟังก์ชั่นหลัก () {
lloadmanage.load (loaddata, null, gameinit);
-
ฟังก์ชั่น GameInit (ผลลัพธ์) {
Datalist = ผลลัพธ์;
// เลเยอร์การเริ่มต้น
initlayer ();
// เพิ่มเคส iphone
addshape ();
// เพิ่มลงในอินเทอร์เฟซบูต
addback ();
-
ฟังก์ชั่น initlayer () {
// เลเยอร์พื้นหลัง
backlayer = new lsprite ();
addchild (backlayer);
-
ฟังก์ชั่น addshape () {
iosShape = รูปร่างใหม่ ("iPhone", 400,600);
iosshape.x = 15;
iosshape.y = 5;
backlayer.addchild (iosshape);
-
ฟังก์ชั่น addback () {
bootpage = ใหม่ bootpage ();
bootpage.x = 40;
bootpage.y = 40;
var wallpaperWidth = iosshape.getScreenWidth ();
var wallpaperheight = iosshape.getScreenheight ();
bootpage.addwallpaper (ใหม่ lbitmapdata (Datalist ["Wallpaper"], 200,480, Wallpaperwidth, Wallpaperheight));
bootpage.addtime ();
bootpage.addslider ();
iosshape.addchild (bootpage);
-
รหัสใน shape.js:
-
* shape.js
-
รูปร่างฟังก์ชัน (ประเภท, ความกว้าง, ความสูง) {
var s = สิ่งนี้;
ฐาน (s, lsprite, []);
sx = 0;
sy = 0;
S.DeviceWidth = ความกว้าง;
S.DeviceHeight = ความสูง;
S.Type = ประเภท;
// เลเยอร์เคส
s.shapelayer = new lsprite ();
S.AddChild (S.Shapelayer);
// เลเยอร์ปุ่มโฮม
s.homebuttonlayer = new lsprite ();
S.AddChild (S.Homebuttonlayer);
// เลเยอร์หน้าจอ
S.Screenlayer = ใหม่ lsprite ();
S.AddChild (S.Screenlayer);
// แสดงตัวเอง
s._showself ();
-
shape.prototype._showself = function () {
var s = สิ่งนี้;
สวิตช์ (s.type) {
กรณี "iphone":
// วาดเชลล์
var shadow = ใหม่ ldropshadowfilter (15,45, "ดำ", 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] จริง "#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 = สิ่งนี้;
ส่งคืน S.DeviceWidth*0.8;
-
shape.prototype.getScreenheight = function () {
var s = สิ่งนี้;
ส่งคืน s.deviceheight*0.8
-
ในที่สุดก็มีรหัสใน bootpage.js:
-
* bootpage.js
-
function bootpage () {
var s = สิ่งนี้;
ฐาน (s, lsprite, []);
sx = 0;
sy = 0;
s.timelayer = new lsprite ();
S.SliderLayer = new lsprite ();
-
bootpage.prototype.addwallpaper = function (bitmapdata) {
var s = สิ่งนี้;
// เพิ่มภาพพื้นหลัง
s.wallpaper = ใหม่ lbitmap (bitmapdata);
S.AddChild (S.WallPaper);
-
bootpage.prototype.addtime = function () {
var s = สิ่งนี้;
var shadow = ใหม่ ldropshadowfilter (1,1, "ดำ", 8);
S.AddChild (S.Timelayer);
S.timelayer.graphics.drawrect (0, "", [0,0, iosshape.getScreenwidth (), 150], จริง, "ดำ");
// เพิ่มลงในพื้นที่ข้อความเวลา
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, ฟังก์ชัน (s) {
วันที่ var = วันที่ใหม่ ();
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 + "เดือน" + date.getDate () + "วัน";
-
-
bootpage.prototype.addslider = function (bitmapdata) {
var s = สิ่งนี้;
S.AddChild (S.Sliderlayer);
s.sliderlayer.graphics.drawrect (0, "", [0, iosshape.getscreenheight ()-100, iosshape.getscreenwidth (), 100], จริง "ดำ");
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 (lmousevent.mouse_down, ฟังก์ชั่น (เหตุการณ์, s) {
S.CanMoveBar = true;
-
bar.addeventListener (lmousevent.mouse_up, ฟังก์ชั่น (เหตุการณ์, s) {
ltweenlite.to (bar, 0.5, {
x: 35
oncomplete: ฟังก์ชั่น {
S.CanMoveBar = FALSE;
-
-
S.CanMoveBar = FALSE;
-
s.addchild (บาร์);
bar.addeventListener (lmousevent.mouse_out, ฟังก์ชั่น (เหตุการณ์, s) {
ltweenlite.to (bar, 0.5, {
x: 35
oncomplete: ฟังก์ชั่น {
S.CanMoveBar = FALSE;
-
-
S.CanMoveBar = FALSE;
-
s.addeventListener (lmousevent.mouse_move, ฟังก์ชั่น (เหตุการณ์) {
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 (บาร์);
// วาดกล่องแถบเลื่อน
barborder.graphics.drawroundrect (2, "#191818", [0,0,250,40,5], จริง, "ดำ");
Barborder.alpha = 0.7;
// วาดแถบเลื่อน
bar.graphics.drawRoundRect (2, "Dimgray", [0,0,70,40,5], จริง, "Lightgray");
bar.alpha = 0.7;
-
ตั้งแต่ครั้งนี้ฉันสนุกสนานกับตัวเองฉันจะไม่พูดถึงรหัสเพิ่มเติมฉันจะพูดถึงการใช้งานของ shape.js และ bootpage.js เท่านั้น Shape.js เป็นคลาสที่ใช้ในการวาดเชลล์โทรศัพท์ iPhone ของเราในขณะที่ bootpage.js เป็นคลาสสำหรับอินเทอร์เฟซบูต ฟังก์ชั่นของทั้งสองนั้นแตกต่างกันซึ่งเทียบเท่ากับรูปร่าง js ที่ใช้ในการจัดการกับลักษณะที่ปรากฏของฮาร์ดแวร์และ bootpage.js ที่ใช้ในการจัดการจอแสดงผล
ปล่อยให้ส่วนที่เหลือให้คุณดู แม้ว่ารหัสจะยาวไปหน่อย แต่ก็ไม่สมเหตุสมผล อ่านช้า! แน่นอนว่านักเรียนที่ไม่เข้าใจอาจไม่เข้าใจ Lufylegend ต่อไปนี้เป็นเว็บไซต์อย่างเป็นทางการของเครื่องยนต์:
เอกสาร API เครื่องยนต์:
นักเรียนที่รู้สึกว่าเป็นการยากที่จะอ่านรหัสด้วยบล็อก CSDN อย่าใช้ตัวแก้ไขของคุณเพื่อเปิดซอร์สโค้ดและดูที่อยู่ดาวน์โหลดซอร์สโค้ดดังนี้: