Mejorando script de Bingo

Código Javascript :

var Bingo = {
    min: 01,
    max: 90,
    numerosSorteados: new Array(),
    windowDocument: null,

    init: function(parent){
        this.windowDocument = parent;
        this.bind();

    },

    bind: function(){
        $("#boton-borrar-todo").click(function(){
            Bingo.botonBorrarTodoAction();
        });
        $("#boton-jugar").click(function(){
            Bingo.botonJugarAction();
        });
        $(".texto").click(function(){
            Bingo.seleccionarTipoJuego(this);
        });
        $("#boton-sortear").click(function(){
            Bingo.jugar();
        });
        $(".wp-pagenavi-span").click(function(){
            Bingo.seleccionarBolaAction($('#' + this.id));
        });
    },

    seleccionarTipoJuego: function(boton){
        if(!$(boton).hasClass( "texto-seleccionado" )){
            $(boton).addClass('texto-seleccionado', 1000, 'easeOutQuart');
            var aux = $(boton).attr('id');
            switch(aux){
                case 'boton-terna':
                    $('#boton-linea').removeClass('texto-seleccionado', 500, 'easeOutQuart');
                    $('#boton-bingo').removeClass('texto-seleccionado', 500, 'easeOutQuart');
                    break;
                case 'boton-linea':
                    $('#boton-terna').removeClass('texto-seleccionado', 500, 'easeOutQuart');
                    $('#boton-bingo').removeClass('texto-seleccionado', 500, 'easeOutQuart');
                    break;
                case 'boton-bingo':
                    $('#boton-terna').removeClass('texto-seleccionado', 500, 'easeOutQuart');
                    $('#boton-linea').removeClass('texto-seleccionado', 500, 'easeOutQuart');
                    break;
            }
        } else {
            $(boton).removeClass('texto-seleccionado', 1000, 'easeOutQuart');
        }
    },

    botonBorrarTodoAction: function(){
        window.top.location.reload();
    },

    botonJugarAction: function(){
        bootbox.dialog({
            message: "<p>Quiere activar<br/>el modo automatico</p>",
            title: "",
            buttons: {
                danger: {
                    label: "No",
                    className: "btn-danger",
                    callback: function() {

                    }
                },
                main: {
                    label: "Si",
                    className: "btn-primary",
                    callback: function() {
                        bootbox.hideAll();
                        Bingo.numerosSorteados = new Array();

// ---------- Aqui el modo automatico con el retardo
// --- este es el body---- <input class="botonStop" type="button" id="stop" value="Pausar">
// --- <input class="botonAuto" type="button" id="boton-jugar" value="Automatico">
// --- <input class="botonStart" type="button" id="start" value="Play">

var milisegundos = 3000;
var x = 0;
$(document).ready(function() {
$(":button#start").bind("click", function() {
timer = setInterval('Bingo.jugar()', milisegundos);
});
$(":button#stop").bind("click", function() {
timer = clearInterval(timer);
});
});
// -------------------
                        Bingo.jugar();
                    }
                }
            }
        });
    },

    anularBola: function(numero){
        $('#bola-actual').html('-');
        $('#bola-salio-'+numero).remove();
        $('#bola-'+numero).removeClass('wp-pagenavi-span-bola-salio');
        $('#bola-'+numero).addClass('wp-pagenavi-span');
    },

    seleccionarBolaAction: function(bola){
        if(bola.hasClass( "wp-pagenavi-span-bola-salio" )){
            console.log("La bola seleccionada YA SALIO!");
        }
        else{
            var n = bola.html();
            console.log('Numero marcado: ' + n);
            this.generarBolaGigante(n);
            this.marcarBolaYaSalio(bola);
            this.numerosSorteados.push(n);
            console.log(this.numerosSorteados);
        }
    },

    marcarBolaYaSalio: function(bola){
        bola.addClass('wp-pagenavi-span-bola-salio', 1000, 'easeOutExpo',
            function(){
                bola.removeClass('wp-pagenavi-span');
                var numero = bola.html();
                $('#bola-actual-flotante').remove();
                $('#ultimas-6').prepend('<span class="wp-pagenavi-span-bola-salio" onclick="Bingo.anularBola(\''+numero+'\');" id="bola-salio-'+numero+'">'+numero+'</span>');
            }
        );
    },

    generarBolaGigante: function(numero){
        $('#bola-actual').html(numero);
        $( window.document.body ).prepend('<span class="bola-actual-flotante" id="bola-actual-flotante">'+numero+'</span>');
        $( ".bola-actual-flotante" ).position({
            of: $('#left-content')
        });
    },

    generarNumeroAleatorio: function() {

// -----Aqui añadido 1 para evitar la repeticion
while (repe != false)
// -----

        var n =  Math.floor(Math.random() * (Bingo.max - Bingo.min + 01)) + Bingo.min;
        if(n < 10){
            n = "0" + n.toString();

// -----Aqui añadido 2 para evitar la repeticion
var repe:Boolean = repetido(n); } Bingo.numerosSorteados.push(n); return n;
// -----

        }

// -----Aqui añadido 3 para evitar la repeticion
function repetido(n:Number):Boolean { var repe:Boolean = false; for (i=0; i&lt;Bingo.numerosSorteados.length; i++) { if (n == Bingo.numerosSorteados[i]) { repe = true; } } return repe; }
// -----

        console.log('Numero generado: ' + n.toString());

// -----Aqui añadido para el audio
document.all.sound.src =n +'.mp3';
console.log('Mi audio es '+n+'.mp3');
// -----

        return n.toString();
    },

    jugar: function(){
        console.log(_.size(Bingo.numerosSorteados));
        if(_.size(Bingo.numerosSorteados) >= (Bingo.max)){
            Bingo.showMensajeJuegoFinalizado();
            return;
        }
        var n = Bingo.generarNumeroAleatorio();
        if(_.contains(Bingo.numerosSorteados, n)){
            // controlar que aqui si ya tiene todos los numeros no genere infinitamente
            console.log('Numero sorteado ya salio: ' + n);
            Bingo.jugar();
        }
        else{
            Bingo.seleccionarBolaAction($('#bola-' + n));
        }
    },

    showMensajeJuegoFinalizado: function(){
        bootbox.dialog({
            message: "<p>Todos los números ya fueron sorteados.<br/>Desea LIMPIAR la pizarra?</p>",
            title: "El Juego a finalizado",
            buttons: {
                danger: {
                    label: "No",
                    className: "btn-danger",
                    callback: function() {

                    }
                },
                main: {
                    label: "Si, limpiar",
                    className: "btn-primary",
                    callback: function() {
                        bootbox.hideAll();
                        Bingo.botonBorrarTodoAction();
                    }
                }
            }
        });
    }
};

