Comentário: Você pode usar o HTML5 para imitar o sistema operacional da Apple para criar um iOS que possa ser executado na plataforma da Web. Vamos fazer um pouco de entretenimento hoje e iniciar uma interface de inicialização. Amigos interessados podem se referir a ele. Espero que seja útil para todos.
Hoje, de repente, pensei em usar o HTML5 para imitar o sistema operacional da Apple para criar um iOS que possa ser executado na plataforma da web.Obviamente, tenho que desenvolver um sistema operacional e falarei sobre isso depois de voltar às montanhas por mais cem anos de prática. Vamos fazer algum entretenimento hoje e iniciar uma interface de inicialização.
Fotos concluídas:
Estou preocupado que a imagem seja PSED por mim e posso inserir diretamente o seguinte teste de endereço:
Como o Lufylegend é realmente bem embalado, esse desenvolvimento ainda é feito com este motor. Não há muito código, e amigos interessados podem dar uma olhada diretamente.
Código em 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> Carregando ... </div>
</body>
</html>
Código em main.js:
init (50, "mylegend", 450.640, principal);
Lglobal.setDebug (true);
var loadData = [
{path: "./ js/shape.js", tipo: "js"},
{path: "./ js/bootpage.js", tipo: "js"},
{Nome: "Wallpaper", Path: "./ Images/Wall_paper.jpg"}
];
var datalist = {};
VAR Backlayer, iPhoneLayer, ScreenLayer, ButtonLayer;
var iosshape;
Var BootPage;
função main () {
LloadManage.Load (loadData, null, gameinit);
}
function gameinit (resultado) {
datalist = resultado;
// camada de inicialização
initLayer ();
// Adicione uma caixa do iPhone
addShape ();
// Adicionar à interface de inicialização
addback ();
}
função initLayer () {
// camada de fundo
Backlayer = new LSPRITE ();
addChild (Backlayer);
}
função addShape () {
iosshape = new Shape ("iPhone", 400.600);
iosshape.x = 15;
iosshape.y = 5;
Backlayer.addchild (Iosshape);
}
function addback () {
bootpage = new bootpage ();
bootpage.x = 40;
bootpage.y = 40;
var wallpaperwidth = iosshape.getScreenwidth ();
var wallpaperHeight = IOSSHAPE.GETSCREENHEIX ();
bootpage.addwallpaper (novo lbitmapdata (Datalist ["Wallpaper"], 200.480, largura de papel de parede, wallpaperHeight));
bootpage.addtime ();
bootpage.addslider ();
iosshape.addchild (bootpage);
}
Código em forma.js:
/*
* Shape.js
**/
forma de função (tipo, largura, altura) {
var s = this;
base (s, lsprite, []);
sx = 0;
sy = 0;
s.DeviceWidth = Width;
s.deviceHeight = altura;
s.Type = tipo;
// camada de caixa
s.ShapeLayer = new LSPRITE ();
S.AddChild (S.Shapelyer);
// camada de botão inicial
s.homebuttonlayer = new lsprite ();
S.Addchild (S.HomeButtonLayer);
// camada de tela
S.ScreenLayer = new LSPrite ();
S.Addchild (S.ScreenLayer);
// Mostre -se
s._showself ();
}
Shape.prototype._showself = function () {
var s = this;
Switch (S.Type) {
Case "iPhone":
// Desenhe a concha
var Shadow = novo ldropshadowfilter (15,45, "Black", 20);
S.ShapeLayer.Graphics.DrawRoundRect (10, "Black", [0,0, S.DeviceWidth, S.DeviceHeight, 15], True, "Black");
S.ShapeLayer.Filters = [Shadow];
// desenhe a tela
S.ScreenLayer.Graphics.DrawRect (0, "Black", [S.DeviceWidth/10, S.DeviceWidth/10, S.DeviceWidth*0.8, S.DeviceHeight*0.8], verdadeiro, "branco");
// desenhe o botão home
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]);
quebrar;
}
};
Shape.prototype.getScreenWidth = function () {
var s = this;
retornar s.DeviceWidth*0,8;
};
Shape.prototype.getScreenHeight = function () {
var s = this;
Retorno S.DeviceHeight*0.8
};
Finalmente, existe o código no bootpage.js:
/*
* Bootpage.js
**/
função bootpage () {
var s = this;
base (s, lsprite, []);
sx = 0;
sy = 0;
s.TimeLayer = new LSPRITE ();
s.sliderLayer = new lsprite ();
}
Bootpage.prototype.addwallpaper = function (bitmapdata) {
var s = this;
// Adicione uma imagem de fundo
S.Wallpaper = novo lbitmap (bitmapdata);
S.Addchild (S.Wallpaper);
};
Bootpage.prototype.addtime = function () {
var s = this;
var Shadow = novo ldropshadowfilter (1,1, "preto", 8);
S.Addchild (S.TimeLayer);
s.Timelayer.Graphics.DrawRect (0, "", [0,0, IOSSHAPE.GETSCREENWIDTH (), 150], True, "Black");
// Adicione à área de texto de tempo
s.timelayer.alpha = 0,3;
s.timeText = new ltextfield ();
s.timetext.x = 70;
s.timetext.y = 20;
s.timetext.size = 50;
s.timetext.color = "branco";
s.timetext.weight = "BOLD";
s.timetext.Filters = [Shadow];
// Adicione a área de texto de data
s.dateText = new ltextfield ();
s.datetext.size = 20;
s.datetext.x = 110;
s.datetext.y = 100;
s.datetext.color = "branco";
s.datetext.weight = "BOLD";
s.dateText.Filters = [Shadow];
S.AddChild (S.TimeText);
S.AddChild (S.DateText);
// Data de atualização via evento da linha do tempo
s.AddeventListener (LEVEV.ENTER_FRAME, FUNÇÃO (S) {
var date = new Date ();
if (date.getminutes () <10) {
if (date.gethours () <10) {
s.timetext.text = "0" + date.gethours () + ": 0" + date.getminutes ();
}outro{
s.timetext.text = date.gethours () + ": 0" + date.getminutes ();
}
}outro{
if (date.gethours () <10) {
s.timetext.text = "0" + date.gethours () + ":" + date.getminutes ();
}outro{
s.timetext.text = date.gethours () + ":" + date.getminutes ();
}
}
s.dateText.text = date.getMonth () + 1 + "mês" + date.getDate () + "dia";
})
};
Bootpage.prototype.addslider = function (bitmapdata) {
var s = this;
S.Addchild (S.SliderLayer);
s.sliderLayer.Graphics.DrawRect (0, "", [0, iOSSHAPE.GETSCREENHEIX ()-100, IOSSHAPE.GETSCREENWIDTH (), 100], verdadeiro, "preto");
s.sliderLayer.alpha = 0,3;
// Adicionar camada de quadro deslizante
var Barborder = new LSPrite ();
barborder.x = 35;
barborder.y = iosshape.getScreenHeight ()-70;
S.Addchild (Barborder);
// Adicione instruções deslizantes
var moveBarCommont = new ltextfield ();
moveBarcommont.size = 12;
moveBarcommont.x = 80;
moveBarcommont.y = 10;
movebarcommont.color = "branco";
moveBarcommont.Text = "Slide to desbloqueio";
barborder.addchild (movbarcommont);
// Adicione a camada deslizante
var bar = novo lsprite ();
bar.x = 35;
bar.y = iosshape.getScreenHeight ()-70;
bar.canmovebar = false;
// Adicionar eventos de clique do mouse e movimento do mouse
bar.addeventlistener (lmouseevent.mouse_down, função (evento, s) {
S.CanmoveBar = True;
});
bar.addeventListener (lmouseevent.mouse_up, função (evento, s) {
Ltweenlite.to (bar, 0,5, {
x: 35,
Oncomplete: Função (s) {
S.CanMoveBar = false;
}
});
S.CanMoveBar = false;
});
S.Addchild (bar);
bar.addeventListener (lmouseevent.mouse_out, function (evento, s) {
Ltweenlite.to (bar, 0,5, {
x: 35,
Oncomplete: Função (s) {
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 (bar);
// desenhe a caixa deslizante
Barborder.Graphics.DrawRoundRect (2, "#191818", [0,0,250,40,5], verdadeiro, "preto");
barborder.alpha = 0,7;
// Desenhe o controle deslizante
Bar.Graphics.DrawRoundRect (2, "Dimgray", [0,0,70,40,5], verdadeiro, "LightGray");
bar.alpha = 0,7;
};
Desde então, estou me divertindo, não vou falar mais sobre o código, vou falar apenas sobre os usos do Shape.js e BootPage.js. Shape.js é uma aula usada para desenhar nosso shell de telefone para iPhone, enquanto o bootpage.js é uma classe para a interface de inicialização. As funções dos dois são diferentes, o que é equivalente ao Shap.js sendo usado para lidar com a aparência do hardware e o bootpage.js sendo usado para lidar com a tela.
Vamos deixar o resto para você ver. Embora o código seja um pouco longo, não é lógico. Leia devagar! Obviamente, os alunos que não conseguem entender podem não ter entendido Lufylegend. A seguir, o site oficial do mecanismo:
Documentação da API do motor:
Os alunos que acham que é difícil ler códigos com blogs da CSDN, não usam seu editor para abrir o código fonte e ver o endereço de download do código -fonte da seguinte forma: