{"id":832,"date":"2026-09-07T21:57:56","date_gmt":"2026-09-07T13:57:56","guid":{"rendered":"https:\/\/quicool.cn\/?p=832"},"modified":"2026-09-10T23:37:37","modified_gmt":"2026-09-10T15:37:37","slug":"wheel-of-fortune","status":"publish","type":"post","link":"https:\/\/quicool.cn\/th\/2026\/09\/07\/wheel-of-fortune\/","title":{"rendered":"Wheel of Fortune"},"content":{"rendered":"<style>\n.wheel-of-fortune-wrapper {\n    max-width: 650px;\n    margin: 30px auto;\n    padding: 25px 20px;\n    background: linear-gradient(145deg, #1a1a2e, #16213e);\n    border-radius: 30px;\n    box-shadow: 0 15px 40px rgba(0,0,0,0.6);\n    text-align: center;\n    font-family: Arial, sans-serif;\n}\n.wheel-of-fortune-wrapper h2 {\n    color: #ffd700;\n    font-size: 2.2em;\n    margin: 0 0 5px 0;\n    text-shadow: 0 2px 10px rgba(255,215,0,0.3);\n}\n.wheel-of-fortune-wrapper .subtitle {\n    color: #aaa;\n    font-size: 1em;\n    margin-bottom: 15px;\n}\n.wheel-canvas-container {\n    position: relative;\n    display: inline-block;\n    margin: 10px auto;\n}\n.wheel-of-fortune-wrapper canvas {\n    display: block;\n    margin: 0 auto;\n    max-width: 100%;\n    height: auto;\n    border-radius: 50%;\n    box-shadow: 0 0 0 8px #2c3e50, 0 0 0 12px #f1c40f, 0 10px 40px rgba(0,0,0,0.5);\n    cursor: pointer;\n    transition: box-shadow 0.2s;\n}\n.wheel-of-fortune-wrapper canvas:hover {\n    box-shadow: 0 0 0 8px #2c3e50, 0 0 0 12px #f39c12, 0 10px 50px rgba(0,0,0,0.7);\n}\n.wheel-pointer {\n    position: absolute;\n    top: -18px;\n    left: 50%;\n    transform: translateX(-50%);\n    font-size: 45px;\n    color: #f1c40f;\n    text-shadow: 0 4px 10px rgba(0,0,0,0.5);\n    z-index: 10;\n    line-height: 1;\n    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));\n}\n.wheel-pointer::before {\n    content: \"\u25bc\";\n    display: block;\n}\n.wheel-controls {\n    margin-top: 20px;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 12px;\n}\n.wheel-result {\n    margin-top: 18px;\n    padding: 12px 20px;\n    background: rgba(0,0,0,0.4);\n    border-radius: 50px;\n    color: #fff;\n    font-size: 1.3em;\n    min-height: 3em;\n    display: inline-block;\n    border-left: 4px solid #f1c40f;\n    backdrop-filter: blur(2px);\n    min-width: 200px;\n}\n.wheel-result.win {\n    color: #7dff7d;\n    border-left-color: #7dff7d;\n}\n.wheel-result.lose {\n    color: #ff8a8a;\n    border-left-color: #ff8a8a;\n}\n@media (max-width: 500px) {\n    .wheel-of-fortune-wrapper { padding: 15px 10px; }\n    .wheel-of-fortune-wrapper h2 { font-size: 1.8em; }\n    .wheel-pointer { font-size: 35px; top: -14px; }\n}\n<\/style>\n<div class=\"wheel-of-fortune-wrapper\">\n<h2>\ud83c\udfa1 Wheel of Fortune<\/h2>\n<div class=\"subtitle\">Click the wheel or button to start<\/div>\n<div class=\"wheel-canvas-container\">\n        <canvas id=\"wheelCanvas\" width=\"500\" height=\"500\"><\/canvas><\/p>\n<div class=\"wheel-pointer\"><\/div>\n<\/p><\/div>\n<div class=\"wheel-controls\">\n        <button class=\"wheel-btn\" id=\"spinBtn\">\ud83c\udfb2 SPIN<\/button><br \/>\n        <button class=\"wheel-btn\" id=\"resetBtn\">\u27f3 RESET<\/button>\n    <\/div>\n<div class=\"wheel-result\" id=\"resultDisplay\">\ud83c\udfaf Click SPIN to try your luck<\/div>\n<\/div>\n<p><script>\n(function() {\n    \"use strict\";\n    const canvas = document.getElementById('wheelCanvas');\n    const ctx = canvas.getContext('2d');\n    const spinBtn = document.getElementById('spinBtn');\n    const resetBtn = document.getElementById('resetBtn');\n    const resultDisplay = document.getElementById('resultDisplay');\n    const SEGMENTS = [\n        { label: '\ud83c\udf81 Jackpot', color: '#e74c3c' },\n        { label: '\ud83c\udfae Game', color: '#3498db' },\n        { label: '\ud83c\udf55 Pizza', color: '#e67e22' },\n        { label: '\ud83d\udcda Book', color: '#2ecc71' },\n        { label: '\ud83c\udfb5 Music', color: '#9b59b6' },\n        { label: '\u2615 Coffee', color: '#f39c12' },\n        { label: '\ud83c\udfac Movie', color: '#1abc9c' },\n        { label: '\ud83d\udca4 Next Time', color: '#95a5a6' }\n    ];\n    const PI = Math.PI;\n    const TAU = PI * 2;\n    const SEG_COUNT = SEGMENTS.length;\n    const SEG_ANGLE = TAU \/ SEG_COUNT;\n    let currentRotation = 0;\n    let isSpinning = false;\n    let spinVelocity = 0;\n    let spinDeceleration = 0.985;\n    let minSpin = 0.01;\n    let animationId = null;\n    function drawWheel(rotation) {\n        const w = canvas.width;\n        const h = canvas.height;\n        const radius = Math.min(w, h) \/ 2 - 10;\n        const centerX = w \/ 2;\n        const centerY = h \/ 2;\n        ctx.clearRect(0, 0, w, h);\n        for (let i = 0; i < SEG_COUNT; i++) {\n            const startAngle = rotation + i * SEG_ANGLE;\n            const endAngle = startAngle + SEG_ANGLE;\n            ctx.beginPath();\n            ctx.moveTo(centerX, centerY);\n            ctx.arc(centerX, centerY, radius, startAngle, endAngle);\n            ctx.closePath();\n            ctx.fillStyle = SEGMENTS[i].color;\n            ctx.fill();\n            ctx.strokeStyle = '#fff';\n            ctx.lineWidth = 2;\n            ctx.stroke();\n            ctx.save();\n            ctx.translate(centerX, centerY);\n            ctx.rotate(startAngle + SEG_ANGLE \/ 2);\n            ctx.textAlign = 'center';\n            ctx.textBaseline = 'middle';\n            ctx.fillStyle = '#fff';\n            ctx.font = 'bold 18px Arial';\n            ctx.shadowColor = 'rgba(0,0,0,0.5)';\n            ctx.shadowBlur = 4;\n            const textRadius = radius * 0.65;\n            ctx.fillText(SEGMENTS[i].label, textRadius, 0);\n            ctx.restore();\n        }\n        ctx.beginPath();\n        ctx.arc(centerX, centerY, 25, 0, TAU);\n        ctx.fillStyle = '#f1c40f';\n        ctx.fill();\n        ctx.strokeStyle = '#fff';\n        ctx.lineWidth = 3;\n        ctx.stroke();\n        ctx.beginPath();\n        ctx.arc(centerX, centerY, 15, 0, TAU);\n        ctx.fillStyle = '#e67e22';\n        ctx.fill();\n    }\n    function getCurrentSegment(rotation) {\n        const pointerAngle = -PI \/ 2;\n        let rawAngle = (pointerAngle - rotation) % TAU;\n        if (rawAngle < 0) rawAngle += TAU;\n        const index = Math.floor(rawAngle \/ SEG_ANGLE);\n        return index % SEG_COUNT;\n    }\n    function animate() {\n        if (!isSpinning) return;\n        if (spinVelocity > minSpin) {\n            currentRotation = (currentRotation + spinVelocity) % TAU;\n            spinVelocity *= spinDeceleration;\n            drawWheel(currentRotation);\n            animationId = requestAnimationFrame(animate);\n        } else {\n            isSpinning = false;\n            spinBtn.disabled = false;\n            spinBtn.textContent = '\ud83c\udfb2 SPIN';\n            animationId = null;\n            const winIndex = getCurrentSegment(currentRotation);\n            const winText = SEGMENTS[winIndex].label;\n            resultDisplay.textContent = `\ud83c\udf89 Result: ${winText}`;\n            resultDisplay.className = 'wheel-result win';\n            const targetAngle = currentRotation % TAU;\n            const remainder = targetAngle % SEG_ANGLE;\n            const adjust = (remainder > SEG_ANGLE\/2) ? SEG_ANGLE - remainder : -remainder;\n            currentRotation += adjust;\n            drawWheel(currentRotation);\n        }\n    }\n    function spinWheel() {\n        if (isSpinning) return;\n        const spins = 8 + Math.random() * 7;\n        const extraAngle = Math.random() * TAU;\n        spinVelocity = (spins * TAU + extraAngle) * 0.08;\n        isSpinning = true;\n        spinBtn.disabled = true;\n        spinBtn.textContent = '\ud83c\udfb2 SPIN';\n        resultDisplay.textContent = '\ud83c\udf00 Spinning...';\n        resultDisplay.className = 'wheel-result';\n        if (animationId) {\n            cancelAnimationFrame(animationId);\n            animationId = null;\n        }\n        animate();\n    }\n    function resetWheel() {\n        if (isSpinning) {\n            isSpinning = false;\n            spinBtn.disabled = false;\n            spinBtn.textContent = '\ud83c\udfb2 SPIN';\n            if (animationId) {\n                cancelAnimationFrame(animationId);\n                animationId = null;\n            }\n        }\n        currentRotation = 0;\n        drawWheel(0);\n        resultDisplay.textContent = '\ud83d\udd04 Reset! Click SPIN to start';\n        resultDisplay.className = 'wheel-result';\n        spinVelocity = 0;\n    }\n    spinBtn.addEventListener('click', spinWheel);\n    resetBtn.addEventListener('click', resetWheel);\n    canvas.addEventListener('click', spinWheel);\n    document.addEventListener('keydown', function(e) {\n        if (e.code === 'Space' && !e.repeat) {\n            e.preventDefault();\n            spinWheel();\n        }\n        if (e.code === 'KeyR' && !e.repeat) {\n            resetWheel();\n        }\n    });\n    drawWheel(0);\n    resultDisplay.textContent = '\ud83c\udfaf Click the wheel or button to start';\n    console.log('\ud83c\udfa1 Wheel of Fortune loaded! Press Spacebar to spin, R to reset');\n})();\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfa1 Wheel of Fortune Click the wheel or button to start \ud83c\udfb2 &hellip; <a href=\"https:\/\/quicool.cn\/th\/2026\/09\/07\/wheel-of-fortune\/\" class=\"more-link\">\u0e2d\u0e48\u0e32\u0e19\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21<span class=\"screen-reader-text\"> &#8220;Wheel of Fortune&#8221;<\/span><\/a><\/p>\n","protected":false},"author":280408453,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_wpcom_ai_launchpad_first_post":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1399],"tags":[],"class_list":["post-832","post","type-post","status-publish","format-standard","hentry","category-games"],"acf":[],"jetpack_publicize_connections":[],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pheHhr-dq","jetpack-related-posts":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/quicool.cn\/th\/wp-json\/wp\/v2\/posts\/832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quicool.cn\/th\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quicool.cn\/th\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quicool.cn\/th\/wp-json\/wp\/v2\/users\/280408453"}],"replies":[{"embeddable":true,"href":"https:\/\/quicool.cn\/th\/wp-json\/wp\/v2\/comments?post=832"}],"version-history":[{"count":14,"href":"https:\/\/quicool.cn\/th\/wp-json\/wp\/v2\/posts\/832\/revisions"}],"predecessor-version":[{"id":894,"href":"https:\/\/quicool.cn\/th\/wp-json\/wp\/v2\/posts\/832\/revisions\/894"}],"wp:attachment":[{"href":"https:\/\/quicool.cn\/th\/wp-json\/wp\/v2\/media?parent=832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quicool.cn\/th\/wp-json\/wp\/v2\/categories?post=832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quicool.cn\/th\/wp-json\/wp\/v2\/tags?post=832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}