$( window.document ).ready(function() {
    Bingo.init(this);
});

El script esta funcionando perfectamente. solo le queda que no repita numeros, y al ser posible, suprimir el botom automatico y que se active con el boton start (Play) de modo que active el "setInterval" y la opcion "Si" al mismo tiempo.

script Para el modo automático:

botonJugarAction: function(){
bootbox.dialog({
message: "<p>Quiere activar<br/>el modo automatico</p>",
title: "",
buttons: {
danger: {
label: "No",
className: "btn-danger",
callback: function() {

}
},
main: {
label: "Si",
className: "btn-primary",
callback: function() {
bootbox.hideAll();
Bingo.numerosSorteados = new Array();

// ---------- Aqui el modo automatico con el retardo
var milisegundos = 3000;
var x = 0;
$(document).ready(function() {
$(":button#start").bind("click", function() {
timer = setInterval('Bingo.jugar()', milisegundos);
});
$(":button#stop").bind("click", function() {
timer = clearInterval(timer);
});
});

Bingo.jugar();
}
}
}
});
},
// -------------------

Los Botones Para el modo automático:

<input class="botonStop" type="button" id="stop" value="Pausar">
<input class="botonAuto" type="button" id="boton-jugar" value="Automatico">
<input class="botonStart" type="button" id="start" value="Play">

El script Para inpedir la repeticion de números:

