HTML5 で iPhone ブート インターフェイスのサンプル コードを実装_html5 チュートリアル スキル

今日、突然思いつき、Html5を使ってAppleのOSを模倣して、Webプラットフォーム上で動作するiosを作れないかと考えました。
もちろん、私はオペレーティングシステムを開発し、山に戻って修行するまでさらに百年待たなければなりません。今日は楽しんで、最初に起動インターフェイスを作成しましょう。
完成した写真:

写真が私によってフォトショップ加工されているのではないかと心配な生徒は、次のアドレスに直接アクセスしてテストしてください:
http://www.cnblogs.com /yorhom/articles /3163078.html
lufylegend は非常によくパッケージ化されているため、この開発は依然としてこのエンジンを使用して行われています。コードはそれほど多くないので、興味のある友達は直接見てみることができます。
index.html のコード:

コードをコピー

コードは次のとおりです:

;

>


Main.js のコード:

コードをコピー

コードは次のとおりです。 init(50,"mylegend",450,640,main);

LGlobal.setDebug(true); : "./js/Shape.js",type:"js"}、

{path:"./js/BootPage.js",type:"js"}、

{name:"wallpaper" 、パス:"./images/wall_paper.jpg"}
];
var backLayer,screenLayer,buttonLayer; ;
function main(){
LLoadManage.load(loadData,null,gameInit);
function gameInit(result){
datalist = result;
initLayer();
//iPhone シェルを追加
addShape();
//起動インターフェイスを追加
}
関数 initLayer(); 🎜 >//背景レイヤー
backLayer = new LSprite();
addChild(backLayer)
}
function addShape(){
iosShape = new Shape("IPHONE",400,600); ;
iosShape.x = 15;
backLayer.addChild(iosShape);
関数 addBack(){
bootPage() ;
bootPage.x = 40;
var WallPaperWidth = iosShape.getScreenWidth();
bootPage.addWallPaper( new LBitmapData(datalist["wallpaper"],200,480,wallPaperWidth,wallPaperHeight);
bootPage.addSlider();
iosShape.addChild(bootPage);


Shape.js のコード:





コードをコピーします


コードは次のとおりです


/*
* Shape.js
**/
function Shape(type,width,height){
var s = this; Base(s,LSprite ,[]);
s.x = 0;

s.deviceHeight = 高さ; ;
/ /シェルレイヤー
s.shapeLayer = new LSprite();
s.addChild(s.shapeLayer);

//ホームボタンレイヤー

s.homeButtonLayer( ); s.addChild(s.homeButtonLayer); // スクリーンレイヤーs.screenLayer = new LSprite();自身を表示します s._showSelf();

}

Shape.prototype._showSelf = function(){

switch(s.type){
case "IPHONE":
//シェルを描画します
varshadow = 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];// 画面を描画します
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,"white",[s.deviceWidth/2-10,s.deviceHeight*0.87 s.deviceWidth/10 - 10,20 ,20,5]);
break;
}
}
Shape.prototype.getScreenWidth = function(){
var s = this; 0.8;
};
Shape.prototype.getScreenHeight = function(){
return s.deviceHeight*0.8
};
最後は BootPage.js のコードです:

コードをコピーします

コードは次のとおりです:

/*
* BootPage.js
**/
function BootPage(){
var s = this; );
s.x = 0;
s.timeLayer = new LSprite();
BootPage.prototype .addWallPaper = function( bitmapdata){
var s = this;
s.wallPaper = new LBitmap(bitmapdata);
s.addChild(s.wallPaper); 🎜>};
BootPage.prototype.addTime = function(){
var s = this;
varshadow = new LDropShadowFilter(1,1,"black",8); addChild(s.timeLayer );
s.timeLayer.graphics.drawRect(0,"",[0,0,iosShape.getScreenWidth(),150],true,"black");時間テキスト領域
s.timeLayer.alpha = 0.3;
s.timeText.x = 70;
s.timeText.y = 20; >s.timeText.size = 50;
s.timeText.weight = "太字"; >//日付テキスト領域を結合
s.dateText = new LTextField();
s.dateText.x = 110; 100;
s.dateText.color = "白";
s.dateText.filters = [シャドウ]; timeText);
s.addChild(s.dateText);
//タイムラインイベントを通じて日付を更新します
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() < 10){
s.timeText.text = "0" date.getHours() ":" date.getMinutes();
}else{
s .timeText.text = date.getHours() ":" date.getMinutes();
}
}
s.dateText.text = date.getMonth() 1 "月" date.getDate() "日";
})
};
BootPage.prototype.addSlider = function(bitmapdata){
s.addChild(s.sliderLayer); >s.sliderLayer .graphics.drawRect(0,"",[0,iosShape.getScreenHeight()-100,iosShape.getScreenWidth(),100],true,"black"); 0.3;
//スライダー フレーム レイヤーを追加します
var barBorder = new LSprite();
barBorder.y = iosShape.getScreenHeight()-70; s.addChild( barBorder);
//スライダーの説明を追加します
var moveBarCommont = new LTextField();
moveBarCommont.x = 80; = 10 ;
moveBarCommont.color = "white";
moveBarCommont.text = "スライドしてロックを解除します。";
barBorder.addChild(moveBarCommont); bar = new LSprite();
bar.x = 35;
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: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;
}
}); 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);
//スライダーボックスを描画します
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;
};


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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。