DIV CSS 佈局教程網

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畫布的位移就抵消了，看上去就是靜止的，而地圖就跟著父類向反方向移動。這個類似於拍古裝電影，拍兩個人一邊騎馬一邊談話。如果人和馬在前進，攝像機以相同的速度跟拍，那麼得到的畫面就是人物並沒有移動，而人物背後風景是在移動的。 
接下來看實現代碼。 
實現代碼 
以下是含有詳細注釋的代碼： 
XML/Html Code復制內容到剪貼板

1. LInit(30, 'mydemo', 700, 480, main);    
2. // 移動方向，null代表沒移動    
3. var direction = null;    
4. // 小鳥，舞台層，背景對象    
5. var bird, stageLayer, bg;    
6. // 每次移動的長度    
7. var step = 5;    
8. function main () {    
9. // 資源列表    
10. var loadList = [    
11. {name : 'bird', path : './bird.png'},    
12. {name : 'bg', path : './bg.jpg'}    
13. ];    
14. // 加載資源    
15. LLoadManage.load(loadList, null, demoInit);    
16. }    
17. function demoInit (result) {    
18. // 初始化舞台層    
19. stageLayer = new LSprite();    
20. addChild(stageLayer);    
21. // 加入背景    
22. bg = new LBitmap(new LBitmapData(result['bg']));    
23. bg.y = -100;    
24. stageLayer.addChild(bg);    
25. // 加入小鳥    
26. bird = new LBitmap(new LBitmapData(result['bird']));    
27. bird.x = 100;    
28. bird.y = 150;    
29. stageLayer.addChild(bird);    
30. // 添加鼠標按下事件    
31. stageLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onDown);    
32. // 添加鼠標彈起事件    
33. stageLayer.addEventListener(LMouseEvent.MOUSE_UP, onUp);    
34. // 添加時間軸事件    
35. stageLayer.addEventListener(LEvent.ENTER_FRAME, onFrame);    
36. }    
37. function onDown (e) {    
38. /** 根據點擊位置設置移動方向 */    
39. if (e.offsetX > LGlobal.width / 2) {    
40. direction = 'right';    
41. } else {    
42. direction = 'left';    
43. }    
44. }    
45. function onUp () {    
46. // 設置方向為無方向，代表不移動    
47. direction = null;    
48. }    
49. function onFrame () {    
50. var _step, minX, maxX;    
51. /** 移動小鳥 */    
52. if (direction == 'right') {    
53. _step = step;    
54. } else if (direction == 'left') {    
55. _step = -step;    
56. } else {    
57. return;    
58. }    
59. bird.x += _step;    
60. /** 控制小鳥移動范圍 */    
61. minX = 0,    
62. maxX = bg.getWidth() - bird.getWidth();    
63. if (bird.x < minX) {    
64. bird.x = minX;    
65. }else if (bird.x > maxX) {    
66. bird.x = maxX;    
67. }    
68. /** 移動舞台 */    
69. stageLayer.x = LGlobal.width / 2 - bird.x;    
70. /** 控制舞台移動范圍 */    
71. minX = LGlobal.width - stageLayer.getWidth(),    
72. maxX = 0;    
73. if (stageLayer.x < minX) {    
74. stageLayer.x = minX;    
75. }else if (stageLayer.x > maxX) {    
76. stageLayer.x = maxX;    
77. }    
78. }    

運行結果： 

大家可以到這裡查看在線演示。點擊屏幕左半邊控制小鳥向左移動，點擊右半邊屏幕，控制小鳥向右移動。小鳥到達屏幕中央後，開始卷軸。