generarNumeroAleatorio: function() {
// -----Aqui añadido 1 para evitar la repeticion
while (repe != false)
// -----

var n = Math.floor(Math.random() * (Bingo.max - Bingo.min + 01)) + Bingo.min;
if(n < 10){
n = "0" + n.toString();

// -----Aqui añadido 2 para evitar la repeticion
var repe:Boolean = repetido(n); } Bingo.numerosSorteados.push(n); return n;
// -----

}

// -----Aqui añadido 3 para evitar la repeticion
function repetido(n:Number):Boolean { var repe:Boolean = false; for (i=0; i&lt;Bingo.numerosSorteados.length; i++) { if (n == Bingo.numerosSorteados[i]) { repe = true; } } return repe; }
// -----

la solucion a eso puede que te sirva esto hilo con algo similar a tu problema -> http://foros.cristalab.com/juego-4-fotos-1-palabra-t117283/

Si te refieres a esto:

function joc(uno,dos,tres,cuatro) {
alert(uno+dos+tres+cuatro);
switch (uno) {
case "raton":
w['miRat'] = "raton";
alert("¡Has acertado!");
break;
default:
w['miRat'] = "¡Has fallado!";
}

switch (dos) {
case "presidentes":
w['miPres'] = "presidentes";
alert("¡Has acertado!");
break;
default:
w['miPres'] = "¡Has fallado!";
}

switch (tres) {
case "deporte":
w['miDep'] = "deporte";
alert("¡Has acertado!");
break;
default:
w['miDep'] = "¡Has fallado!";
}

switch (cuatro) {
case "euskadi":
w['miSpa'] = "euskadi";
alert("¡Has acertado!");
break;
default:
w['miSpa'] = "¡Has fallado!";
}
}
D[g]('i1').onclick=function(){alert(A[0]);
joc(A[0],A[1],A[2],A[3]);
}

No sabría adaptarlo a mi sistema.

A mi me gustaría que desde el mismo botón "Play" Se activaran las dos funciones.

leete el hilo la idea basica de la solucion para que no se repita es crear dos arrays uno en el que es estatico el otro que varia su contenido y length en funcion de los resultados del usuario asi los numeros no se repiten y cuando finaliza el ciclo se reinicia. los comando para hacer eso estan en el hilo. haz pruebas en un html aparte y asi vas cojiendo la idea de como implementarlo en tu proyecto

he leído de todo lo que he encontrado y he probado varias cosas, pero sigue nada de nada.

El ultimo intento podría valer pero el sistema deja de funcionar, creo que no se encajarlo y el tiempo se agota.

Esto es lo que le he añadido:

function repetido(n:Number):Boolean {
var repe:Boolean = false;
for (i=0; i&lt;bola.length; i++) {
if (n == bola[i]) {
repe = true;
}
}
return repe;
}

generarNumeroAleatorio: function() {

while (repe != false) {

var n = Math.floor(Math.random() * (Bingo.max - Bingo.min + 1)) + Bingo.min;
if(n < 10){
n = "0" + n.toString();
}
document.all.sound.src =n +'.mp3';
console.log('Mi audio es '+n+'.mp3');
console.log('Numero generado: ' + n.toString());

var repe:Boolean = repetido(n);
}
bola.push();

return n.toString();
},

He puesto en rojo los cambios que he hecho para intentar que no se repitan los números.
Básicamente es lo único que le falta.
Con el resto ya lo tengo solucionado.

¿Qué es lo que estoy haciendo mal?

Un nro no repetido es un clásico del foro, y hay al menos una decena de respuestas. La mas simple para mi es la de usar dos arrays, en base a esta idea

numeros = [1,2,3,4,etc]
sacados = [];
sacados.push(numeros.splice(Math.floor(Math.random() * numeros.length)))

Eso te va sacando los números de un array y te los pone en el otro. En tu código existe el segundo array, que se llama numerosSorteados, pero no el primero.
Si analizas el approach del juego es sacar numeros hasta que no los encuentre en numerosSorteados, lo cual es un aproach mas ineficiente. Modificá la función generarNumeroAleatorio con esta idea y listo.

Jorge

No se las veces que he modificado el código y lo único que consejo es empeorarlo.

Así se aprende amigo. Siguiendo con la idea, la aplicación sería algo así

Código :

