의견 : HTML5를 사용하여 Apple의 운영 체제를 모방하여 웹 플랫폼에서 실행할 수있는 iOS를 만들 수 있습니다. 오늘 엔터테인먼트를하고 부팅 인터페이스를 시작합시다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 모든 사람에게 도움이되기를 바랍니다.
오늘 나는 갑자기 HTML5를 사용하여 Apple의 운영 체제를 모방하여 웹 플랫폼에서 실행할 수있는 iOS를 만들었습니다.물론, 나는 운영 체제를 개발해야하며, 또 다른 백년 동안 산으로 돌아온 후에 그것에 대해 이야기 할 것입니다. 오늘 엔터테인먼트를하고 부팅 인터페이스를 시작합시다.
완성 된 사진 :
사진이 나에게 PSED가 될까봐 걱정되며 다음 주소 테스트를 직접 입력 할 수 있습니다.
Lufylegend는 실제로 잘 포장되어 있기 때문에이 개발은 여전히이 엔진으로 수행됩니다. 코드는 많지 않으며 관심있는 친구들은 직접 살펴볼 수 있습니다.
index.html의 코드 :
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8" />
<title> iPhone </title>
<스크립트 src = "./ lufylegend-1.7.7.min.js"> </script>
<스크립트 src = "./ js/main.js"> </script>
</head>
<body>
<div> 로딩 ... </div>
</body>
</html>
main.js의 코드 :
init (50, "mylegend", 450,640, main);
lglobal.setdebug (true);
var loaddata = [
{path : "./ js/shape.js", type : "js"},
{path : "./ js/bootpage.js", type : "js"},
{이름 : "Wallpaper", Path : "./ Images/Wall_paper.jpg"}}
];
var datalist = {};
var backlayer, iPhonelayer, Screenlayer, ButtonLayer;
var iosshape;
var bootpage;
함수 main () {
lloadmanage.load (loaddata, null, gameinit);
}
함수 gameInit (결과) {
Datalist = 결과;
// 초기화 계층
initlayer ();
// iPhone 케이스를 추가합니다
addShape ();
// 부팅 인터페이스에 추가합니다
addback ();
}
함수 initlayer () {
// 배경 레이어
백 레이어 = 새로운 lsprite ();
AddChild (백 레이어);
}
함수 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);
}
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 = new lsprite ();
S.addchild (S.Screenlayer);
// 자신을 보여주십시오
S._showself ();
}
shape.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 = [섀도우];
// 화면을 그립니다
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], true, "#191818");
S.HomeButtonlayer.graphics.DrawRoundRect (3, "화이트", [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
**/
함수 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 = "화이트";
S.timetext.weight = "Bold";
s.timetext.filters = [섀도우];
// 날짜 텍스트 영역을 추가합니다
s.datetext = new ltextfield ();
s.datetext.size = 20;
s.datetext.x = 110;
s.datetext.y = 100;
s.datetext.color = "화이트";
s.datetext.weight = "Bold";
s.datetext.filters = [섀도우];
S.addchild (S.timetext);
S.addchild (s.datetext);
// 타임 라인 이벤트를 통해 날짜를 업데이트합니다
s.addeventListener (levent.enter_frame, function (s) {
var 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 + "month" + date.getDate () + "day";
})
};
bootpage.prototype.addslider = function (bitmapdata) {
var s = 이것;
S.addchild (S.SliderLayer);
s.sliderlayer.graphics.drawRect (0, "", [0, iosshape.getScreenheight () -100, iosshape.getScreenWidth (), 100], true, "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 = "화이트";
MoveBarcommont.text = "잠금 해제하려면 슬라이드";
Barborder.addchild (Movbarcommont);
// 슬라이더 레이어를 추가합니다
var bar = new lsprite ();
bar.x = 35;
bar.y = iosshape.getScreenHeight () -70;
bar.canmovebar = false;
// 마우스 클릭 및 마우스 이동 이벤트를 추가합니다
bar.addeventListener (lmouseevent.mouse_down, function (event, s) {
s.canmovebar = true;
});
bar.addeventListener (lmouseevent.mouse_up, function (event, s) {
ltweenlite.to (bar, 0.5, {
x : 35,
oncomplete : 함수 {
s.canmovebar = false;
}
});
s.canmovebar = false;
});
S.addchild (바);
bar.addeventListener (lmouseevent.mouse_out, function (event, s) {
ltweenlite.to (bar, 0.5, {
x : 35,
oncomplete : 함수 {
s.canmovebar = false;
}
});
s.canmovebar = false;
});
s.addeventListener (lmouseevent.mouse_move, function (event) {
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], True, "Black");
Barborder.alpha = 0.7;
// 슬라이더를 그립니다
bar.graphics.DrawRoundRect (2, "Dimgray", [0,0,70,40,5], True, "LightGray");
bar.alpha = 0.7;
};
이번에는 저 자신을 즐겁게하고있는 이후 코드에 대해 더 이야기하지 않을 것입니다. Shape.js 및 BootPage.js의 사용에 대해서만 이야기 할 것입니다. shape.js는 iPhone Phone Shell을 그리는 데 사용되는 클래스이며 BootPage.js는 Boot 인터페이스의 클래스입니다. 이 둘의 기능은 다르며, 이는 Shape.js가 하드웨어의 모양을 처리하는 데 사용되는 Shape.js와 디스플레이를 처리하는 데 사용되는 BootPage.js와 같습니다.
나머지는 당신이 볼 수 있도록 떠나자. 코드는 약간 길지만 논리적은 아닙니다. 천천히 읽으십시오! 물론 이해할 수없는 학생들은 Lufylegend를 이해하지 못했을 수도 있습니다. 다음은 엔진의 공식 웹 사이트입니다.
엔진 API 문서 :
CSDN 블로그로 코드를 읽기가 어렵다고 생각하는 학생들은 편집기를 사용하여 소스 코드를 열고 소스 코드 다운로드 주소를 다음과 같이보십시오.