GameBuilder 是移動端輕量HTML5游戲快速開發框架，主要應用于活動推廣。

開始之前

1.游戲形式活動推廣頁的生命周期

加載資源 --> 活動介紹 --> 游戲主體 --> 結果提示 --> 引導分享

分享進入 --> 參與結果 --> 引導參與 --> 進入游戲

2.

快速開始

如果已經安裝了 generator-lego ，可以直接使用 yo lego 命令來構建

或者直接 clone 到本地使用

1.引入樣式文件

2.引入腳本文件

...

3.最佳實踐

title

光速加載中...

0%

...

...

說明

1.推薦文件結構(游戲模板)

yourProj/

│

├── config.json // 模板配置文件,必須編寫,用于開發調試和上傳模板時后臺生成給用戶編輯的選項

│

├── css/ // 樣式文件

│

├── img/ // 圖片資源

│

├── js/ // 腳本文件

│

├── res/ // 素材資源

│

└── index.html // 游戲入口

2.開發規范

1.界面分三種類型，資源加載界面(load-page)、主體內容界面(body-page)和消息提示界面(tool-page)，主體內容分頁(game-page)從data-index="1"開始，資源加載界面為0，消息提示界面不屬于分頁內容。

2.消息提示界面(tool-page)也有三種類型，分享頁、等待頁、彈出頁(如結果提示，消息提示，文案提示)。

3.使用img標簽加載圖片資源時，使用data-gb-url自定義屬性保存圖片資源的路徑,如:data-gb-url="***"。

3.config.json配置文件

作為游戲模板開發,必須包含config.json配置文件

{

"name": "name",

"version": "1.0.0",

"description": "",

"author": "",

"editOptions": {

"pageTitle": {

"name": "頁面標題",

"type": "text",

"tips": "請輸入頁面標題",

"value": "游戲模板"

},

"gameStartTips": {

"name": "提示文案",

"type": "text",

"tips": "請輸入游戲開始前的提示文案",

"value": "點擊開始搖大獎"

},

"gameIcon": {

"name": "游戲圖標",

"type": "photo-img",

"tips": "請選擇200x200的游戲圖標,用于游戲加載時顯示",

"value": "http://lol.duowan.com/s/lolFaceGame/img/icon.png"

},

"gameBg": {

"name": "游戲背景",

"type": "photo-bgi",

"tips": "請選擇640x1136的游戲背景,用于游戲背景顯示",

"value": "http://lol.duowan.com/s/lolFaceGame/img/icon.png"

},

"gameGift": {

"name": "游戲獎品",

"type": "photo-img",

"tips": "請選擇200x200的獎品圖案,用于獲獎時顯示",

"value": "img/gift1.png"

}

}

}

editOptions為可以提供給用戶的編輯項集合,每一項屬性為一個可以編輯的選項,并與html頁面中的自定義屬性data-gb一一對應.如:

"gameStartTips": {

"name": "提示文案",

"type": "text",

"tips": "請輸入游戲開始前的提示文案",

"value": "點擊開始搖大獎"

}

對應

點擊開始搖大獎

其中,name為該編輯項在后臺編輯界面顯示的可編輯項名稱

其中,type為該編輯項在后臺編輯界面生成可編輯的類型,目前可選項為:

text - 純文本編輯項

photo-img - 對應標簽的圖片素材編輯項

photo-bgi - 對應使用background-imgage方式的圖片素材編輯項

其中,tips為該編輯項在后臺編輯界面顯示的可編輯項提示文案

其中,value為該配置項的值,可以在開發過程中使用getValue('gameStartTips')獲得該值

4.初始化gamebuilder

所有的options都是可選的,初始化會執行相關依賴代碼,當gamebuilder準備就緒之后會調用game.ready

var game = new GB({

// options here

});

game.ready =function(){

// code here

};

配置項

scanImg - 默認為 false，是否掃描img標簽作為資源加載

popupTool - 默認為 true，是否使用彈出層

回調函數

loadFinish() - 資源加載完成的處理

startEvent() - 游戲開始的處理

pauseEvent() - 游戲暫停的處理

endEvent() - 游戲結束的處理

restartEvent() - 游戲重新開始的處理

devicemotionEvent() - 搖一搖事件觸發的回調

updateEvent() - 資源發生變化時游戲視圖更新的處理

5.gamebuilder使用說明

utils工具庫

isBadAndroid - 是否低端安卓機

getTime - 返回當前時間戳

hasTransform - 是否支持transform

hasTransition - 是否支持transition

hasTouch - 是否支持觸摸事件

extend(target,obj) - 用obj對象擴展target對象

each(arrays,callback) - 像$.each一樣的用法

ease - 一些常用的貝塞爾曲線

$工具庫

$()

html()

attr()

each()

show()

hide()

addClass()

hasClass()

removeClass()

siblings()

append()

on()

靜態方法

prevPage() - 主體內容分頁，上一頁

nextPage() - 主體內容分頁，下一頁

gotoPage(index) - 主體內容分頁，指定index頁

showToolPage(opts) - 打開消息提示界面

hideToolPage(opts) - 關閉消息提示界面

start() - 游戲開始

pause() - 游戲暫停

end() - 游戲結束

restart() - 游戲重新開始

on() - 綁定自定義事件

off() - 移除自定義事件

trigger() - 觸發自定義事件

getValue() - 獲取config配置文件中的配置項的值

shake() - 觸發一次搖一搖事件

loadFinish() - 觸發加載完成的回調函數

devicemotion() - 監聽搖一搖事件

getQueryString() - 獲取url中的參數值

更新說明

1.0 基礎版本。

1.1 新增gameStatus，0-游戲就緒 1-游戲開始 2-游戲暫停 3-游戲結束

1.2 新增start,pause,end靜態方法和startEvent,pauseEvent,endEvent回調函數

1.3 新增devicemotion靜態方法，和devicemotionEvent回調函數，用于監聽搖一搖事件

1.4 新增popupTool配置，是否使用彈出層工具，showToolPage靜態方法新增popup用法

1.5 新增restartEvent,updateEvent回調函數

1.6 新增restart,shake,getQueryString,getValue,loadFinish,on,off,trigger靜態方法

1.7 新增game.ready入口

1.8 新增config.json配置文件的方式進行開發

總結

以上是生活随笔為你收集整理的移动端html游戏开发,GitHub - PromeYang/GameBuilder: GameBuilder 是移动端轻量HTML5游戏快速开发框架，主要应用于活动推广。...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。