var Bingo = {
    min: 01,
    max: 90,
    numerosSorteados: new Array(),
    numerosDisponibles: new Array(1,2,3,.....,90);
(...)
generarNumeroAleatorio: function() {
 var  nro = numerosSorteados.push(numerosDisponibles.splice(Math.floor(Math.random() * numerosDisponibles.length))) 
 return nro;
}

jajaja pero el codigo lo has hecho tu o lo has copiado, tio si eres capaz de hacer ese codigo debes ser capaz de entender ese concepto para solucionarlo. ya te dije:

1.prueba un documento aparte haz pruebas pilla el concepto.
2.aplicalo a el codigo.
3.mira errores en consola.
4.en caso de no dar errores mira el flujo de valores mediante console.log y alert.

asi pillas el problema de lo que tu haces mal y como solucionarlo y por esa inercia aprendes.

Jolín que manía con enseñar.
Para mí ya se pasó de rosca el aprender
Aunque aprenda todo sobre javascript, el mes que viene tendría que volver a aprenderlo todo de nuevo, y si me hacen un encargo de un óleo, más aún porque para pintar tengo que desconectarme totalmente de todo, menos del trabajo.
Mi trabajo me hace relacionarme con las asociaciones de vecinos, asociaciones de mujeres y centros de la tercera edad, y ahora después de 15 años, son todos amigos míos.
Al ver que ver los mecanismos que usan para hacer sus sorteos de bingo, decidí intentar hacerles uno para regalárselo, porque sus sistemas son de pena y algunos aun usan las bolsitas con las bolas sacándolas a mano.
De modo que no "aukun", apena se dé javascript, simplemente me metí en internet, descargar el que me pareció más apropiado en html y javascript, para lo que quería hacer (Que no es que hubiera mucho donde elegir), y lo intento mejorar.
Por supuesto ya está mejorado, sobre todo por vuestra ayuda, y porque el html y el css lo conozco bastante bien.
La idea es hacerlo responsive para cualquier pc y también convertirlo en apk cuando acabe.

Ahí os dejo todo el sistema para descargarlo, porque yo no me aclaro.
http://barriodeperal.es/bingo.rar
Si a alguien le apetece devolverlo terminado, el archivo es bingo.js.

Gracias "solisarg"
He probado lo que me has puesto y suigue repitiendo numeros y en cima no salen los numeros del 1 al 9.

Jolin te pone en la liga de +30, hacía bastante que no lo escuchaba.
Me parece un gran fin ayudar a tus vecinos ... pero veo que tus objetivos son ambiciosos: ¿responsivo, apk ? El punto de los foros es enseñar y aprender, cuando necesitas que te hagan el trabajo, contratas un profesional o le dices por que merece la pena que lo haga gratis. Hace unos años era tal el abuso que me llevó a escribir http://foros.cristalab.com/baja-y-arregla-mi-archivo-t56378/
¿Entonces: quieres intentarlo o quieres que te lo resolvamos directamente? ¿Cual es tu deadline?

Salute
Jorge

ahora se porque no entendias nada, sino estas dispuesto a aprender por mi parte no tengo nada mas que decir ya que simplemente quieres que te hagan un trabajo en el foro que de otra manera cualquier informatico te cobraria. porque deberia esforzarme y perder tiempo que necesito para dar de comer a mi familia en hacer un codigo para alguien que no esta dispuesto a esforzarse en aprender en como debe crear su proyecto.

Para mi el responsive y el apk no es problema el problema es el JavaScript que le pasa igual que el php no consigo escribirlo ni leerlo aunque si puedo modificarlo para adaptarlo a lo que necesite.

para el apk. solo es un programa, y de ahí es que el sistema tenga que esta en HTML y JavaScript el programa que tengo solo admite esos lenguajes.

Y en cuanto al responsive, estoy utilizando el @media screen, ya tengo el sistema a medias, solo le queda ajustarlo un poco, y crear mas @media screen para otras resoluciones.

"aukun" no es que no quiera aprender es que a penas me queda tiempo y no consigo entender el esos sistemas.

La verdad "Jorge" preferiría que me echaras una mano y resolvieras este problema para que no se repitan los números, no creo que pueda hacerlo yo, de echo ya llevo demasiado tiempo con ello y no he conseguido evitar la repetición.

intentare aprender a escribir el JavaScript pero esto se sale de mi alcance ahora.

En cuanto tenga un rato !

Jorge

Si Jorge, ya se que para ti son 15 minutos, lo que a mi me llevaría meses mas de los que llevo.

Piensa en todos los programadores que han creado cosas como lenguajes de programación y miles de cosas mas que los demás programadores utilizan para sus trabajos, de hecho seria difícil encontrar un programador que no haya utilizado cosas de los demás, como los jquery por ejemplo es de otros y los usan todos.

Como esa pagina donde he alojado los archivos del bingo para que los puedas descargar. Le puse muchas cosas que encontré en internet, pero es un trabajo que me costo varios meses hacerlo. yo cree los style, bases de datos, modifique JavaScript y php para adaptarlos a lo que quería. Cree img, videos y resto de contenido.

Eso como muchas otras cosas los hice desinteresadamente.

¿Acaso el no saber escribir javascript le quita el merito a todo lo demás?

No pretendo que me hagan el trabajo, solo un poco de ayuda con lo que me cuesta aprender por falta de tiempo.

Gracias por leerme.

jajaja con el tiempo y esfuerzo que has dedicado en ir detras para que te hagan el trabajo algo tan simple como el concepto array ya lo tendrias aprendido y ya hubieras solucionado el problema . jajaja (aqui unas clases que no te supondran mas de 20 minutos para solucionar tu problema)->

clase 1 -> que es un array ->Los arrays son usados extensamente por los programadores para contener listas de datos en la memoria, por ejemplo, los datos almacenados en un disco suelen leerse y ponerse dentro de un array con el objetivo de facilitar la manipulación de dichos datos

declarar un array -> var A=Array(); con esto estas diciendo que parte de la memoria ram del dispositivo se la asignas a un objeto array

en el array podemos añadir elementos estos pueden ser de muchos tipos pero lo que a ti solo te interesa es int->(que son numeros); strings->(que son cadenas de caracteres) es decir

un ejemplo de array seria -> var A=Array('anda','que','cara que','tiene','la gente','25',1,8,6);
con esto quiere decir que A[0] sera el string anda , A[6] sera el string 25 ojo string no numero int en cambio A[7] es 1 ese elemento array 7 es un numero int 1,
es decir los strings van entre ' o entre ". mientras que los numeros int son los numeros mismos .

clase 2 -> todo objeto array en javascript esta asociado a un serie de funciones i operaciones que ayudan a la manipulacion de los mismos. en tu caso concreto un arrayejemplo:

var arrayejemplo=Array('hola','cristalab');

a) arrayejemplo.push('soy aukun'); con esto arrayejemplo sera Array('hola','cristalab','soy aukun'); es decir le hemos añadido un elemento al array si haces un alert(arrayejemplo[2]) -> te dara el valor string soy aukun

