Como hacer un dado con JavaScript

Dados de juego

Jugar con dados forma parte de muchos tipos de juegos, tantos de mesa como digitales. El funcionamiento es simple, un figura geometrica con un numero en cada cara. Si lo lanzas, la cara que quede mirando hacia arriba es el numero ganador. Pero, Como hacer un dado con javascript?

En este post, vamos a ver como hacer un dado con javascript de la manera mas simple posible, para que ustedes puedan aprender como se hace y luego le den una utilidad para cualquier proyecto que tengan en mente.

para comenzar estaremos creando el codigo para que el dado funcione.

Codigo

<script>
        
        function rDice(){
            return (console.log(Math.random()))
        }
    </script>

Resultado

resultado de math.random en consola en la web

La funcion esta bien, pero para nuestro codigo necesitamos que genere un numero entero, asi que vamos a usar dos alternativas: una usando Math.ceil y la otra usando Math.floor.

Usando Math.ceil y presentando el resultado en la consola con un “for” loop seria de la siguiente forma:

Con Math.ceil

Codigo

function rDice(){
            return Math.ceil(Math.random() * 6)
        }
        for(var i=0; i<5; i++) console.log(rDice())

Resultado

resultado de numeros random en consola web

Esta forma esta bien, aunque hoy vamos a usar la otra opcion, en la cual usaremos Math.floor, y aqui esta el ejemplo usando esta forma.

Con Math.floor agregaremos una suma de al dado de 1 para evitar que el cero(0) se muestre en la ecuacion:

Codigo

function rDice(){
            return Math.floor(Math.random() * 6) + 1
        }
        for(var i=0; i<5; i++) console.log(rDice())

Resultado

numberos aleatorios usando math.floor en javascript

HTML

Vamos a presentar el resultado en html. Primero crearemos el contenido en la pagina, ademas de que solo queremos que un solo numero se muestre. Asi que vamos a eliminar el “for loop“, agregaremos una casilla para agregar la cantidad de caras que podria tener nuestro dado y luego llamaremos todo esto en javascript.

<section>
        <label>Set the dice faces: <input type="number" name="faces" id="faces" min="4"></label>
        <br>
        <button id="bt">Roll</button>        
        <h1 id="n">0</h1>
    </section>

CSS

Y ahora agregaremos un pequeño estilo para este HTML.

<style>
        section{text-align: center;padding: 20px; border: 1px solid grey;margin: auto;}
        input{width: 50px;}
        button{font-size: large;margin: 20px 0;border: none;padding: 15px 30px;border-radius: 15px;background-color: brown;color: white;font-weight: 500;cursor: pointer;}
        button:hover{box-shadow: 1px 1px 5px grey;}
        h1{font-size: 45px;margin: 0;padding: 0;}
    </style>

Asi obtenemos esto

resultado del dado de una entrada de numero y botton

Que tal si hacemos esta seccion funcionar. Ahora que tenemos nuestra presentacion, vamos a interactuar con javascript para darle vida al dado.

En esta opcion vamos a eliminar el “for loop” y vamos a agregar una accion al boton que nos permitira presentar un numero aleatorio debajo. La cantidad de numeros para jugar se incluiran en la opcion de mas arriba donde podremos ajustar la cantidad de caras que poseera nuestro dado.

Para que no nos quedemos con un numero no deseado, incluiremos una condicion que controlara el input. De esta manera, se nos pedira que agreguemos un numero en la casilla antes de jugar.

Preparando el dado | JavaScript

Primero declararemos las variables que necesitamos:

var bt = document.getElementById('bt');
var n = document.getElementById('n');
var faces = document.getElementById('faces');

Segundo vamos a mejorar la funcion rDice(): incluiremos las condiciones.

function rDice(){
            if(!faces.value){
                return ('please set the number of faces');
            } else if(faces.value === '0'){
                return ('please set the number of faces greater than 4');
            } else{
                return 1 + Math.floor(Math.random() * faces.value);
            }
        }

En la codicion de arriba, primero revisamos que la casilla de numero. Si esta esta vacia, pedimos que se agregue un numero para empezar; En la segunda opcion, revisamos si el valor de la casilla es igual a cero, y si lo es, pediremos que el usuario use u numero mayor (en este caso, comenzaremos con 4 pues en todo caso seria el menor numero de caras para jugar con dados). Si las primeras dos opciones son falsas, y en verdad pusimos un valor numerico aceptable en la casilla, ejecutaremos la tercera opcion, la cual generara un numero aleatorio en el rango de 1 al numero que elegimos.

Ahora agregaremos la accion del boton y con esto el resultado final:

bt.onclick = function(){
            n.innerHTML = rDice();
        };

Y este es el resultado

final del dado con javascript funcionando