Erstellen Sie ein Schnellschreibspiel in Javascript

In diesem Tutorial erstellen wir ein einfaches Tippspiel, das unsere Tippgeschwindigkeit in WPM misst – Wörter pro Minute, Zeichen pro Minute, Rechtschreibfehler – und es ermöglicht, diese zu verbessern. Wir werden nur Javascript und jQuery verwenden (das ist nicht wirklich nötig, aber dadurch wird unser Tippspiel weniger ausführlich, sodass wir uns auf den Rest der Anwendung konzentrieren können.

Wir beginnen mit der Erstellung einer einfachen HTML-Seite:

Dann müssen wir zwei weitere Elemente anhängen:

1. Ein Element, in dem wir den Text anzeigen, den die Spieler eingeben müssen:
   . Wir werden den Text, der eingegeben werden muss, mit einem einfachen Javascript-Code hinzufügen:

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

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

1. Ein Element, das den Fokus haben muss, zu dem wir einen Ereignis-Listener hinzufügen können, wenn der Spieler eine Taste drückt. Wir müssen das Element nicht wirklich anzeigen, wir müssen es nur auf der Seite haben und sichtbar sein, sonst kann es den Fokus nicht erhalten. Wenn wir es jedoch nicht anzeigen möchten, setzen wir seine Breite und Höhe auf 0.

Jetzt müssen wir sicherstellen, dass das Texteingabeelement immer den Fokus hat. Zuerst fügen wir ein Ereignis im boda=y-Tag ein, das den Fokus auf das Textinput-Element setzt, wenn auf den Textkörper geklickt wird, was praktisch überall auf der Seite bedeutet:

Wir müssen den Fokus auch setzen, wenn die Seite geladen und bereit ist.

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

Jetzt müssen wir den wichtigsten Teil codieren, den Code, der den Eingabeteil übernimmt. Der Code ist recht einfach, er hat drei Hauptmethoden:

• der Konstruktor, der den Text festlegt, der eingegeben werden muss, und einige Klassenvariablen initialisiert.
• die Add-Methode, die das neue eingegebene Zeichen hinzufügt, was zu einem Fehler führen kann oder nicht.
• Die Render-Methode rendert den Text, wobei die Spieler ein visuelles Feedback über den Fortschritt erhalten und sehen können, wenn dann etwas falsch geschrieben wurde.

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

    }


  }

Für den nächsten Teil müssen wir das Typer-Objekt aktualisieren, wenn ein neuer Buchstabe in das Textinput-Element eingegeben wird (denken Sie daran, dass wir dort einen Listener haben ).

            function updateText(){

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

Jetzt haben wir den ersten Prototypen mit der Spielmechanik eines funktionierenden Tippspiels. Im nächsten Abschnitt werden wir einige weitere Elemente hinzufügen, um die Tippgeschwindigkeit in Wörtern pro Minute und Zeichen pro Minute (wpm und cpm) zu messen und die Leistung in einem schönen Dialog anzuzeigen.