派對遊戲平台 - 使用 Winwheel.js 製造轉盤

參考資源

實作

根據 Tutorials & Docs 一步一步進行即可，文件只有少許錯誤，搭配網頁原始碼即可理解

如果圖沒有出現，請將網址的 https 改成 http 即可

成果

程式碼

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>Winwheel</title>

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <!-- bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/fastbootstrap@2.2.0/dist/css/fastbootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <script src='Winwheel.min.js'></script>
    <script src='TweenMax.min.js'></script>
</head>
<body>

<canvas id='canvas' width='300' height='320' onClick="startSpin();"></canvas>

<script>
    let theWheel = new Winwheel({
        numSegments     : 6,
        textFontSize    : 32,
        lineWidth       : 0,
        innerRadius     : 20,
        textOrientation : 'horizontal',
        centerY         : 170,
        rotationAngle   : -30,
        segments :
            [
                {'fillStyle' : '#eae56f', 'text' : '1'},
                {'fillStyle' : '#89f26e', 'text' : '2'},
                {'fillStyle' : '#7de6ef', 'text' : '3'},
                {'fillStyle' : '#adc8ff', 'text' : '4'},
                {'fillStyle' : '#d7b5fe', 'text' : '5'},
                {'fillStyle' : '#e7706f', 'text' : '6'},
            ],
        animation :
            {
                type             : 'spinToStop',
                duration         : 0.5,
                spins            : 2,
                callbackFinished : 'alertPrize()',
                callbackAfter    : 'drawTriangle()',
            }
    });

    drawTriangle();

    function startSpin(){
        theWheel.rotationAngle = theWheel.rotationAngle % 360;
        theWheel.startAnimation();
    }

    function alertPrize(){
        let winningSegment = theWheel.getIndicatedSegment();
        console.log(winningSegment.text);
    }

    function drawTriangle(){
        c = theWheel.ctx;
        c.save();
        c.lineWidth = 2;
        c.strokeStyle = 'black';
        c.fillStyle = 'black';
        c.beginPath();
        c.moveTo(130, 10);
        c.lineTo(170, 10);
        c.lineTo(150, 42);
        c.lineTo(130, 10);
        c.stroke();
        c.fill();
        c.restore();
    }
</script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Winwheel</title>

</head>

<body>

let theWheel = new Winwheel({

numSegments : 6,

textFontSize : 32,

lineWidth : 0,

innerRadius : 20,

textOrientation : 'horizontal',

centerY : 170,

rotationAngle : -30,

segments :

[

{'fillStyle' : '#eae56f', 'text' : '1'},

{'fillStyle' : '#89f26e', 'text' : '2'},

{'fillStyle' : '#7de6ef', 'text' : '3'},

{'fillStyle' : '#adc8ff', 'text' : '4'},

{'fillStyle' : '#d7b5fe', 'text' : '5'},

{'fillStyle' : '#e7706f', 'text' : '6'},

animation :

{

type : 'spinToStop',

duration : 0.5,

spins : 2,

callbackFinished : 'alertPrize()',

callbackAfter : 'drawTriangle()',

}

});

drawTriangle();

function startSpin(){

theWheel.rotationAngle = theWheel.rotationAngle % 360;

theWheel.startAnimation();

}

function alertPrize(){

let winningSegment = theWheel.getIndicatedSegment();

console.log(winningSegment.text);

}

function drawTriangle(){

c = theWheel.ctx;

c.save();

c.lineWidth = 2;

c.strokeStyle = 'black';

c.fillStyle = 'black';

c.beginPath();

c.moveTo(130, 10);

c.lineTo(170, 10);

c.lineTo(150, 42);

c.lineTo(130, 10);

c.stroke();

c.fill();

c.restore();

}

</script>

</body>

</html>

較小的三角形

修改 drawTriangle() 的c 路徑

c.moveTo(140, 10);
c.lineTo(160, 10);
c.lineTo(150, 25);
c.lineTo(140, 10);

c.moveTo(140, 10);

c.lineTo(160, 10);

c.lineTo(150, 25);

c.lineTo(140, 10);

移除選中

程式碼

let segmentNumber = theWheel.getIndicatedSegmentNumber();
theWheel.deleteSegment(segmentNumber);
theWheel.draw();

let segmentNumber = theWheel.getIndicatedSegmentNumber();

theWheel.deleteSegment(segmentNumber);

theWheel.draw();

.getIndicatedSegmentNumber() 取得位置
.deleteSegment() 刪除
.draw() 重新繪製

2,127 total views, 3 views today

派對遊戲平台 - 使用 Winwheel.js 製造轉盤

參考資源

實作

成果

移除選中

Related Post

發佈留言

派對遊戲平台 - 使用 Winwheel.js 製造轉盤

參考資源

實作

成果

移除選中

Related Post

網頁的前、後端如何區分

PWA 漸進式網路應用程式 - 3. 桌面版瀏覽網頁通知

網頁前端 - 滑鼠點擊特效

發佈留言