Wjjl-components NPM

install

步骤:

新增公司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

TreasureChest

init

import FeGameBox from '@transsion/game-center'
const option = {
    domId: 'testdom',
    callback: {
        // 宝箱点击回调函数
        preStart: (start) => {
            if (gameTimes === 0) return;
            start();
        }
    }
}
const gameBox = new FeGameBox.TreasureChest(option);

Option(参数)

domId 设置画布

callback

preStart点击宝箱触发，判断是否开始动画，是调用start()，否return;

描述:

preStart: (start: () => void) => void;

例子:

callback: {
    // 宝箱点击回调函数
    preStart: (start) => {
        if (gameTimes === 0) return;
        start();
    }
}

API

设置展示的次数文案
描述:

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();

LuckyTurnTable

init

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);

Option(参数)

domId 设置画布

callback

preStart

描述: 点击宝箱触发，判断是否开始动画，是调用start()，否return;
preStart: (start: () => void) => void;
例子:
callback: {
    // 宝箱点击回调函数
    preStart: (start) => {
        if (gameTimes === 0) return;
        start();
    }
}

API

设置展示的次数文案
描述:

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();

html例子

<!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>

webpack lit-html wjjl

@lit-labs/motion konva lit

@infinitebrahmanuniverse/nolb-wj @everything-registry/sub-chunk-3154

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago