/**
* ending页入口函数
* @param {boolean} isVictory 是否为胜利页，不传默认为true
* @param {object} {globalClick, autoClick} 可选，后续有参数就添加只这个对象中，其中globalClick: 全屏可点阀值，默认值为false； autoClick: 自动跳转阀值，默认值为false，默认值为false
*/
showEnding(isVictory = true, { globalClick, autoClick } = { globalClick: false, autoClick: false })
调用例如：
需要传参时 showEnding(false, { globalClick: true, autoClick: false, score:2333, name:"Hugo" })
不传参时：showEnding()
/**
* 移除ending页
*/
closeEnding()1、开发
在终端运行 yarn serve --entry [入口文件路径] 或者 如果 yarn serve 这样默认入口为projects/test/app.js
2、构建
在终端运行 yarn build --entry [入口文件路径]，如 yarn build --entry projects/test/app.js
最终压缩产出的js文件可在终端运行 yarn build:prod --entry [入口文件路径]，如 yarn build:prod --entry projects/test/app.js
3、测试*
目前主要测试iPhone 6/7/8(375*667)、iPhone 6/7/8 Plus、iPhone X(375*812)、iPad(768*1024)的横竖屏，同时需要对其他端进行很好的兼容适配；同时也要对全屏点击、下载按钮、重玩、多语言等测试。
需要在开发环境和发布环境进行测试。发布环境测试先下载工具包AsstesPackage.zip，目前只支持windows电脑，解压后打开AssetesPackage.exe，把测试的基础包（即EndingSmart/dist/TestEnding）拖进去，产出的data.js放在基础包最外层，和html同一层级，最后用浏览器打开基础包的入口html文件即可测试发布环境。
如果遇到不能解决的问题，及时抛出来大家一起解决，唯一一点就是要准时把制作的ending交付给研发
测试时及时与设计、研发和跟小组反馈结果，保证需求准时交付
4、提交
注意不要把dist目录下的文件提交到EndingSmart项目中，只需要将你创建出来的整个文件夹提交就行
提交文件时请先参考 前端相关规范
5、制作规范*
调用ending页统一的方法为 showEnding，ending页的容器名为endingContainer
所有ending页制作都在projects文件夹下并创建新的文件来制作，创建文件名和入口文件名建议以需求ID名_项目名称一致，如：
注意：
项目中要用到背景图或者图片标签时，一定要把图的宽度定死，防止后面仓库等比压缩时导致ending页效果呈现失效
如果要动态用到图片时必须先用getAssestByUrl方法，调用时必须要判断此方法是否存在，如：img.src = window.hasOwnProperty('getAssestByUrl') ? getAssestByUrl('图片引入路径') : '图片引入路径'
写媒体查询时不要用device属性
如果要用到html文件时，文件只需要创建body下的结构，如下图
在dist/TestEnding要求把所需的资源替换掉，替换资源如下：
-- resource 资源
----------- config
------------------ gameConfig.json 玩法配置，没有玩法也需要增加这个文件，文件内容是空的对象
------------------ language.json 代码字配置
----------- ending 游戏结束阶段所需资源
而在创建出来的文件目录要求：
-- js 脚本
-- resource 资源
----------- config
------------------ gameConfig.json 玩法配置，没有玩法也需要增加这个文件，文件内容是空的对象
------------------ language.json 代码字配置
----------- ending 游戏结束阶段所需资源
-- style 样式
-- 入口文件
通用模块必须导入创建的入口文件中*
通用模块引用要求：
// 通用资源，必须引入
import '@/common/style/common.scss'
import { replaceResource, getElement, fullScreenClick, updateTextStyle, updateImgByLanguage, endingToInstall } from '@/utils'
// 引入xtween,cssbinder用于做css动画
import { XTween, xtween } from '../../utils/XTween'
import CSSBinder from '../../utils/CSSBinder'
/**
* ending页入口函数
* @param {boolean} isVictory 是否为胜利页，不传默认为true
* @param {object} {globalClick, autoClick} 可选，后续有参数就添加只这个对象中，其中globalClick: 全屏可点阀值，默认值为false； autoClick: 自动跳转阀值，默认值为false，默认值为false
*/
function showEnding (isVictory = true, { globalClick, autoClick } = { globalClick: false, autoClick: false }) {
closeEnding()
// 全屏可点默认值
globalClick = Boolean(globalClick)
// 自动跳转默认值
autoClick = Boolean(autoClick)
// 更多代码...
// 容器要替换的html结构内容，如需导入art或html都可以用此变量做拼接即可
let html
const container = document.createElement('div')
container.id = 'endingContainer'
document.body.appendChild(container)
const endingContainer = getElement('#endingContainer')[0]
endingContainer.innerHTML = html
// 提供代码字多语言替换模版，后续可根据项目具体改变
const lang = {
'.install-btn-text': 'Download'
}
Object.keys(lang).map(key => updateTextStyle(getElement(key)[0], lang[key]))
// 替换资源
replaceResource()
// 多语言图片字,需要放在replaceResource后面
updateImgByLanguage(getElement('.logo')[0])
// 如果全屏点击后，需要回调，则调用fullScreenClick时，加回调函数作为第二个参数传进去
fullScreenClick(globalClick)
// 自动跳转商店
autoClick && window.MW_CONFIG && !window.MW_CONFIG['disable_auto_click'] && endingToInstall()
// 初始化xtween,cssbinder
setInterval(XTween.intialize(), 1)
CSSBinder.initialize()
// 更多代码...
}
/**
* 移除ending页
*/
function closeEnding () {
getElement('#endingContainer')[0] && getElement('#endingContainer')[0].remove()
}
window.endingSmart = {
showEnding,
closeEnding
}
window.showEnding = showEnding
window.closeEnding = closeEnding/**
* ending页入口函数
* @param {boolean} isVictory 是否为胜利页，不传默认为true
* @param {object} {globalClick, autoClick} 可选，后续有参数就添加只这个对象中
*/
showEnding(isVictory = true, { globalClick, autoClick } = { globalClick: false, autoClick: false })
调用例如：showEnding(false, { globalClick: true, autoClick: true, score:2333, name:"Hugo" })
/**
* 移除ending页
*/
closeEnding()
调用例如：closeEnding()
/**
* 替换资源 说明 data-path是默认的图片资源，data-l-path是横屏资源替换，data-p-path是竖屏资源替换，如果有img、audio、video这些标签会替换成src，其他替换成背景图
*/
replaceResource()
调用例如：replaceResource()
/**
* 更新多语言文字 说明 如果标签已经有用背景图的话会将background-image替换掉
* @param {HTMLElement} el DOM元素
* @param {string} languageKey 多语言包的key
*/
updateTextStyle(el, languageKey)
调用例如：let endingDownload = document.querySelector('.ending-download')
updateTextStyle(endingDownload, 'Download')
/**
* 跳转游戏页
* @param {Function} callback 回调，可不传
*/
endingRetryGame(callback)
调用例如：不传参 endingRetryGame() 传参 endingRetryGame(()=>{console.log('retry')})
/**
* 跳往商店
*/
endingToInstall()
调用例如：endingToInstall()
/**
* 发送埋点
* @param {number | string} action 埋点
*/
endingToSendAction(action)
调用例如：endingToSendAction(7)
/**
* 获取重玩次数
* returns {number} 重玩次数
*/
getPlayAgain()
调用例如：let playAgain = getPlayAgain()
/**
* 对有多语言图片的DOM元素进行更换, 必须放在replaceResource()后面
* @param {HTMLElement} el DOM元素
*/
updateImgByLanguage(el)
调用例如：let logo = document.querySelector('.logo')
updateImgByLanguage(logo)
/**
* css xtween动画用法
*/
const box = document.getElementById('box')
let boxStyle = CSSBinder.bind(box.style, box)
xtween(boxStyle)
.to(1000, { scaleX: 1.2, scaleY: 1.2 }, { easing: XTween.Easing.Linear.Node })
.call(() => {
xtween(boxStylea).to(500, { marginLeft: 10 }).start()
})
.start()无法使用龙骨
无法使用粒子
无法使用颜色滤镜
无法使用遮罩