欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5+lufylegend實現(xiàn)游戲中的卷軸

  發(fā)布時間：2016-02-29 15:34:39   作者：佚名   我要評論
玩過RPG或者橫版格斗的同學(xué)應(yīng)該知道，人物走到屏幕中央后，由于地圖過大，地圖會進(jìn)行移動，人物則相對靜止不動，本文給大家介紹通過HTML5+lufylegend實現(xiàn)游戲中的卷軸，感興趣的朋友一起學(xué)習(xí)吧
lufylegend是一個HTML5開源引擎,它實現(xiàn)了利用仿ActionScript3.0的語法進(jìn)行HTML5的開發(fā)， 包含了LSprite，LBitmapData，LBitmap，LLoader，LURLLoader，LTextField，LEvent等多個AS開發(fā)人員熟悉的類， 支持Google Chrome，F(xiàn)irefox，Opera，IE9，IOS，Android等多種熱門環(huán)境。 利用lufylegend可以輕松的使用面向?qū)ο缶幊蹋⑶铱梢耘浜螧ox2dWeb制作物理游戲， 另外它還內(nèi)置了LTweenLite緩動類等非常實用的功能, 現(xiàn)在開始使用它吧，它可以讓你更快的進(jìn)入HTML5的世界！
什么是卷軸
玩過RPG或者橫版格斗的同學(xué)應(yīng)該知道，人物走到屏幕中央后，由于地圖過大，地圖會進(jìn)行移動，人物則相對靜止不動。這個就是傳說中的卷軸。例如下圖是我的游戲“三國戰(zhàn)線”里的卷軸：


有了以上的簡介，大家應(yīng)該明白了什么是卷軸。說白了就是鏡頭跟隨主角的效果。接下來，我們就利用lufylegend.js游戲引擎來實現(xiàn)這個效果。
原理介紹
其實實現(xiàn)這個效果的關(guān)鍵在于如何使人物靜止，何時移動地圖，以及如何移動地圖。在探究這個兩個問題之前，我們先創(chuàng)建一個結(jié)構(gòu)良好的舞臺層（及一個LSprite對象），以便以后的操作。舞臺結(jié)構(gòu)如下：
+- 舞臺層
|
+- 地圖層
|
+- 人物層
可見舞臺層就是地圖層和人物層的父元素，并且人物層在地圖層上方，畢竟人物是站在地圖上的。我們知道，子對象的坐標(biāo)是相對于父對象的，所以移動父對象，子對象會跟著移動。這點要先弄明白。
如何使人物靜止呢？何時移動地圖呢？如何移動地圖呢？也許你會想，首先用if(xxx){...}來判斷人物的坐標(biāo)是否達(dá)到屏幕中央，如果是，則移動地圖對象，如果不是則移動人物對象。這么做的話就麻煩了。其實有更簡單的方法：
卷軸/不卷軸時，我們的人物都是在移動，但是如果人物達(dá)到屏幕中央時，要開始卷軸了，我們的舞臺層就進(jìn)行與人物速度方向相反、大小相同的移動，那么人物的相對于canvas畫布的位移就抵消了，看上去就是靜止的，而地圖就跟著父類向反方向移動。這個類似于拍古裝電影，拍兩個人一邊騎馬一邊談話。如果人和馬在前進(jìn)，攝像機(jī)以相同的速度跟拍，那么得到的畫面就是人物并沒有移動，而人物背后風(fēng)景是在移動的。
接下來看實現(xiàn)代碼。
實現(xiàn)代碼
以下是含有詳細(xì)注釋的代碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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. // 添加鼠標(biāo)按下事件    
  31. stageLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onDown);    
  32. // 添加鼠標(biāo)彈起事件    
  33. stageLayer.addEventListener(LMouseEvent.MOUSE_UP, onUp);    
  34. // 添加時間軸事件    
  35. stageLayer.addEventListener(LEvent.ENTER_FRAME, onFrame);    
  36. }    
  37. function onDown (e) {    
  38. /** 根據(jù)點擊位置設(shè)置移動方向 */    
  39. if (e.offsetX > LGlobal.width / 2) {    
  40. direction = 'right';    
  41. } else {    
  42. direction = 'left';    
  43. }    
  44. }    
  45. function onUp () {    
  46. // 設(shè)置方向為無方向，代表不移動    
  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. }    
運(yùn)行結(jié)果：


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

相關(guān)文章

  • HTML5中的Microdata與歷史記錄管理詳解

    Microdata作為HTML5新增的一個特性，它允許開發(fā)者在HTML文檔中添加更多的語義信息，以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容，本文將探討HTML5中Microdata的使用方法以及
    2025-04-21

  • HTML5表格語法格式詳解

    在HTML語法中，表格主要通過< table >、< tr >和< td >3個標(biāo)簽構(gòu)成,本文通過實例代碼講解HTML5表格語法格式，感興趣的朋友一起看看吧
    2025-04-21

  • html5的響應(yīng)式布局的方法示例詳解

    這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實現(xiàn)自動換行的網(wǎng)格布局，感興趣的朋友一起看看吧
    2025-04-21

  • 基于Canvas的Html5多時區(qū)動態(tài)時鐘實戰(zhàn)代碼

    本文介紹了如何使用Canvas在HTML5上實現(xiàn)一個多時區(qū)動態(tài)時鐘的web展示,通過Canvas的API,可以繪制出6個不同城市的時鐘,并且這些時鐘可以動態(tài)轉(zhuǎn)動,每個時鐘上都會標(biāo)注出對應(yīng)的
    2025-03-11

  • HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼

    HTML5的自定義數(shù)據(jù)屬性（data-*）提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事
    2025-03-11

  • HTML5中下拉框＜select＞標(biāo)簽的屬性和樣式詳解

    在HTML5中，下拉框（<select>標(biāo)簽）作為表單的重要組成部分，為用戶提供了一個從預(yù)定義選項中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式，并重點介
    2025-02-27

  • HTML5 Input 日期選擇器詳解

    本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時間、日期+時間、本地日期時間等不同類型的日期選擇器，感興趣的朋友一起看
    2025-02-17

  • HTML5超鏈接和圖片基礎(chǔ)用法詳解

    本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標(biāo)簽用于引入外部圖
    2025-02-17

  • HTML5超鏈接的創(chuàng)建方法

    本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點鏈接的使用,還討論了超鏈接的四種不同狀態(tài)（link、visited、hover、active）的CSS樣
    2025-02-17

  • HTML5使用details標(biāo)簽：展開/收縮信息

    最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用，這個不用js即可實現(xiàn)展開/收縮信息，很方便用來讓用戶先才答案，然后下面點擊再給出答案的效果，這里就為大家簡單介紹一下，
    2024-11-03

最新評論