Erstellen Sie ein Tippspiel in Javascript, um die WPM-Geschwindigkeit zu messen-js-Tutorial-php.cn

Erstellen Sie ein Tippspiel in Javascript, um die WPM-Geschwindigkeit zu messen

Mary-Kate Olsen

Freigeben： 2024-10-02 18:19:02

Original

626 Leute haben es durchsucht

Create a typing game in javascript to measure wpm speed

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:

<!DOCTYPE html>
<html>
    <head>
        <title>Typing Test WPM: How fast can you type? ⌨️?</title>
        <meta charset="UTF-8">        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/jquery-3.2.1.slim.min.js"></script>
        <script src="js/typing.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css">

    </head>
    <body >
    </body>
</html>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

Ein Element, das den Fokus haben muss, wo 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.

<div style="position: absolute; top:0; left:0; z-index:-1;visibilitygg:hidden;">
      <textarea id="textinput" style="width:0;height:0;" oninput="updateText()"></textarea>
</div>

Nach dem Login kopieren

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 Texteingabeelement setzt, wenn auf den Textkörper geklickt wird, was praktisch irgendwo auf der Seite bedeutet:

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

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

Nach dem Login kopieren

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.
Bei der Render-Methode wird der Text gerendert, sodass 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( 
        '<span class="typed">' + this.history + '</span>' +
        '<span class="' + cursorstyle + '">' + this.text.substring( this.history.length, this.history.length + 1 ) + '</span>'
        + '<span class="totype">' + this.text.substring( this.history.length + 1 ) + '</span>'
      );

    }


  }

Nach dem Login kopieren

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()
            }

Nach dem Login kopieren

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.

Das obige ist der detaillierte Inhalt vonErstellen Sie ein Tippspiel in Javascript, um die WPM-Geschwindigkeit zu messen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!