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
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
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
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
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