b) arrayejemplo.length --> esto dara 3 porque son tres los elementos del array
arrayejemplo[0]->'hola'
arrayejemplo[1]->'cristalab'
arrayejemplo[2]->'soy aukun'
tres elementos que van de 0 a 2

c)arrayejemplo.indexOf('cristalab') --> esto dara 1 ya que el string cristalab corresponde al elemento 1 del array

d)arrayejemplo.splice(1,1) --> esto dara Array('hola','soy aukun'); que hemos hecho aqui bueno en cierta manera hemos hecho varias cosas primero hemos eliminado el elemento arrayejemplo[1] bueno splice tiene dos argumentos el primer argumento que es 1 quiere decir que inicias el corte inclusivo en el elemento 1 , el segundo elemento de splice le estas diciendo cuan largo quieres que sea el corte de cuantos elementos apartir del elemento 1 quieres el corte como es uno el corte sera de un solo elemento correspondiente a arrayejemplo[1] , lo bueno de splice no es que solo corta sino que tambien reordena es decir hemos quitado arrayejemplo[1] pero ahora arrayejemplo[1] sera soy aukun

en tu caso con splice vas quitando los numeros que ya te han salido y como los localizas pues con indexOf de manera que en el ejemplo que te he puesto el array se va minimizando cada vez que haces un slice y el random lo aplicas en el array que cada vez se va modificando de manera que no se repetiran los numeros nunca .

