Создайте игру для быстрого набора текста на JavaScript.

В этом уроке мы собираемся создать простую игру с набором текста, которая будет измерять нашу скорость набора текста в словах в минуту - слов в минуту, символов в минуту, орфографических ошибок и позволит ее улучшить. Мы собираемся использовать только javascript и jQuery (на самом деле в этом нет необходимости, но это сделает нашу игру с набором текста менее многословной, и мы сможем сосредоточиться на остальной части приложения.

Начнем с создания простой HTML-страницы:

Затем нам нужно прикрепить еще 2 элемента:

1. Элемент, в котором мы собираемся отображать текст, который должны ввести игроки:
   . Мы собираемся добавить текст, который необходимо набрать, используя простой фрагмент кода JavaScript:

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

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

1. Элемент, который должен иметь фокус, куда мы можем добавить прослушиватель событий, когда игрок нажимает клавишу. На самом деле нам не нужно отображать элемент, нам просто нужно, чтобы он был на странице и был видимым, иначе он не сможет получить фокус. Однако, если мы не хотим его показывать, мы установим его ширину и высоту равными 0.

Теперь нам нужно убедиться, что элемент ввода текста всегда находится в фокусе. Сначала мы объявляем событие в теге boda=y, которое установит фокус на элемент textinput при нажатии на тело, что практически означает любое место на странице:

Нам также необходимо установить фокус, когда страница загружена и готова.

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

Теперь нам нужно написать самую важную часть — код, который обрабатывает часть ввода. Код довольно простой, имеет 3 основных метода:

• конструктор, который задает текст, который необходимо набрать, и инициализирует некоторые переменные класса.
• метод add, который добавляет новый введенный символ, что может привести к ошибке или нет.
• Метод рендеринга представляет собой рендеринг текста, при котором игроки могут визуализировать прогресс, и они могут видеть, когда в дальнейшем что-то написано с ошибкой.

'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 )   ''
      );

    }


  }

Для следующей части нам нужно обновить объект типографа, когда в элемент textinput вводится новая буква (помните, что у нас там есть листеннер ).

            function updateText(){

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

Теперь у нас есть первый прототип с игровой механикой работающей игры с набором текста. В следующем разделе мы добавим еще несколько элементов для измерения скорости набора текста в словах в минуту и ​​символов в минуту (слов в минуту и ​​цен в минуту), а также для отображения производительности в красивом диалоговом окне.