GameBuilder 是移動(dòng)端輕量HTML5游戲快速開(kāi)發(fā)框架，主要應(yīng)用于活動(dòng)推廣。

開(kāi)始之前

1.游戲形式活動(dòng)推廣頁(yè)的生命周期

加載資源 --> 活動(dòng)介紹 --> 游戲主體 --> 結(jié)果提示 --> 引導(dǎo)分享

分享進(jìn)入 --> 參與結(jié)果 --> 引導(dǎo)參與 --> 進(jìn)入游戲

2.

快速開(kāi)始

如果已經(jīng)安裝了 generator-lego ，可以直接使用 yo lego 命令來(lái)構(gòu)建

或者直接 clone 到本地使用

1.引入樣式文件

2.引入腳本文件

...

3.最佳實(shí)踐

title

光速加載中...

0%

...

...

說(shuō)明

1.推薦文件結(jié)構(gòu)(游戲模板)

yourProj/

│

├── config.json // 模板配置文件,必須編寫(xiě),用于開(kāi)發(fā)調(diào)試和上傳模板時(shí)后臺(tái)生成給用戶(hù)編輯的選項(xiàng)

│

├── css/ // 樣式文件

│

├── img/ // 圖片資源

│

├── js/ // 腳本文件

│

├── res/ // 素材資源

│

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

2.開(kāi)發(fā)規(guī)范

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

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

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

3.config.json配置文件

作為游戲模板開(kāi)發(fā),必須包含config.json配置文件

{

"name": "name",

"version": "1.0.0",

"description": "",

"author": "",

"editOptions": {

"pageTitle": {

"name": "頁(yè)面標(biāo)題",

"type": "text",

"tips": "請(qǐng)輸入頁(yè)面標(biāo)題",

"value": "游戲模板"

},

"gameStartTips": {

"name": "提示文案",

"type": "text",

"tips": "請(qǐng)輸入游戲開(kāi)始前的提示文案",

"value": "點(diǎn)擊開(kāi)始搖大獎(jiǎng)"

},

"gameIcon": {

"name": "游戲圖標(biāo)",

"type": "photo-img",

"tips": "請(qǐng)選擇200x200的游戲圖標(biāo),用于游戲加載時(shí)顯示",

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

},

"gameBg": {

"name": "游戲背景",

"type": "photo-bgi",

"tips": "請(qǐng)選擇640x1136的游戲背景,用于游戲背景顯示",

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

},

"gameGift": {

"name": "游戲獎(jiǎng)品",

"type": "photo-img",

"tips": "請(qǐng)選擇200x200的獎(jiǎng)品圖案,用于獲獎(jiǎng)時(shí)顯示",

"value": "img/gift1.png"

}

}

}

editOptions為可以提供給用戶(hù)的編輯項(xiàng)集合,每一項(xiàng)屬性為一個(gè)可以編輯的選項(xiàng),并與html頁(yè)面中的自定義屬性data-gb一一對(duì)應(yīng).如:

"gameStartTips": {

"name": "提示文案",

"type": "text",

"tips": "請(qǐng)輸入游戲開(kāi)始前的提示文案",

"value": "點(diǎn)擊開(kāi)始搖大獎(jiǎng)"

}

對(duì)應(yīng)

點(diǎn)擊開(kāi)始搖大獎(jiǎng)

其中,name為該編輯項(xiàng)在后臺(tái)編輯界面顯示的可編輯項(xiàng)名稱(chēng)

其中,type為該編輯項(xiàng)在后臺(tái)編輯界面生成可編輯的類(lèi)型,目前可選項(xiàng)為:

text - 純文本編輯項(xiàng)

photo-img - 對(duì)應(yīng)標(biāo)簽的圖片素材編輯項(xiàng)

photo-bgi - 對(duì)應(yīng)使用background-imgage方式的圖片素材編輯項(xiàng)

其中,tips為該編輯項(xiàng)在后臺(tái)編輯界面顯示的可編輯項(xiàng)提示文案

其中,value為該配置項(xiàng)的值,可以在開(kāi)發(fā)過(guò)程中使用getValue('gameStartTips')獲得該值

4.初始化gamebuilder

所有的options都是可選的,初始化會(huì)執(zhí)行相關(guān)依賴(lài)代碼,當(dāng)gamebuilder準(zhǔn)備就緒之后會(huì)調(diào)用game.ready

var game = new GB({

// options here

});

game.ready =function(){

// code here

};

配置項(xiàng)

scanImg - 默認(rèn)為 false，是否掃描img標(biāo)簽作為資源加載

popupTool - 默認(rèn)為 true，是否使用彈出層

回調(diào)函數(shù)

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

startEvent() - 游戲開(kāi)始的處理

pauseEvent() - 游戲暫停的處理

endEvent() - 游戲結(jié)束的處理

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

devicemotionEvent() - 搖一搖事件觸發(fā)的回調(diào)

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

5.gamebuilder使用說(shuō)明

utils工具庫(kù)

isBadAndroid - 是否低端安卓機(jī)

getTime - 返回當(dāng)前時(shí)間戳

hasTransform - 是否支持transform

hasTransition - 是否支持transition

hasTouch - 是否支持觸摸事件

extend(target,obj) - 用obj對(duì)象擴(kuò)展target對(duì)象

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

ease - 一些常用的貝塞爾曲線(xiàn)

$工具庫(kù)

$()

html()

attr()

each()

show()

hide()

addClass()

hasClass()

removeClass()

siblings()

append()

on()

靜態(tài)方法

prevPage() - 主體內(nèi)容分頁(yè)，上一頁(yè)

nextPage() - 主體內(nèi)容分頁(yè)，下一頁(yè)

gotoPage(index) - 主體內(nèi)容分頁(yè)，指定index頁(yè)

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

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

start() - 游戲開(kāi)始

pause() - 游戲暫停

end() - 游戲結(jié)束

restart() - 游戲重新開(kāi)始

on() - 綁定自定義事件

off() - 移除自定義事件

trigger() - 觸發(fā)自定義事件

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

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

loadFinish() - 觸發(fā)加載完成的回調(diào)函數(shù)

devicemotion() - 監(jiān)聽(tīng)搖一搖事件

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

更新說(shuō)明

1.0 基礎(chǔ)版本。

1.1 新增gameStatus，0-游戲就緒 1-游戲開(kāi)始 2-游戲暫停 3-游戲結(jié)束

1.2 新增start,pause,end靜態(tài)方法和startEvent,pauseEvent,endEvent回調(diào)函數(shù)

1.3 新增devicemotion靜態(tài)方法，和devicemotionEvent回調(diào)函數(shù)，用于監(jiān)聽(tīng)搖一搖事件

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

1.5 新增restartEvent,updateEvent回調(diào)函數(shù)

1.6 新增restart,shake,getQueryString,getValue,loadFinish,on,off,trigger靜態(tài)方法

1.7 新增game.ready入口

1.8 新增config.json配置文件的方式進(jìn)行開(kāi)發(fā)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。