Cual es tu problema pues que el array donde aplicas el random no lo acortas en funcion de los valores que te van saliendo por lo que los valores se te repiten

el random lo aplicas sobre los indices del array es decir indice=math.random.... -> arrayejemplo.splice(indice,1);

Eso ccreo que ya lo probe:

De esta forma el sistema no funciona:
var Bingo = {
min: 1,
max: 90,
numerosSorteados: new Array(),
numerosDisponibles: new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,...Así hasta el....,90),
windowDocument: null,

init: function(parent){
this.windowDocument = parent;
this.bind();

},


generarNumeroAleatorio: function() {
var n = Math.floor(Math.random() * (Bingo.max - Bingo.min + 1)) + Bingo.min;
var nro = numerosSorteados.push(numerosDisponibles.splice(Math.floor(Math.random() * numerosDisponibles.length)))
return nro;
if(n < 10){
n = "0" + n.toString()
}
console.log('Numero generado: ' + n.toString());
document.all.sound.src =n +'.mp3';
console.log('Mi audio es '+n+'.mp3');
return n.toString();
},


Y de esta no salen las unidades (no salen los Nº del 1 al 9) y encima suige repitiendo numeros.

generarNumeroAleatorio: function() {
var n = Math.floor(Math.random() * (Bingo.max - Bingo.min + 1)) + Bingo.min;
if(n < 10){
n = "0" + n.toString();
var nro = numerosSorteados.push(numerosDisponibles.splice(Math.floor(Math.random() * numerosDisponibles.length)))
return nro;
}
console.log('Numero generado: ' + n.toString());
document.all.sound.src =n +'.mp3';
console.log('Mi audio es '+n+'.mp3');
return n.toString();
},

pero pruebalo en un javascript aparte i mira de emular de manera sencilla lo que quieres hacer , hacer eso no te ocupara mas de 20 minutos hazlo sencillo con un array de 6 numeros o 10 crea un boton que te vaya sacando numeros en el array i lo compruebas mediante consola.log cuando te salga el sencillo luego encontraras cual es el problema, te deje un ejemplo .
Crea un array sencillo pero en un documento aparte por ejemplo:
<script>
var A=Array(0,1,2,3,4,5,6,7,8,9);

window.onclick=function(){
//aqui haz las comprobaciones es decir prueba los comandos funciones que te deje que es todo lo que necesitas para resolver tu proyecto

//el resultado de tus pruebas supongamos que lo metes en la variable resultado

console.log(resultado);
}
//cada vez que hagas onclick en la pantalla de tu //browser(==buscadorinrnet==firefox==chrome) para eso es la instruccion window.onclick= se ejecutara la funcion asociada al evento onclick y en la consola del browser te aparecera la //variable resultado
</script>

//1.minimiza el problema
//2.verifica que lo que tu quieres se cumpla en el ejemplo minimizado
//3.adiciona el concepto , la idea que has creado en el ejemplo interpolandolo en tu proyecto
//4.si aun te da error quiere decir que hay alguna variable que te esta cogiendo valores que en el ejemplo minimizado no sucede. Comprueba cada variable del ejemplo minimizado que ha sido interpolada a tu proyecto -> por ahi encontraras el error

ten te he hecho esto a ver si lo puedes ver ya de una vez jajaja :

Código HTML :

<html><head><meta charset="utf-8"></head>
<script>

