lufylegend是一個HTML5開源引擎,它實現了利用仿ActionScript3.0的語法進行HTML5的開發， 包含了LSprite，LBitmapData，LBitmap，LLoader，LURLLoader，LTextField，LEvent等多個AS開發人員熟悉的類， 支持Google Chrome，Firefox，Opera，IE9，IOS，Android等多種熱門環境。 利用lufylegend可以輕松的使用面向對象編程，并且可以配合Box2dWeb制作物理游戲， 另外它還內置了LTweenLite緩動類等非常實用的功能, 現在開始使用它吧，它可以讓你更快的進入HTML5的世界！ 
什么是卷軸 
玩過RPG或者橫版格斗的同學應該知道，人物走到屏幕中央后，由于地圖過大，地圖會進行移動，人物則相對靜止不動。這個就是傳說中的卷軸。例如下圖是我的游戲“三國戰線”里的卷軸： 

有了以上的簡介，大家應該明白了什么是卷軸。說白了就是鏡頭跟隨主角的效果。接下來，我們就利用lufylegend.js游戲引擎來實現這個效果。 
原理介紹 
其實實現這個效果的關鍵在于如何使人物靜止，何時移動地圖，以及如何移動地圖。在探究這個兩個問題之前，我們先創建一個結構良好的舞臺層（及一個LSprite對象），以便以后的操作。舞臺結構如下： 
+- 舞臺層 
| 
+- 地圖層 
| 
+- 人物層 
可見舞臺層就是地圖層和人物層的父元素，并且人物層在地圖層上方，畢竟人物是站在地圖上的。我們知道，子對象的坐標是相對于父對象的，所以移動父對象，子對象會跟著移動。這點要先弄明白。 
如何使人物靜止呢？何時移動地圖呢？如何移動地圖呢？也許你會想，首先用if(xxx){...}來判斷人物的坐標是否達到屏幕中央，如果是，則移動地圖對象，如果不是則移動人物對象。這么做的話就麻煩了。其實有更簡單的方法： 
卷軸/不卷軸時，我們的人物都是在移動，但是如果人物達到屏幕中央時，要開始卷軸了，我們的舞臺層就進行與人物速度方向相反、大小相同的移動，那么人物的相對于canvas畫布的位移就抵消了，看上去就是靜止的，而地圖就跟著父類向反方向移動。這個類似于拍古裝電影，拍兩個人一邊騎馬一邊談話。如果人和馬在前進，攝像機以相同的速度跟拍，那么得到的畫面就是人物并沒有移動，而人物背后風景是在移動的。 
接下來看實現代碼。 
實現代碼 
以下是含有詳細注釋的代碼：