javascript - 用 JavaScript 掷骰子并检查输赢

Question

我有一个 JavaScript 代码，可以用 0 到 9999 的随机数掷骰子，现在当我按下按钮时，脚本开始掷骰子，但它不停地滚动。你能帮我编写这段代码，在滚动后选择一个数字，并检查它是输还是赢，具体取决于游戏的类型(位于第一车道)，并将此状态转发给 JavaScript，以便它可以显示代码选取的数字并显示输赢。这是代码:

    var playing = 0;
    $('#play').on('click', function (){
        if (playing == 0){
            playing = 1;
            $(this).html('...ROLLING...');
            $('.error_cont').css('visibility','hidden');
            var amount = parseInt($('#bet_value').val());
            $('#bet_value').val($('#bet_value').val().replace(/\D/g,''));
            var error = '';


            if (error == ''){
                $('.bet_result').text('ROLLING');
                $('.bet_cont_roll_inside').removeClass('lose_bet_inside win_bet_inside');
                $('.bet_result').removeClass('result_lose result_win');
                $('.rolling_bet').removeClass('result_lose result_win');
                $('.rolling_bet').removeClass('flash shake');

                var loop = setInterval(function(){
                    $('.rolling_bet').html(getRandomInt(0, 9999));
                }, 100);
                var loop2 = setInterval(function(){
                    var randint =  getRandomInt(1, 7);

                    $('.bet_cont_roll_inside').css('background-image','url(http://localhost/image/dice/dice'+ randint +'.png)');
                }, 300);
                $.post( "http://localhost/index.php", {'amount': amount, 'type': type, '_token': _token}, function( data ){
                    if (data.success){
                        setTimeout(function (){
                            clearInterval(loop);
                            clearInterval(loop2);
                            var result = data.rolled;
                            var status = data.win ? 'WIN' : 'LOSE';
                            if(status=='WIN') {
                                $('.bet_cont_roll_inside').addClass('win_bet_inside');
                                $('.bet_result').addClass('result_win');
                                $('.rolling_bet').addClass('flash result_win');
                                if (data.profit === undefined || data.profit === null) {
                                    $('.his_latest_rolls').prepend('<div class="his_won home_bet_his animated flipInX"><div><span class="glyphicon glyphicon-thumbs-up"></span> YOU WON</div> +0 coins</div>');
                                    $('.his_latest_rolls').find('.home_bet_his:last').remove()
                                } else {    
                                    $('.his_latest_rolls').prepend('<div class="his_won home_bet_his animated flipInX"><div><span class="glyphicon glyphicon-thumbs-up"></span> YOU WON</div> +'+ (data.profit + amount)+' coins</div>');
                                    $('.his_latest_rolls').find('.home_bet_his:last').remove()
                                }


                            } else {
                                $('.bet_cont_roll_inside').addClass('lose_bet_inside');
                                $('.bet_result').addClass('result_lose');
                                $('.rolling_bet').addClass('shake result_lose');
                                if (data.profit === undefined || data.profit === null) {
                                    $('.his_latest_rolls').prepend('<div class="his_lost home_bet_his animated flipInX"><div><span class="glyphicon glyphicon-thumbs-down"></span> YOU LOST</div> -0 coins</div>');
                                    $('.his_latest_rolls').find('.home_bet_his:last').remove()

                                } else {
                                    $('.his_latest_rolls').prepend('<div class="his_lost home_bet_his animated flipInX"><div><span class="glyphicon glyphicon-thumbs-down"></span> YOU LOST</div> -'+amount+' coins</div>');
                                    $('.his_latest_rolls').find('.home_bet_his:last').remove()
                                }
                            }

                            if (data.total_bets > 0){
                                $('#balance').html(data.coins);
                                $('#total_bets').html(data.total_bets);
                                $('#my_bets').html(data.my_bets);
                            }

                            $('.bet_result').text(status);
                            $('.rolling_bet').text(result);
                            setTimeout(function (){
                                playing = 0;
                                $('#play').html('ROLL THE DICE');
                            }, 200);
                        }, 800);
                    } else {
                        clearInterval(loop);
                        clearInterval(loop2);
                        $('#bet_value').val('');
                        var update_noty = noty({
                                    theme: 'csgonoty',
                                    text: '<span class="glyphicon glyphicon-ban-circle"></span>' + data.error,
                                    layout: 'topCenter',
                                    type: 'error',
                                    animation: {
                                        open: 'animated flipInX', // Animate.css class names
                                        close: 'animated flipOutX', // Animate.css class names
                                        easing: 'swing',
                                        speed: 50 // opening & closing animation speed
                                    }
                                }); 
                    }
                }, 'json');
            } else {
                $('.error_cont').html('<span class="glyphicon glyphicon-exclamation-sign"></span> ' + error);
                $('.error_cont').css('visibility','visible');
                $('#bet_value').val('');
            }
        }

    });




function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

Answer 1

您确定您的 $.post 请求确实已成功发送吗？
如果请求失败，那么您的间隔将永远不会被清除。

尝试以下操作:

$.post( "http://localhost/index.php", {'amount': amount, 'type': type, '_token': _token}, function( data ) {
    // your old $.post processing code here
}, 'json').fail(function () {
    clearInterval(loop);
    clearInterval(loop2);
});

更新:附加说明

假设您的请求失败。在这种情况下，将调用 .fail(function) 并且骰子将停止滚动。 您的获胜/失败代码显然取决于成功的请求，因此您应该确保请求会成功。
我假设服务器在您的控制之下，因此您可以检查发生了什么。

现在您可以尝试像这样处理 POST 请求失败:

$.post( "http://localhost/index.php", {'amount': amount, 'type': type, '_token': _token}, function( data ) {
    // your old $.post processing code here
}, 'json').fail(function (jqXHR, textStatus, errorThrown) {
    clearInterval(loop);
    clearInterval(loop2);
    // call some function to show the message
    //showErrorMessage('Oh no!');    
    // or just show alert dialog with the message
    alert('The request failed ' + jqXHR.statusCode() + ' ' + textStatus);
    // or push the request result into the browser console
    console.log(jqXHR, textStatus, errorThrown);
});

还建议在网络浏览器中使用内置调试器。
例如 Firefox 有 nice one和 Chrome too .