Hola En previsión del inicio del curso "Fullstack JavaScript Developer", uno de nuestros autores decidió compartir su experiencia en la creación de un simulador para la escritura táctil. Y nosotros, a su vez, queremos mostrarle este material.
Hola a todos! Hoy decidí mostrar cómo escribir mi simulador de escritura táctil en JavaScript. Creo que cada uno de nosotros al comienzo del camino entrenó su impresión; después de todo, esta es una de las habilidades más importantes del desarrollador
.
Hay muchos sitios y programas en Internet que pueden ayudarlo a perfeccionar sus habilidades de escritura y divertirse. ¡Hay juegos para
niños , hay
juegos en los que puedes competir con otra persona que imprime más rápido! Pero supongamos que queremos crear un simulador de impresión con el diseño y la velocidad que nosotros queremos. Y hoy intentaremos escribir la primera parte de nuestra aplicación, pero en la que será posible jugar
ahora .
Entonces, como marco para el diseño, elegí
Bulma.css . Bulma es bastante diversa, y con su ayuda puede hacerlo sin escribir su CSS al menos en la primera etapa.
Entonces, comencemos creando la página principal. Para no perder espacio en el mismo código para todos, diré que en la etiqueta principal conecté el archivo
javascript ,
bulma y
favicon .
<body> <section class="hero is-primary is-large"> <div class="hero-head container"> <h1 class="label is-size-3 has-text-white promo"> </h1> <h3 class="label is-size-4 has-text-link has-text-centered"></h3> <progress id="prog" class="progress is-danger" value="0" max="20"></progress> <h3 class="label is-size-5 has-text-white has-text-centered begin">Press Enter to Start</h3> </div> <div class="hero-body has-background-grey-dark "> <div id="columns"> <div class="buttons columns is-half is-centered "> </div> </div> </div> </section> </body>
Creamos un pequeño panel en el que hay una invitación para que nuestro usuario juegue presionando la tecla Intro. En el elemento de
buttons , dibujaremos nuestros botones, que serán generados aleatoriamente por nuestro JS. Idealmente, el progreso con errores debe estar oculto antes del inicio del juego, tal vez lo arreglemos en la siguiente parte.
Bien,
index.html listo, y
bulma se encargó de la belleza y el diseño. Ahora podemos sumergirnos en nuestro js.
¿Qué teclas del teclado se entrenan primero? Creo que todos saben que sus dedos índices deben estar en las teclas
j y
f (nuestra aplicación analizará el diseño en inglés como el más útil (programadores 1C, perdónenme si pueden)). Los dedos medios deben estar en
k y
d, respectivamente, y además es importante que durante el entrenamiento también presionemos la barra espaciadora. Total, en nuestra versión original, necesitaremos 5 caracteres.
Apenas dicho que hecho. Creamos una matriz en la que se encuentran todas nuestras claves. Además, crearemos una variedad de colores, porque el simulador, en el que todas las letras son de un solo color, es muy aburrido e incómodo:
let colors = ['is-info', 'is-success', 'is-warning', 'is-danger', 'is-link'];
Bueno, con un conjunto de colores y símbolos, decidimos. A continuación, obtenemos todos los elementos DOM necesarios para seguir trabajando:
let begin = document.querySelector(".begin");
Genial, se reciben los elementos básicos. Ahora puede comenzar a crear la lógica de nuestra aplicación. Creamos una función que con la ayuda de un generador aleatorio generará nuestros símbolos para nosotros. Primero, le damos el código de una función que nos devuelve números aleatorios de 0 a un número máximo dado. Esta es la función clásica de generación de números aleatorios de la documentación de MDN:
function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); }
Bien, ahora todo está listo, es hora de comenzar a generar elementos DOM:
function drawBoard() { for (let index = 0; index < 20; index++) {
La función está lista, ahora necesita ser llamada. Les recuerdo que el inicio del juego se lleva a cabo presionando la tecla Intro, y aún queremos ocultar la invitación de invitación. Sin embargo, el juego y el dibujo deben llamarse solo una vez, por lo que usamos el argumento de
once para
addEventListener :
document.addEventListener('keydown', StartGame, { once: true
Y aquí está la función
StartGame :
function StartGame(e) { if (e.key == "Enter") { drawBoard(); begin.style.display = "none";
En
mainGame , escuchamos todos los botones presionados para que podamos entender si el usuario presiona los botones del teclado correctamente o no:
function mainGame() { document.addEventListener('keyup', press);
Entonces, con estas funciones de reconexión, llegamos al juego principal. Pensemos en las variables que necesitamos. Necesitamos una variable que cuente nuestros errores y una variable a la que agregaremos valores cuando se presione con éxito:
var count_right = 0; var errors_count = 0;
Bien, lo más básico y delicioso está por venir. Por versatilidad, para que nuestra aplicación no sea tan dependiente de los diseños en ruso e inglés, podríamos usar
keyCode , pero esto complicará el código. Necesitamos obtener todos los caracteres generados y, si la tecla del teclado coincide con la identificación de nuestro elemento (nota, también
drawBoard() cada identificación de elemento que es igual al contenido de texto del elemento. Sin duda, puede leer el contenido a través de
textContent , y en el futuro, tal vez lo haremos), luego se elimina el elemento. En otro caso, agregue un valor a una variable que considere los errores del usuario y los escriba dentro del
progress :
function press(e) { let elements_arr = document.querySelectorAll(".game-buttons");
Wow! Ahora nuestra aplicación debería estar lista y se puede probar.
En la segunda parte del artículo, finalizaremos la aplicación agregando el guardado local de resultados, música windup, sonidos de clics, animaciones, una tabla de clasificación y una versión de la aplicación que se ha mejorado solo para programadores, así como también corregiremos errores menores. Si hay más ideas y comentarios, los estoy esperando en los comentarios.
Aquí hay tal material. Le recordamos que
este material fue escrito por un escritor independiente y no está relacionado con el proceso educativo. Si está interesado en la educación y desea obtener más información sobre el curso, lo invitamos a una jornada de puertas abiertas , que se realizará el lunes .