Visualizzazione risultati 1 fino 6 di 6

Discussione: Problema script Jquery - Bingo caller

  1. #1
    matteocanini non è connesso Neofita
    Data registrazione
    02-05-2014
    Messaggi
    2

    Predefinito Problema script Jquery - Bingo caller

    Ciao ragazzi!

    Spero possiate aiutarmi. Premetto che non ho praticamente esperienza con Javascript e sto iniziando adesso ad avventurarmi in questo mondo.

    Ho questo codice che non funziona come dovrebbe. E' un bingo caller e dovrebbe estrarre numeri random fino a 90; a volte termina la conta e chiama tutti i numeri, mentre spesso si blocca prima ed esce un pop-up che dice "Full house". Si blocca in maniera del tutto casuale quando mancano pochi numeri (a volte 5, altre volte 3) e non capisco perché. Vorrei semplicemente che chiamasse tutti i numeri senza mai bloccarsi.

    Codice:
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
            <script>
                (function($){
                    $.fn.extend({
                        numAnim: function(options) {
                            if ( ! this.length)
                                return false;
    
                            this.defaults = {
                                endAt: 90,
                                numClass: 'autogen-num',
                                duration: 0.5,   // seconds
                                interval: 25  // ms
                            };
                            var settings = $.extend({}, this.defaults, options);
    
                            var $num = $('<span/>', {
                                'class': settings.numClass 
                            });
    
                            return this.each(function() {
                                var $this = $(this);
    
                                // Wrap each number in a tag.
                                var frag = document.createDocumentFragment(),
                                    numLen = settings.endAt.toString().length;
                                for (x = 0; x < numLen; x++) {
                                    var rand_num = Math.floor( Math.random() * 10 );
                                    frag.appendChild( $num.clone().text(rand_num)[0] )
                                }
                                $this.empty().append(frag);
    
                                var get_next_num = function(num) {
                                    ++num;
                                    if (num > 9) return 0;
                                    return num;
                                };
    
                                // Iterate each number.
                                $this.find('.' + settings.numClass).each(function() {
                                    var $num = $(this),
                                        num = parseInt( $num.text() );
    
                                    var interval = setInterval( function() {
                                        num = get_next_num(num);
                                        $num.text(num);
                                    }, settings.interval);
    
                                    setTimeout( function() {
                                        clearInterval(interval);
                                    }, settings.duration * 1000 - settings.interval);
                                });
    
                                setTimeout( function() {
                                    $this.text( settings.endAt.toString() );
                                    $("#num-" + settings.endAt).addClass("generated");
                                    generated_numbers.push(settings.endAt);
                                }, settings.duration * 1000);
                            });
                        }
                    });
                })(jQuery);
    
                var generated_numbers = [];
    
                $(function(){
                    for(i=1; i<=90; i++){
                        $("<div />").addClass("num").html(i).attr("id","num-" + i).appendTo("#grid-container");
                    }
    
                    var cw = $('.num').width();
                    $('.num').css({'height':cw+'px','line-height':cw+'px'});
                });
    
                function generateNum(){
                    if(generated_numbers.length == 90){
                         alert("Full House!");
                        return;
                    }
                    while(true){
                        var i = getRandomInt(1, 90);
                        if($.inArray(i, generated_numbers) == -1){
                            //$("#number").html(i);
                            $("#number").numAnim({
                                endAt: i
                            });
                            //$("#num-" + i).addClass("generated");
                            //generated_numbers.push(i);
                            //setTimeout("generateNum()",200);
                            break;
                        }
                    }
                }
    
                function getRandomInt(min, max) {
                    return Math.floor(Math.random() * (max - min + 1)) + min;
                }
            </script>
    Qua il CSS, non so se puó aiutare:

    Codice:
    <style>
                *{
                    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                }
                .container{
                    text-align: center;
                }
                #grid-container{
                	padding-top: 13px;
                    padding-bottom: 13px;
                    border-radius: 10px;
                    margin-top: 30px;
                    margin-bottom: 30px;
                    max-width: 900px;
                    text-align: center;
                    margin-left: 30px;
                    margin-right:30px;
                    BACKGROUND-COLOR: #bd2a26;
                }
                .num{
                    width: 9%;
                    margin: 3px;
                    border: 0px;
                    display: inline-block;
                    color: #fff;
                    font-size: 40px;
                    box-sizing: border-box;
                    background-color: #e63935;
                    border-radius: 5px;
                }
                .generated{
                    background-color: #2d82eb;
                    color: #fff;
                }
                #generator-container{
                    border:2px solid #bd2a26;
                    display: block;
                    position: fixed;
                    left: 20px;
                    top: 0px;
                    padding: 20px;
                    text-align: center;
                    box-sizing: border-box;
                    background-color: #ffe400;
                }
    
                #number{
                    font-size: 40px;
                    text-align: center;
                    color: #000;
                    width: 45px;
                    margin-top: 20px;
                    font-weight: bold;
                    display: inline-block;
                    background-color: #e63935;
                    padding: 60px;
                    border-radius: 90px;
                    border:0px;
                    background-image: url(http://matteocanini.altervista.org/bulldogbingo/biglia.png);
                    background-repeat: no-repeat;
     				background-size: 165px 160px;
                    
                }
    
                #btn-generate{
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    background-color: #2d82eb;
                    color: white;
                    margin-bottom: 5px;
                    width: 200px;
                    font-size: 20px;
                    padding: 20px;
                    cursor: pointer;
                    border:0px solid #2d82eb;
                    border-radius: 5px;
                    border: none; 
    border-width: 0; 
    box-shadow: none;
                }
                #btn-generate:active{
                    position: relative;
                    border:0px solid #e63935;
                    left: 0;
                    top: 0;
                    }
                #btn-generate:hover{
                    position: relative;
                    border:0px solid #e63935;
                    left: 0;
                    top: 0;
                }
    
                #banner-container{
                    border:0px solid #888;
                    display: block;
                    position: fixed;
                    right: 20px;
                    top: 80px;
                    padding: 0px;
                    text-align: center;
                    box-sizing: border-box;
                    background-color: #FFF;
                }
    
                #footer{
                    font-size: 12px;
                    text-align: center;
                    margin-top: 20px;
                    margin-bottom: 20px;
                    color: #888;
                }
    
                a:link, a:visited{
                    color: #2d82eb;
                    text-decoration: none;
                    border: none;
                    border: none; 
    border-width: 0; 
    box-shadow: none;
                }
    input {border:0;outline:0;}
    input:focus {outline:none!important;}
                a:hover{
                    color: red;
                    border: none;
                }
    
                #um-banner{
                    margin-top: 15px;
                    border-top: 0px; 
                    padding-top: 15px;
                }
            </style>

  2. #2
    GraphOGLRisorse è connesso ora Altervistiano Junior
    Data registrazione
    14-02-2015
    Messaggi
    511

    Predefinito

    Salve,
    quel + 1 dentro a floor() in getRandomInt(), non serve.

    Col + 1, si ha nel suo caso floor(random*90-1+1)+1 ovvero, floor(random*90)+1. Ciò significa, che quando random restituisce 89 il risultato nella funzione sarà 90, mentre qunado random restuisce 90 il risultato funzione sarà 91.

    Cordiali saluti.
    Ultima modifica di GraphOGLRisorse : 18-06-2020 alle ore 02.29.47

  3. #3
    mzanella non è connesso AlterGuru
    Data registrazione
    29-12-2015
    Messaggi
    1,625

    Predefinito

    Col + 1, si ha nel suo caso floor(random*90-1+1)+1 ovvero, floor(random*90)+1. Ciò significa, che quando random restituisce 89 il risultato nella funzione sarà 90, mentre qunado random restuisce 90 il risultato funzione sarà 91.
    Math.random restituisce numeri nell'intervallo [0; 1) (1 escluso). Math.floor(Math.random * 90) restituirebbe numeri naturali tra 0 e 89, il "+1" è necessario a traslare la distribuzione in [1; 90].

    Si blocca in maniera del tutto casuale quando mancano pochi numeri (a volte 5, altre volte 3) e non capisco perché. Vorrei semplicemente che chiamasse tutti i numeri senza mai bloccarsi.
    Il codice scritto così è un po' complicato da decifrare, forse un refactoring aiuterebbe.
    Comunque Full house viene mostrato quando il vettore generated_numbers contiene 90 elementi. Immagino che in teoria solo i numeri estratti (senza ripetizione) possano finire nel vettore, eppure in una delle funzioni di callback compare:
    Codice:
    generated_numbers.push(settings.endAt);
    Cosa rappresenta settings.endAt? È normale che venga inserito nel vettore dei numeri generati?

    I suggerimenti che do più spesso:


  4. #4
    darbula non è connesso AlterGuru
    Data registrazione
    24-04-2011
    Messaggi
    1,866

    Predefinito

    Modificato non inerente.
    Ultima modifica di darbula : 18-06-2020 alle ore 14.59.10

  5. #5
    GraphOGLRisorse è connesso ora Altervistiano Junior
    Data registrazione
    14-02-2015
    Messaggi
    511

    Predefinito

    Tralasciando quanto esposto nel mio primo messaggio, che è stato poi giustamente corretto da mzanella.

    Ho fatto delle prove aggiungendo sun un file il codice html minimo al resto per visualizzare la tabella, il pulsante e numero estratto.

    Il codice così modificato funziona:
    Codice:
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
            <script>
                (function($){
                    $.fn.extend({
                        numAnim: function(options) {
                            if ( ! this.length)
                                return false;
    
                            this.defaults = {
                                endAt: 90,
                                numClass: 'autogen-num',
                                duration: 0.5,   // seconds
                                interval: 25  // ms
                            };
                            var settings = $.extend({}, this.defaults, options);
    
                            var $num = $('<span/>', {
                                'class': settings.numClass 
                            });
    
                            return this.each(function() {
                                var $this = $(this);
    
                                // Wrap each number in a tag.
                                var frag = document.createDocumentFragment(),
                                    numLen = settings.endAt.toString().length;
                                for (x = 0; x < numLen; x++) {
                                    var rand_num = Math.floor( Math.random() * 10 );
                                    frag.appendChild( $num.clone().text(rand_num)[0] )
                                }
                                $this.empty().append(frag);
    
                                var get_next_num = function(num) {
                                    ++num;
                                    if (num > 9) return 0;
                                    return num;
                                };
    
                                // Iterate each number.
                                $this.find('.' + settings.numClass).each(function() {
                                    var $num = $(this),
                                        num = parseInt( $num.text() );
    
                                    var interval = setInterval( function() {
                                        num = get_next_num(num);
                                        $num.text(num);
                                    }, settings.interval);
    
                                    setTimeout( function() {
                                        clearInterval(interval);
                                    }, settings.duration * 1000 - settings.interval);
                                });
    
                                setTimeout( function() {
                                    $this.text( settings.endAt.toString() );
                                    //$("#num-" + settings.endAt).addClass("generated");
                                    //generated_numbers.push(settings.endAt);
                                }, settings.duration * 1000);
                            });
                        }
                    });
                })(jQuery);
    
                var generated_numbers = [];
    
                $(function(){
                    for(i=1; i<=90; i++){
                        $("<div />").addClass("num").html(i).attr("id","num-" + i).appendTo("#grid-container");
                    }
    
                    var cw = $('.num').width();
                    $('.num').css({'height':cw+'px','line-height':cw+'px'});
                });
    
                function generateNum(){
                    if(generated_numbers.length == 90){
                         alert("Full House!");
                        return;
                    }
                    while(true){
                        var i = getRandomInt(1, 90);
                        if($.inArray(i, generated_numbers) == -1){
                            //$("#number").html(i);
                            $("#number").numAnim({
                                endAt: i
                            });
                            $("#num-" + i).addClass("generated");
                            generated_numbers.push(i);
                            setTimeout("generateNum()",duration * 1000);
                            break;
                        }
                    }
                }
    
                function getRandomInt(min, max) {
                    return Math.floor(Math.random() * (max - min + 1)) + min;
                }
            </script>

    Ho testato la modifica per 10 volte consegutive e non mi ha dato errori.

    Cordiali saluti.

  6. #6
    matteocanini non è connesso Neofita
    Data registrazione
    02-05-2014
    Messaggi
    2

    Predefinito

    Citazione Originalmente inviato da GraphOGLRisorse Visualizza messaggio
    Tralasciando quanto esposto nel mio primo messaggio, che è stato poi giustamente corretto da mzanella.

    Ho fatto delle prove aggiungendo sun un file il codice html minimo al resto per visualizzare la tabella, il pulsante e numero estratto.

    Il codice così modificato funziona:
    Codice:
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
            <script>
                (function($){
                    $.fn.extend({
                        numAnim: function(options) {
                            if ( ! this.length)
                                return false;
    
                            this.defaults = {
                                endAt: 90,
                                numClass: 'autogen-num',
                                duration: 0.5,   // seconds
                                interval: 25  // ms
                            };
                            var settings = $.extend({}, this.defaults, options);
    
                            var $num = $('<span/>', {
                                'class': settings.numClass 
                            });
    
                            return this.each(function() {
                                var $this = $(this);
    
                                // Wrap each number in a tag.
                                var frag = document.createDocumentFragment(),
                                    numLen = settings.endAt.toString().length;
                                for (x = 0; x < numLen; x++) {
                                    var rand_num = Math.floor( Math.random() * 10 );
                                    frag.appendChild( $num.clone().text(rand_num)[0] )
                                }
                                $this.empty().append(frag);
    
                                var get_next_num = function(num) {
                                    ++num;
                                    if (num > 9) return 0;
                                    return num;
                                };
    
                                // Iterate each number.
                                $this.find('.' + settings.numClass).each(function() {
                                    var $num = $(this),
                                        num = parseInt( $num.text() );
    
                                    var interval = setInterval( function() {
                                        num = get_next_num(num);
                                        $num.text(num);
                                    }, settings.interval);
    
                                    setTimeout( function() {
                                        clearInterval(interval);
                                    }, settings.duration * 1000 - settings.interval);
                                });
    
                                setTimeout( function() {
                                    $this.text( settings.endAt.toString() );
                                    //$("#num-" + settings.endAt).addClass("generated");
                                    //generated_numbers.push(settings.endAt);
                                }, settings.duration * 1000);
                            });
                        }
                    });
                })(jQuery);
    
                var generated_numbers = [];
    
                $(function(){
                    for(i=1; i<=90; i++){
                        $("<div />").addClass("num").html(i).attr("id","num-" + i).appendTo("#grid-container");
                    }
    
                    var cw = $('.num').width();
                    $('.num').css({'height':cw+'px','line-height':cw+'px'});
                });
    
                function generateNum(){
                    if(generated_numbers.length == 90){
                         alert("Full House!");
                        return;
                    }
                    while(true){
                        var i = getRandomInt(1, 90);
                        if($.inArray(i, generated_numbers) == -1){
                            //$("#number").html(i);
                            $("#number").numAnim({
                                endAt: i
                            });
                            $("#num-" + i).addClass("generated");
                            generated_numbers.push(i);
                            setTimeout("generateNum()",duration * 1000);
                            break;
                        }
                    }
                }
    
                function getRandomInt(min, max) {
                    return Math.floor(Math.random() * (max - min + 1)) + min;
                }
            </script>

    Ho testato la modifica per 10 volte consegutive e non mi ha dato errori.

    Cordiali saluti.
    Grazie mille! Ho testato il codice almeno 5 volte e sembra che ora funzioni senza problemi.

    Restituisce la scritta "Full house" solo quando vengono chiamati tutti 90 i numeri.

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •