Crea un juego de mecanografía rápida en javascript

En este tutorial vamos a crear un juego de mecanografía simple que medirá nuestra velocidad de escritura en palabras por minuto: palabras por minuto, caracteres por minuto, errores ortográficos y permitirá mejorarla. Usaremos solo javascript y jQuery (no es realmente necesario, pero hará que nuestro juego de mecanografía sea menos detallado para que podamos concentrarnos en el resto de la aplicación.

Comenzamos creando una página html simple:

Luego necesitamos adjuntar 2 elementos más:

1. Un elemento donde vamos a mostrar el texto que los jugadores deben escribir:
   . Vamos a agregar el texto que debe escribirse usando un simple fragmento de código de JavaScript:

            var text2type = 'Some text that needs to be typed...';

            function init(){
                $('#txt').text( text2type );
            }

1. Un elemento que necesita tener el foco, donde podemos agregar un detector de eventos cuando el jugador presiona una tecla. Realmente no necesitamos mostrar el elemento, solo necesitamos tenerlo en la página y debe ser visible, de lo contrario no podrá recibir el foco. Sin embargo, si no queremos mostrarlo, estableceremos su ancho y alto en 0.

Ahora debemos asegurarnos de que el elemento de entrada de texto siempre tenga el foco. Primero agregamos un evento en la etiqueta boda=y que establecerá el foco en el elemento de entrada de texto cuando se haga clic en el cuerpo, lo que prácticamente significa en cualquier parte de la página:

También necesitamos establecer el enfoque cuando la página esté cargada y lista.

$( document ).ready(function() {
    $('#textinput').focus();
});

Ahora necesitamos codificar la parte más importante, el código que maneja la parte de escritura. El código es bastante sencillo, tiene 3 métodos principales:

• el constructor que establece el texto que debe escribirse e inicializa algunas variables de clase.
• el método add, que agrega el nuevo carácter que se escribió, lo que puede resultar en un error o no.
• el método de renderizado consiste en renderizar el texto y los jugadores pueden obtener una retroalimentación visual del progreso y pueden ver cuándo se escribe mal algo.

'use strict';

class TypingGame {

    constructor( text, div ) {
      this.text = text;
      this.history = "";

      this.misspelled = false;
      this.stats = [];
    }

    add(c) {

      if ( c == this.text.substring( this.history.length, this.history.length   1 ) ){
        this.history  = c;
        this.misspelled = false;
      }
      else{
        this.misspelled = true;
      }

      this.render();
    }


    render(){

        let cursorstyle = 'cursor'   ( this.misspelled ? '-misstyped' : '' );

      $('#txt').html( 
        ''   this.history   ''  
        ''   this.text.substring( this.history.length, this.history.length   1 )   ''
          ''   this.text.substring( this.history.length   1 )   ''
      );

    }


  }

Para la siguiente parte, necesitamos actualizar el objeto mecanografiado, cuando se ingresa una nueva letra en el elemento textinput (recuerde que tenemos un listner allí ).

            function updateText(){

                let c = $('#textinput').val();
                if ( c.length > 0 ) {
                    typer.add( c.slice(-1) );
                }
                $('#textinput').val('');
                showCurrent()
            }

Ahora tenemos el primer prototipo con la mecánica de juego de un juego de mecanografía funcional. En la siguiente sección agregaremos algunos elementos más para medir la velocidad de escritura en palabras por minuto y caracteres por minuto (ppm y cpm) y mostrar el rendimiento en un cuadro de diálogo agradable.