Créer un jeu de saisie rapide en javascript

Dans ce tutoriel nous allons créer un jeu de frappe simple qui mesurera notre vitesse de frappe en mots par minute - mots par minute, caractères par minute, fautes d'orthographe et permettra de l'améliorer. Nous allons utiliser uniquement javascript et jQuery (ce n'est pas vraiment nécessaire, mais cela rendra notre jeu de frappe moins verbeux afin que nous puissions nous concentrer sur le reste de l'application.

Nous commençons par créer une simple page html :

Ensuite, nous devons attacher 2 éléments supplémentaires :

1. Un élément où nous allons afficher le texte que les joueurs doivent saisir :
   . Nous allons ajouter le texte à saisir à l'aide d'un simple morceau de code javascript :

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

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

1. Un élément qui doit avoir le focus, où nous pouvons ajouter un écouteur d'événement lorsque le joueur appuie sur une touche. Nous n'avons pas vraiment besoin d'afficher l'élément, nous avons juste besoin de l'avoir dans la page et il doit être visible, sinon il ne peut pas recevoir le focus. Cependant, si nous ne voulons pas l’afficher, nous définirons sa largeur et sa hauteur sur 0.

Maintenant, nous devons nous assurer que l'élément de saisie de texte est toujours au centre. Tout d'abord, nous ajoutons un événement dans la balise boda=y qui définira le focus sur l'élément d'entrée de texte lors du clic sur le corps, ce qui signifie pratiquement n'importe où dans la page :

Nous devons également définir le focus lorsque la page est chargée et prête.

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

Nous devons maintenant coder la partie la plus importante, le code qui gère la partie saisie. Le code est assez simple, il comporte 3 méthodes principales :

• le constructeur qui définit le texte à saisir et initialise certaines variables de classe.
• la méthode add, qui ajoute le nouveau caractère saisi, ce qui peut entraîner ou non une erreur.
• la méthode de rendu rend le texte avec les joueurs qui peuvent avoir un retour visuel de la progression, et ils peuvent voir quand quelque chose a été mal orthographié.

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

    }


  }

Pour la partie suivante, nous devons mettre à jour l'objet typer, lorsqu'une nouvelle lettre est saisie dans l'élément textinput (rappelez-vous que nous avons un listner là-bas ).

            function updateText(){

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

Nous avons maintenant le premier prototype avec les mécanismes de jeu d'un jeu de dactylographie fonctionnel. Dans la section suivante, nous allons ajouter quelques éléments supplémentaires pour mesurer la vitesse de frappe en mots par minute et en caractères par minute (wpm et cpm) et pour afficher les performances dans une jolie boîte de dialogue.