numerosDisponibles=[...Array(20).keys()];//con esto hace un rango numeral de 0 a 81 esta manera de hacer rangos solo con browsers nuevos
window.onclick=function(){//esto es para que se ejecute la funcion cada vez que le das onclick del mouse del boton izquierdo
if(numerosDisponibles.length==0){numerosDisponibles=[...Array(20).keys()];}//cuando la longitud de numeros disponibles sea 0 es decir ya no queden numeros creas un rango de de 0 a 81
var aleatorio=Math.floor(Math.random()*numerosDisponibles.length);//creas un aleatorio que vaya de 0 hasta la longitud del array numerosDisponibles
console.log('el aleatorio es '+numerosDisponibles[aleatorio]);//verificacion de que numero ha salido
numerosDisponibles.splice(aleatorio,1);//quitamos en numerosDisponibles el aleatorio que correspondera a la clave no al valor
//es decir supongamos que el array que nos queda es ->[0,5,9] el random se hara de 0 a 2 por lo que si el random sale 1 como sera la clave el numero a eliminar sera el 5
// en numerosDisponibles.splice(aleatorio,1); EL 1 es la longitud del corte no te confundas es decir cortamos desde aleatorio hasta el mismo es decir un solo valor
console.log('los numeros que te quedan son '+numerosDisponibles);//comprobacion de como te ha quedado el array

}

</script></html> 

¿Y que se supone que tiene que hacer eso?

Lo he probado con:
edge
chrome
internet explore

y nada de nada, sale la pagina en blanco.
hago clic con el izquierdo del ratón, y nada de nada.

He probado ponerle un div e incluso botón así:

<html><head><meta charset="utf-8"></head>
<script>

numerosDisponibles=[...Array(20).keys()];//con esto hace un rango numeral de 0 a 81 esta manera de hacer rangos solo con browsers nuevos
window.onclick=function(){//esto es para que se ejecute la funcion cada vez que le das onclick del mouse del boton izquierdo
if(numerosDisponibles.length==0){numerosDisponibles=[...Array(20).keys()];}//cuando la longitud de numeros disponibles sea 0 es decir ya no queden numeros creas un rango de de 0 a 81
var aleatorio=Math.floor(Math.random()*numerosDisponibles.length);//creas un aleatorio que vaya de 0 hasta la longitud del array numerosDisponibles
console.log('el aleatorio es '+numerosDisponibles[aleatorio]);//verificacion de que numero ha salido
numerosDisponibles.splice(aleatorio,1);//quitamos en numerosDisponibles el aleatorio que correspondera a la clave no al valor
//es decir supongamos que el array que nos queda es ->[0,5,9] el random se hara de 0 a 2 por lo que si el random sale 1 como sera la clave el numero a eliminar sera el 5
// en numerosDisponibles.splice(aleatorio,1); EL 1 es la longitud del corte no te confundas es decir cortamos desde aleatorio hasta el mismo es decir un solo valor
console.log('los numeros que te quedan son '+numerosDisponibles);//comprobacion de como te ha quedado el array

}

</script>
</head>
<body>
<!--- Prueba 1 ----><div id="keys"></div>

<!--- Prueba 2 ----><input type="button" value="Boton" onclick="keys();">
</body>
</html>

y nada de nada.

https://transferwise.com/es/help/article/2247654/tecnico-navegador/como-abrir-la-consola-de-tu-navegador

jajajaj para visualizar console.log en la console evidentemente debes tener abierto la consola del browser (firefox,chrome,internet explorer,opera,navigator,safari,icewheels ) todos los browser tienen consola. Si haces un programa web ya sea con css,javascript,html5,php,python... es imprescindible que abras la consola para poder ver los errores sino como sabes donde la estas cagando??? ya que el browser no te visualiza los errores pero la consola si jajaja.

Te lo estas pasando bomba conmigo he.....

Había que verte a ti en tus comienzos.

En la consola no sale nada.

jajaja has hecho click en el body que te sale en blanco , recuerda la consola no es ni cmd ni la shell es del browser y se llama consola web , que no es lo mismo que consola browser, a si has de hacer click con el boton izquierdo del mouse no con el teclado que es eso que tienes delante con muchos botones con letras ....

Jolin, y yo que le estaba dando a la pantalla.

No soy tan novato.

llevo mas de 18 años con ordenadores

trankilo yo cuando empece con esto de los ordenadores intentaba escribir escalera con la tecla esc.
bueno cuando acabes el juego todo vamos a querer jugar como :

de todas formas passar muchos años con un tema no implica saber mucho de ese tema sin ir mas lejos mi tio tiene un dojo de karate y hace 20 años que tiene una tortuga viviendo en el dojo y no hay ningun indicio que se haya vuelto ninja.