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": "/s/lolFaceGame/img/icon.png"
},
"gameBg": {
"name": "游戏背景",
"type": "photo-bgi",
"tips": "请选择640x1136的游戏背景,用于游戏背景显示",
"value": "/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游戏快速开发框架 主要应用于活动推广。...
如果觉得《移动端html游戏开发 GitHub - PromeYang/GameBuilder: GameBuilder 是移动端轻量》对你有帮助，请点赞、收藏，并留下你的观点哦！
