-
新增公司npm scope（本地和jenkins npm install之前都要加:
npm config set @transsion:registry=https://nexus.trasre.com/repository/business/ -
安装@transsion/game-center 以及依赖konva
npm i @transsion/game-center --save npm i konva --save
import FeGameBox from '@transsion/game-center'
const option = {
domId: 'testdom',
callback: {
// 宝箱点击回调函数
preStart: (start) => {
if (gameTimes === 0) return;
start();
}
}
}
const gameBox = new FeGameBox.TreasureChest(option);- domId 设置画布
- callback
- preStart点击宝箱触发，判断是否开始动画，是调用start()，否return;
描述:
preStart: (start: () => void) => void;
例子:
callback: { // 宝箱点击回调函数 preStart: (start) => { if (gameTimes === 0) return; start(); } }
- 设置展示的次数文案
- 打开宝箱
- 重置游戏
- domId 设置画布
- callback
- preStart
描述: 点击宝箱触发，判断是否开始动画，是调用start()，否return;
preStart: (start: () => void) => void;
例子:
callback: { // 宝箱点击回调函数 preStart: (start) => { if (gameTimes === 0) return; start(); } }
- 设置展示的次数文案
- 停止转动
- 重置游戏
描述:
setGameTimes(prefix: string, times: number);例子:
gameBox.setGameTimes('Draw Times ', gameTimes);描述:
trigger(option: {
onFinish: () => void
})例子:
gameBox.trigger({
onFinish() {
console.log('恭喜你获得了xxx');
setTimeout(() => {
gameBox.resetGame();
gameBox.setGameTimes('Draw Times', gameTimes);
}, 2000)
}
})描述:
resetGame()例子:
gameBox.resetGame();import FeGameBox from '@transsion/game-center'
const option = {
domId: 'testdom',
sectorConfig: [
{ text: '第0个' },
{ text: '第1个' },
{ text: '第2个' },
{ text: '第3个' },
{ text: '第4个' },
{ text: '第5个' },
],
callback: {
preStart: (start) => {
if (gameTimes === 0) return;
start();
},
}
}
const gameBox = new FeGameBox.LuckyTurnTable(option);描述:
setGameTimes(prefix: string, times: number);例子:
gameBox.setGameTimes('x', gameTimes);描述:
trigger(option: {
onFinish: () => void
})例子:
gameBox.trigger({
onFinish() {
console.log('恭喜你获得了xxx');
setTimeout(() => {
gameBox.resetGame();
gameBox.setGameTimes('x', gameTimes);
}, 2000)
}
})描述:
resetGame()例子:
gameBox.resetGame();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#testdom {
width: 100%;
height: 400px;
}
body {
height: 100%;
margin: 0;
}
.box {
height: 1600px;
}
</style>
<body>
<button onclick="trigger()">测试接口返回</button>
<div class="box">
<div id="testdom"></div>
</div>
</body>
<script src="/lib/index.js"></script>
<script>
var gameTimes = 3;
const option = {
domId: 'testdom',
callback: {
preStart: (start) => {
if (gameTimes === 0) return;
start();
}
}
}
const gameObj = new FeGameBox.TreasureChest(option);
gameObj.setGameTimes('Draw Times ', gameTimes);
function trigger() {
if (gameTimes === 0) return;
gameTimes--;
gameObj.trigger({
onFinish() {
console.log('恭喜你获得了xxx');
setTimeout(() => {
gameObj.resetGame();
gameObj.setGameTimes('Draw Times ', gameTimes);
}, 2000)
}
})
}
</script>
<!-- <script>
var gameTimes = 3;
const option = {
domId: 'testdom',
sectorConfig: [
{ text: '第0个' },
{ text: '第1个' },
{ text: '第2个' },
{ text: '第3个' },
{ text: '第4个' },
{ text: '第5个' },
],
callback: {
preStart: (start) => {
if (gameTimes === 0) return;
start();
},
}
}
const gameObj = new FeGameBox.LuckyTurntable(option);
gameObj.setGameTimes('x', gameTimes);
function trigger() {
if (gameTimes === 0) return;
gameTimes--;
gameObj.trigger({
onFinish() {
console.log('恭喜你获得了xxx');
setTimeout(() => {
gameObj.resetGame();
gameObj.setGameTimes('x', gameTimes);
}, 2000)
}
})
}
</script> -->
</html>