Html5 implements iPhone boot interface sample code_html5 tutorial skills

Today I suddenly had an idea and thought that I could use Html5 to imitate the Apple operating system to make an ios that can run on the Web platform.
Of course, I have to develop an operating system and wait until I return to the mountain to practice for another hundred years. Let’s have fun today and make a startup interface first.
The completed picture:

Students who are worried that the picture has been photoshopped by me can go directly to the following address to test:
http://www.cnblogs.com/yorhom/articles /3163078.html
Since lufylegend is packaged really well, this development is still done using this engine. There is not much code, interested friends can take a look directly.
Code in index.html:

Copy code

The code is as follows:

> ;

loading...

Code in Main.js:

Copy code

The code is as follows:

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 iphone shell
addShape();
//Add startup 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);
}

The code in Shape.js:

Copy the code

The code is as follows:

/*
* Shape.js
**/
function Shape(type,width,height){
var s = this;
base(s,LSprite ,[]);
s.x = 0;
s.y = 0;
s.deviceWidth = width;
s.deviceHeight = height;
s.type = type;
/ /Shell 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);
//Display itself
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
};

The last is the code in BootPage.js:

Copy the code

The code is as follows:

/*
* BootPage.js
**/
function BootPage(){
var s = this;
base(s,LSprite,[]);
s.x = 0;
s.y = 0;
s.timeLayer = new LSprite();
s.sliderLayer = new LSprite();
}
BootPage.prototype.addWallPaper = function( bitmapdata){
var s = this;
//Add background image
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 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];
//Join 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 through timeline event
s.addEventListener(LEvent.ENTER_FRAME,function(s){
var date = new Date();
if(date.getMinutes() if(date.getHours() s.timeText.text = "0" date.getHours() ":0" date .getMinutes();
}else{
s.timeText.text = date.getHours() ":0" date.getMinutes();
}
}else{
if( date.getHours() 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 the slider frame layer
var barBorder = new LSprite();
barBorder.x = 35;
barBorder.y = iosShape.getScreenHeight()-70;
s.addChild( barBorder);
//Add slider description
var moveBarCommont = new LTextField();
moveBarCommont.size = 12;
moveBarCommont.x = 80;
moveBarCommont.y = 10 ;
moveBarCommont.color = "white";
moveBarCommont.text = "Slide to unlock.";
barBorder.addChild(moveBarCommont);
//Add slider layer
var bar = new LSprite();
bar.x = 35;
bar.y = iosShape.getScreenHeight()-70;
bar.canMoveBar = false;
//Add mouse click and mouse movement Event
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 }
});
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 is just for my own entertainment, I won’t go into much detail about the code. I will only talk about the uses of Shape.js and BootPage.js. Shape.js is the class used to draw the shell of our iPhone, and BootPage.js is the class for the startup 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.
I’ll leave the rest for you to see for yourself. Although the code is a bit long, it is not logical. Just read it slowly! Of course, students who don’t understand may not know about lufylegend. The following is the official website of the engine:
http://lufylegend.com/lufylegend
Engine API documentation:
http://lufylegend.com /lufylegend/api
For students who find it difficult to read code using CSDN blogs, why not use your editor to open the source code and take a look. The source code download address is as follows:
http://files.cnblogs.com/ yorhom/iphone01.rar