تعليق: يمكنك استخدام HTML5 لتقليد نظام التشغيل من Apple لإنشاء iOS يمكن تشغيله على نظام الويب. دعنا نتمتع ببعض الترفيه اليوم وتبدأ واجهة التمهيد. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون ذلك مفيدًا للجميع.
لقد فكرت اليوم فجأة في استخدام HTML5 لتقليد نظام تشغيل Apple لإنشاء iOS يمكن تشغيله على نظام الويب الخاص باليب.بالطبع ، لا بد لي من تطوير نظام تشغيل ، وسأتحدث عنه بعد أن أعود إلى الجبال لمائة عام أخرى من الممارسة. دعنا نتمتع ببعض الترفيه اليوم وتبدأ واجهة التمهيد.
الصور المكتملة:
أشعر بالقلق من أن الصورة سيتم رعايتها من قبلي ، ويمكنني إدخال اختبار العنوان التالي مباشرة:
نظرًا لأن Lufylegend قد تم تعبئته جيدًا بالفعل ، فلا يزال هذا التطور يتم مع هذا المحرك. لا يوجد الكثير من التعليمات البرمجية ، ويمكن للأصدقاء المهتمين إلقاء نظرة مباشرة.
الكود في الفهرس. 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>
<viv> التحميل ... </div>
</body>
</html>
الرمز في main.js:
init (50 ، "mylegend" ، 450،640 ، main) ؛
lglobal.setDebug (صواب) ؛
var loadData = [
{path: "./ js/lape.js" ، type:
{path: "./ js/bootpage.js" ، اكتب: "JS"} ،
{الاسم: "خلفية" ، المسار: "./الصور/wall_paper.jpg"}
] ؛
var datalist = {} ؛
var backlayer ، iphonelayer ، screenlayer ، buttonlayer ؛
فار Iosshape ؛
var bootpage ؛
وظيفة main () {
loadmanage.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 = 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) ؛
}
رمز في الشكل. 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 () ؛
}
شكل. prototype._showself = function () {
var s = هذا ؛
التبديل (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.DeviceHight*0.8] ، "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]) ؛
استراحة؛
}
} ؛
شكل. prototype.getScreenWidth = function () {
var s = هذا ؛
إرجاع S.DeviceWidth*0.8 ؛
} ؛
شكل. prototype.getScreenheight = function () {
var s = هذا ؛
إرجاع S.Deviceheight*0.8
} ؛
أخيرًا ، هناك الرمز في bootpage.js:
/*
* bootpage.js
**/
وظيفة 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 = new lbitmap (bitmapdata) ؛
S.Addchild (S.Wallpaper) ؛
} ؛
bootpage.prototype.addtime = function () {
var s = هذا ؛
var Shadow = new ldropshadowfilter (1،1 ، "Black" ، 8) ؛
S.Addchild (S.Timelayer) ؛
S.Timelayer.Graphics.DrawRect (0 ، "" ، [0،0 ، Iosshape.getScreenWidth () ، 150] ، True ، "Black") ؛
// أضف إلى منطقة نص الوقت
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 = جديد 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 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 + "شهر" + date.getDate () + "day" ؛
})
} ؛
bootpage.prototype.addslider = function (bitmapdata) {
var s = هذا ؛
S.Addchild (S.SliderLayer) ؛
S.SliderLayer.graphics.drawRect (0 ، "" ، [0 ، Iosshape.getScreenHeight ()-100 ، eosshape.getScreenWidth () ، 100] ، "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 = "Slide to فتح." ؛
barborder.addchild (movbarcommont) ؛
// إضافة طبقة شريط التمرير
var bar = new lsprite () ؛
bar.x = 35 ؛
bar.y = iosshape.getScreenHeight ()-70 ؛
bar.canmoveBar = false ؛
// أضف أحداث حركة الماوس وحركة الماوس
bar.addeventListener (lmouseevent.mouse_down ، وظيفة (الحدث ، S) {
S.CanmoveBar = صحيح ؛
}) ؛
bar.addeventListener (lmouseevent.mouse_up ، وظيفة (الحدث ، s) {
ltweenlite.to (بار ، 0.5 ، {
X: 35 ،
onComplete: الوظيفة (s) {
S.CanmoveBar = false ؛
}
}) ؛
S.CanmoveBar = false ؛
}) ؛
S.Addchild (BAR) ؛
bar.addeventListener (lmouseevent.mouse_out ، وظيفة (الحدث ، S) {
ltweenlite.to (بار ، 0.5 ، {
X: 35 ،
onComplete: الوظيفة (s) {
S.CanmoveBar = false ؛
}
}) ؛
S.CanmoveBar = false ؛
}) ؛
S.AdDeventListener (lmouseevent.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 (BAR) ؛
// ارسم مربع شريط التمرير
barborder.graphics.drawRoundRect (2 ، "#191818" ، [0،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 ؛
} ؛
منذ هذا الوقت أنا أستمتع بنفسي ، لن أتحدث عن الكود أكثر ، سأتحدث فقط عن استخدامات الشكل. js و bootpage.js. الشكل. js هو فئة تستخدم لرسم قذيفة هاتف iPhone الخاصة بنا ، في حين أن bootpage.js هو فئة لواجهة التمهيد. تختلف وظائف الاثنين ، وهو ما يعادل استخدام. js المستخدمة للتعامل مع مظهر الأجهزة ، ويجري استخدام bootpage.js للتعامل مع الشاشة.
دعنا نترك الباقي لكي ترى. على الرغم من أن الكود طويل بعض الشيء ، إلا أنه ليس منطقيًا. اقرأها ببطء! بالطبع ، قد لا يفهم الطلاب الذين لا يستطيعون الفهم Lufylegend. فيما يلي الموقع الرسمي للمحرك:
وثائق API للمحرك:
الطلاب الذين يشعرون أنه من الصعب قراءة الرموز مع مدونات CSDN ، لا يستخدمون المحرر الخاص بك لفتح الرمز المصدر ومشاهدة عنوان تنزيل التعليمات البرمجية على النحو التالي: