Comment: You can use Html5 to imitate Apple's operating system to make an ios that can run on the web platform. Let's have some entertainment today and start a boot interface. Interested friends can refer to it. I hope it will be helpful to everyone.
Today I suddenly thought about using Html5 to imitate Apple's operating system to make an ios that can run on the web platform.Of course, I have to develop an operating system, and I will talk about it after I return to the mountains for another hundred years of practice. Let’s have some entertainment today and start a boot interface.
Completed pictures:
I am worried that the picture will be PSed by me, and I can directly enter the following address test:
Since lufylegend is indeed well packaged, this development is still done with this engine. There is not much code, and interested friends can take a look directly.
Code in 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>loading...</div>
</body>
</html>
Code in 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"},
{name:"wallpaper",path:"./images/wall_paper.jpg"}
];
var datalist = {};
var backLayer, iphoneLayer, screenLayer, buttonLayer;
var iosShape;
var bootPage;
function main(){
LLoadManage.load(loadData, null, gameInit);
}
function gameInit(result){
datalist = result;
//Initialization layer
initLayer();
//Add an iPhone case
addShape();
//Add to boot interface
addBack();
}
function initLayer(){
//Background layer
backLayer = new LSprite();
addChild(backLayer);
}
function 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.getScreenHeight();
bootPage.addWallPaper(new LBitmapData(datalist["wallpaper"],200,480,wallPaperWidth,wallPaperHeight));
bootPage.addTime();
bootPage.addSlider();
iosShape.addChild(bootPage);
}
Code in Shape.js:
/*
* Shape.js
**/
function Shape(type,width,height){
var s = this;
base(s,LSprite,[]);
sx = 0;
sy = 0;
s.deviceWidth = width;
s.deviceHeight = height;
s.type = type;
//Case layer
s.shapeLayer = new LSprite();
s.addChild(s.shapeLayer);
//Home button layer
s.homeButtonLayer = new LSprite();
s.addChild(s.homeButtonLayer);
//Screen layer
s.screenLayer = new LSprite();
s.addChild(s.screenLayer);
//Show yourself
s._showSelf();
}
Shape.prototype._showSelf = function(){
var s = this;
switch(s.type){
case "IPHONE":
//Draw the shell
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];
//Draw the screen
s.screenLayer.graphics.drawRect(0,"black",[s.deviceWidth/10,s.deviceWidth/10,s.deviceWidth*0.8,s.deviceHeight*0.8],true,"white");
//Draw the Home button
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]);
break;
}
};
Shape.prototype.getScreenWidth = function(){
var s = this;
return s.deviceWidth*0.8;
};
Shape.prototype.getScreenHeight = function(){
var s = this;
return s.deviceHeight*0.8
};
Finally, there is the code in BootPage.js:
/*
* BootPage.js
**/
function 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;
//Add a background picture
s.wallPaper = new LBitmap(bitmapdata);
s.addChild(s.wallPaper);
};
BootPage.prototype.addTime = function(){
var s = this;
var shadow = new LDropShadowFilter(1,1,"black",8);
s.addChild(s.timeLayer);
s.timeLayer.graphics.drawRect(0,"",[0,0,iosShape.getScreenWidth(),150],true,"black");
//Add to the time text area
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];
//Add date text area
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);
//Update date via timeline event
s.addEventListener(LEvent.ENTER_FRAME,function(s){
var date = new Date();
if(date.getMinutes() < 10){
if(date.getHours() < 10){
s.timeText.text = "0" + date.getHours() + ":0" + date.getMinutes();
}else{
s.timeText.text = date.getHours() + ":0" + date.getMinutes();
}
}else{
if(date.getHours() < 10){
s.timeText.text = "0" + date.getHours() + ":" + date.getMinutes();
}else{
s.timeText.text = date.getHours() + ":" + date.getMinutes();
}
}
s.dateText.text = date.getMonth() + 1 + "month" + date.getDate() + "day";
})
};
BootPage.prototype.addSlider = function(bitmapdata){
var s = this;
s.addChild(s.sliderLayer);
s.sliderLayer.graphics.drawRect(0,"",[0,iosShape.getScreenHeight()-100,iosShape.getScreenWidth(),100],true,"black");
s.sliderLayer.alpha = 0.3;
//Add slider frame layer
var barBorder = new LSprite();
barBorder.x = 35;
barBorder.y = iosShape.getScreenHeight()-70;
s.addChild(barBorder);
//Add slider instructions
var moveBarCommont = new LTextField();
moveBarCommont.size = 12;
moveBarCommont.x = 80;
moveBarCommont.y = 10;
moveBarCommont.color = "white";
moveBarCommont.text = "Slide to unlock.";
barBorder.addChild(movBarCommont);
//Add slider layer
var bar = new LSprite();
bar.x = 35;
bar.y = iosShape.getScreenHeight()-70;
bar.canMoveBar = false;
//Add mouse click and mouse movement events
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:function(s){
s.canMoveBar = false;
}
});
s.canMoveBar = false;
});
s.addChild(bar);
bar.addEventListener(LMouseEvent.MOUSE_OUT,function(event,s){
LTweenLite.to(bar,0.5,{
x:35,
onComplete:function(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);
//Draw the slider box
barBorder.graphics.drawRoundRect(2,"#191818",[0,0,250,40,5],true,"black");
barBorder.alpha = 0.7;
//Draw the slider
bar.graphics.drawRoundRect(2,"dimgray",[0,0,70,40,5],true,"lightgray");
bar.alpha = 0.7;
};
Since this time I am entertaining myself, I won’t talk about the code more, I will only talk about the uses of Shape.js and BootPage.js. Shape.js is a class used to draw our iPhone phone shell, while BootPage.js is a class for the boot interface. The functions of the two are different, which is equivalent to Shape.js being used to handle the appearance of the hardware, and BootPage.js being used to handle the display.
Let's leave the rest for you to see. Although the code is a bit long, it is not logical. Read it slowly! Of course, students who cannot understand may not have understood lufylegend. The following is the official website of the engine:
Engine API documentation:
Students who feel it is difficult to read codes with CSDN blogs, don’t use your editor to open the source code and see the source code download address as follows: