Cómo codificar un dado virtual aleatorio simple: 6 pasos
Cómo codificar un dado virtual aleatorio simple: 6 pasos

Tabla de contenido:

Anonim
Cómo codificar un dado virtual aleatorio simple
Cómo codificar un dado virtual aleatorio simple

¡¡¡¡¡Hola a todos!!!!! Este es mi primer instructivo y te enseñaré cómo codificar un dado virtual en tu PC o teléfono inteligente. Estoy usando HTML, JavaScript y CSS, espero que a todos les guste y no olviden votar por mí en el contexto a continuación.

Suministros

1. Un buen editor de texto en su teléfono inteligente o PC

Paso 1: obtenga su editor de texto

Aquí estoy usando mi teléfono inteligente como editor de texto aquí (AnWriter). También puede usar el bloc de notas de su PC u obtener un buen editor de texto en línea

Paso 2: Descarga Die Faces

Descarga Die Faces
Descarga Die Faces
Descarga Die Faces
Descarga Die Faces
Descarga Die Faces
Descarga Die Faces

Descargué algunas caras de dado del 1 al 6 que adjunto a este paso. Entonces, puedes descargar tu preferido o usar el mío (eres gratis).

Nombré el mío según las caras del dado. Es decir:

Die_face_1.png, Die_face_2.png….y así sucesivamente hasta las 6 para un mejor reconocimiento

Paso 3: Comience a codificar

Guarde el código como archivo.html

Comience por introducir la cara de matriz predeterminada que desea utilizando img src

Paso 4:

A continuación, necesitaremos un botón para lanzar los dados, lo hacemos agregando una función de botón

TIRAR EL DADO

Paso 5: use la función Var y Math

Usar la función Var y Math
Usar la función Var y Math

AGITAR DADOS

function getRand () {

var vu = Math.floor (Math.random () * 6) +1;

var vu2 = Math.floor (Math.random () * 6) +1;

var di = ["die_face_1.png", "die_face_2.png", "die_face_3.png", "die_face_4.png", "die_face_5.png", "die_face_6.png"];

document.getElementById ("dice"). src = di [vu-1];

document.getElementById ("dicl"). src = di [vu2-1];

}

Este es el código completo, estúdielo y pruébelo y asegúrese de obtener la foto para obtener el efecto.

Y si necesita mi ayuda con este código, menciónelo en la sección de comentarios.

Puede cambiar el diseño si no le gusta, pero lo prefiero para el propósito para el que quiero usarlo.

Paso 6: Ejecutar

ejecute el código en su navegador para que funcione