Comments: Html5 can be used to build an ios system that can run on the Web platform like the Apple operating system. Today, we will entertain you and create a boot interface. If you are interested, refer to the following, I hope to help everyone. Today, I suddenly think that Html5 can be used to build an ios platform that can run on the Web platform like the Apple operating system.
Of course, we need to develop an operating system. Let's talk about it again after I spend another one hundred years practicing it. Let's entertain yourself today and create a boot interface first.
Image after completion:
I am worried that the image will be taken to the following URL for testing:
Http://www.cnblogs.com/yorhom/articles/3163078.html
Because lufylegend is indeed well encapsulated, this engine is used for this development. There are not many codes. If you are interested, you can take a look.
Code in index.html:
The Code is as follows:
<! 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 id = "mylegend"> loading... </div>
</Body>
</Html>
Code in Main. js:
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 the iphone Shell
AddShape ();
// Add the 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:
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 a 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];
// Screen Painting
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. Ergonomic width * 0.8;
};
Shape. prototype. getScreenHeight = function (){
Var s = this;
Return s. deviceHeight * 0.8
};
The code in BootPage. js is as follows:
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 a 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, "", [150, iosShape. getScreenWidth (),], true, "black ");
// Add to Time Zone
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 to date Partition
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 the date through the 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 the slider frame layer
Var barBorder = new LSprite ();
BarBorder. x = 35;
BarBorder. y = iosShape. getScreenHeight ()-70;
S. addChild (barBorder );
// Add the slider description text
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 the slider Layer
Var bar = new LSprite ();
Bar. x = 35;
Bar. y = iosShape. getScreenHeight ()-70;
Bar. canMoveBar = false;
// Add the mouse clicking and mouse moving 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", [, 5], true, "black ");
BarBorder. alpha = 0.7;
// Draw the slider
Bar. graphics. drawRoundRect (2, "dimgray", [, 5], true, "lightgray ");
Bar. alpha = 0.7;
};
Since this is a self-Entertaining task, I will not talk about the code much. I will only talk about the use of Shape. js and BootPage. js. Shape. js is a class used to draw the iphone shell, while BootPage. js is a class for the boot interface. The two functions are different, which is equivalent to Shape. js used to process the hardware appearance, and BootPage. js used to process the display.
Let's take a look at others. Although the Code is a little long, it does not have logic. Read it slowly! Of course, those who do not understand lufylegend may not be familiar with lufylegend. The following is the official engine Website:
Http://lufylegend.com/lufylegend
Engine API documentation:
Http://lufylegend.com/lufylegend/api
If you think it is difficult to use the CSDN blog to read the code, open the source code in your editor. The source code is as follows:
Http://files.cnblogs.com/yorhom/iphone01.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
