使用jQuery动画实现老虎机旋转减速停在中奖位置的技术问题

嘿，我明白你的问题了——现在的老虎机是转够固定圈数后直接跳到中奖位置，显得很突兀对吧？咱们可以调整逻辑，让旋转逐渐减速并精准停在中奖号码上，完全避免跳转的问题。

核心修改思路 #

• 提前锁定中奖目标：点击「Play」按钮时就生成中奖号码，这样整个旋转过程都明确知道要停在哪里
• 动态渐进减速：随着旋转次数增加，逐步降低旋转速度（提高setTimeout的延迟时间），模拟真实老虎机的减速过程
• 精准停止判断：不再用固定圈数停止，而是当旋转到中奖号码，且速度已经足够慢时，直接停止并触发中奖样式

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.jackpot { 
    display: inline-block; 
    padding: 10px; 
    margin: 10px; 
    border-radius: 50%; 
    border: 1px solid transparent; 
    transition: 0.3s ease; /* 缩短过渡时间让旋转更流畅 */
} 
.spin-default { 
    border: 1px solid orange; 
    background-color: #eee; 
} 
.jackpot.active-spin { 
    border: 1px solid blue; 
    background-color: red; 
} 
.jackpot.iswin { 
    border: 1px solid yellow; 
    background-color: green; 
}
</style>
<div>
    <table>
        <tr>
            <td><div class="jackpot spin-default jack-1">JK</div></td>
            <td><div class="jackpot spin-default jack-2">TR</div></td>
            <td><div class="jackpot spin-default jack-3">JK</div></td>
            <td><div class="jackpot spin-default jack-4">IC</div></td>
            <td><div class="jackpot spin-default jack-5">JK</div></td>
        </tr>
        <tr>
            <td><div class="jackpot spin-default jack-12">TR</div></td>
            <td></td><td></td><td></td>
            <td><div class="jackpot spin-default jack-6">JK</div></td>
        </tr>
        <tr>
            <td><div class="jackpot spin-default jack-11">TR</div></td>
            <td><div class="jackpot spin-default jack-10">JK</div></td>
            <td><div class="jackpot spin-default jack-9">IC</div></td>
            <td><div class="jackpot spin-default jack-8">JK</div></td>
            <td><div class="jackpot spin-default jack-7">IC</div></td>
        </tr>
    </table>
</div>
<button class="play">Play</button>

<script>
$(function() {
    var current = 1;
    var num = 0;
    var max = $('.jackpot').length + 1;
    var baseSpeed = 80; // 初始旋转速度
    var speedIncrement = 20; // 每次减速的增量
    var slowThreshold = 300; // 速度慢到这个值时，准备停在中奖位置
    var winner = null;

    function change() {
        // 切换当前元素的旋转样式
        $('.jack-' + current).toggleClass("active-spin spin-default");
        current++;
        if (current == max) {
            current = 1;
            num++;
            // 每转完一圈就减速一次
            baseSpeed += speedIncrement;
        }

        // 判断是否停止：速度足够慢，且当前位置是中奖号码
        if (baseSpeed >= slowThreshold && current == winner) {
            $('.jackpot').removeClass("active-spin").addClass("spin-default");
            $('.jack-' + winner).addClass("iswin");
            // 重置参数，准备下一次游戏
            current = winner;
            baseSpeed = 80;
            num = 0;
            winner = null;
        } else {
            setTimeout(function() { change() }, baseSpeed);
        }
    }

    $('.play').click(function(event) {
        if (winner !== null) return; // 防止重复点击
        $('.jackpot').removeClass("iswin").addClass('spin-default');
        // 点击时就确定中奖号码
        winner = Math.floor((Math.random() * 12) + 1);
        setTimeout(function() { change() }, baseSpeed);
    });
});
</script>

关键细节说明 #

1. 提前生成中奖号码：点击Play时就确定winner，让旋转过程有明确的停止目标
2. 渐进减速：每转完一整圈（current重置为1时），就增加baseSpeed的值，让旋转越来越慢
3. 精准停止判断：当速度达到slowThreshold（足够慢），且当前旋转到的号码正好是winner时，立即停止并触发中奖样式，完全没有跳转
4. 防止重复触发：添加了if (winner !== null) return，避免用户在旋转过程中重复点击Play按钮

内容的提问来源于stack exchange，提问作者Peter