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>
