今天,我突然想到,使用Html5可以模仿苹果的操作系统制作在Web平台上工作的ios。
当然,开发操作系统,等我再回山修炼一百年再说吧。 今天先做娱乐,先做开机接口。
完成的照片:
图为经过我PS后的同学担心直接进入下一个地址测试:
3358 www.cn blogs.com/yor hom/articles/3163078.html
因为lufylegend确实打包得很好,所以这次开发是在这个引擎上进行的。 代码很少,感兴趣的朋友可以直接看看。
index.html代码:
复制代码就是:
iphone loading. 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;
功能主
loadmanage.load(loaddata,null,gameInit );
}
功能gameinit (result ) {
datalist=result;
//初始化层
initLayer (;
放进iphone盒子里
addShape (;
//打开启动接口
添加后退(;
}
功能init layer
//背景图层
backLayer=new LSprite (;
addchild (后层;
}
功能添加形状
IOsshape=newshape('iphone ',400,600 );
iosShape.x=15;
iosShape.y=5;
backlayer.addchild(IOsshape;
}
功能添加后退
bootPage=new BootPage (;
bootPage.x=40;
bootPage.y=40;
varwallpaperwidth=IOs shape.get screen width (;
varwallpaperheight=IOs shape.get screen height (;
bootpage.add wallpaper (newl bitmapdata (datalist (' wallpaper ',200,480,wallPaperWidth,wallPaperHeight ) ) );
bootPage.addTime (;
bootPage.addSlider (;
IOsshape.addchild(BootPage;
}
Shape.js代码:
复制代码就是:
/*
* Shape.js
*/
functionshape(type、width、height ) {
var s=this;
基本(s,LSprite,[];
s.x=0;
s.y=0;
s.deviceWidth=width;
s .设备高度=高度;
s.type=type;
//覆盖层
s.shapeLayer=new LSprite (;
s.addchild(s.shapelayer );
//Home按钮层
s.homeButtonLayer=new LSprite (;
s.addchild(s.homebuttonlayer;
//屏幕层
s.screenLayer=new LSprite (;
s.addchild(s.screenlayer;
//显示自己
s._showSelf();
}
Shape.prototype._showSelf = function(){
var s = this;
switch(s.type){
case "IPHONE":
//画外壳
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];
//画屏幕
s.screenLayer.graphics.drawRect(0,"black",[s.deviceWidth/10,s.deviceWidth/10,s.deviceWidth*0.8,s.deviceHeight*0.8],true,"white");
//画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]);
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
};
最后是BootPage.js里的代码:
复制代码代码如下:
/*
* 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;
//加入背景图片
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");
//加入时间文本区
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];
//加入日期文本区
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);
//通过时间轴事件更新日期
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 + "月" + date.getDate() + "日";
})
};
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;
//加入滑块框层
var barBorder = new LSprite();
barBorder.x = 35;
barBorder.y = iosShape.getScreenHeight()-70;
s.addChild(barBorder);
//加入滑块说明文字
var moveBarCommont = new LTextField();
moveBarCommont.size = 12;
moveBarCommont.x = 80;
moveBarCommont.y = 10;
moveBarCommont.color = "white";
moveBarCommont.text = "Slide to unlock.";
barBorder.addChild(moveBarCommont);
//加入滑块层
var bar = new LSprite();
bar.x = 35;
bar.y = iosShape.getScreenHeight()-70;
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;
}
});
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);
//画出滑块框
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;
};
由于本次是偶自娱自乐,所以代码就不多讲了,只讲一下Shape.js和BootPage.js的用途。Shape.js是用来绘画我们iphone手机外壳用的类,而BootPage.js是开机界面的类。两者的功能不同,相当于Shape.js用来处理硬件外观,BootPage.js用来处理显示。
其他的就留个大家自己看吧。虽然代码有点长,但是都不带逻辑性。慢慢读就Ok!当然,读不懂的同学可能是没有了解过lufylegend,以下是引擎官方的网站:
http://lufylegend.com/lufylegend
引擎API文档:
http://lufylegend.com/lufylegend/api
觉得用CSDN博客阅读代码有些困难的同学,不仿用你的编辑器打开源代码看看,源代码下载地址如下:
http://files.cnblogs.com/yorhom/iphone01.rar