『HTML5製造仿JQuery做用』減速

開言 本篇文章通過開源html5引擎lufylegend完成JQuery滑動效果。能使一個矩形來回減速加快滑行。由於用到了html5裏的canvas，因此如果我們要測驗程序，請用撐持html5的瀏覽器翻開。源碼下載稍後供給。 初始化頁面 首要我們來看看html文件裏的代碼： 


	
	html5 game - 仿jquery
	
	


	
 
 
 

 

 

  
  
  
  

 

  
  loading…… 

 

或許有人疑問，說是用html5，如何不見canvas標籤？？？其實當你運用lufylegend開發時，底子不需求參加canvas標籤。只需求調用該引擎中的init函數並向參數賦值就能主動將canvas標籤加到html文件中。 接下來讓我們看看init用法：init(speed,id,width,height,function,type);其間speed表明頁面替換速度，id表明傳入的一個div的id，庫件進行初始化的時分，會主動將canvas參加到此div內部，width和height別離表明頁面鉅細，function就是初始化完成後調用的函數，最終一個參數type爲null時，會先進行頁面的onload操做，如果init函數調用是在onload以後，那麼需求將此參數設爲LEvent.INIT。 我在js裏是這樣調用init的： init(50,"mylegend",800,400,main); 開端移動 看完初始化有些，我們不仿來看看是如何作到能使一個矩形來回減速加快滑行。首要我們來看看main.js裏的代碼： init(50,"mylegend",800,400,main);
var backLayer;
var speed = 20,x = 0;
function main(){
	//參加層
	initLayer();
	//開端移動
	setInterval(function(){move();},10);
}
function initLayer(){
	//參加佈景層
	backLayer = new LSprite();
	addChild(backLayer);
}
function move(){
	//清空佈景
	backLayer.graphics.drawRect(0,"white",[0,0,800,400],true,"white");
	//製做矩形
	backLayer.graphics.drawRect(0,"dimgray",[x =speed,0,200,200],true,"gray");
	//將速度逐步變小
	speed--;
	//當速度小於或等於-20時，將速度從頭設爲20
	if(speed <= -20){
		speed = 20;
	}
}
 當我初始化結束後，我參加了層，也就LSprite，用法以下： ■效果： LSprite 類是根本顯現列表結構塊，一個可顯現圖形並且也可包括子項的顯現列表節點。 ■可用特色： type:類型 x:座標x y:座標y scaleX:X座標方向上的縮放份額 alpha:透明度 rotate:旋轉視點 visible:可否可見，當設爲false的時分，該LBitmap目標不可視，且內部一切處置都將停止 childList:該目標的一切子項 graphics:指定屬於此 LSprite 的 Graphics 目標，在此 LSprite 中可執行矢量繪圖指令。 box2dBody:聯繫box2dweb後，創立的body2d mask:遮罩 舉個好比： var loader;  
init(200,"mylegend",500,350,main);
function main(){  
    loader = new LLoader();  
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
    loader.load("img.png","bitmapData");  
}  
function loadBitmapdata(event){  
    var bitmapdata = new LBitmapData(loader.content,0,0,64,64);  
    var bitmap = new LBitmap(bitmapdata);
    var layer = new LSprite();
    addChild(layer);
    layer.addChild(bitmap);
}當層初始化完成後，就可以開端移動矩形了。首要我用setInterval不斷地畫矩形，爲了避免讓矩形堆疊，我讓它每畫一次，清空一次屏幕。 //清空佈景
backLayer.graphics.drawRect(0,"white",[0,0,800,400],true,"white");
//製做矩形
backLayer.graphics.drawRect(0,"dimgray",[x =speed,0,200,200],true,"gray");以上代碼完成了不斷畫矩形。可以看到，我是在backLayer層上實施製做的。至於graphics的用法，我將它列在下面： drawRect(      thickness,      lineColor,      pointArray,      isfill,      color  ) ■效果： 畫一個矩形 ■參數： thickness：邊際線粗 lineColor：邊際線色彩 pointArray：[開始座標x,開始座標y,矩形寬width,矩形高height] isfill：可否實心圖形 color：實心色彩 接下來就是改動速度。首要我將每次移動的速度削減1，而後進行一次從頭製做。這樣的畫就可以進行減速加快滑行。速度削減成了負數就會往反方向走，但如果削減的太多就會移出屏幕，因此給它一個約束： if(speed <= -20){
	speed = 20;
}也就是說如果削減的速度達到了-20那就讓矩形往回跑。 這樣一來，來回滑動就作好了。 代碼下載 下載地址：http://download.csdn.net/download/theera_wpyh/5126953 ------------------------------------------------------------- 歡送我們轉載個人文章 轉載請註明：轉自TheEra's Magic Box http://www.fpjinan.com/linked/20130311.do