suchen

Heim  >  Artikel  >  Web-Frontend  >  Erstellen Sie ein Tippspiel in Javascript, um die WPM-Geschwindigkeit zu messen

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-02 18:19:02609Durchsuche

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>

Dann müssen wir noch 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, 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>

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

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

    }


  }

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.

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!

JavaScript jquery less html Object if for Error using class Chars Event constructor this prototype display input
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Formular-ID abrufen. Es ist nicht das, was Sie denkenNächster Artikel：Formular-ID abrufen. Es ist nicht das, was Sie denken

In Verbindung stehende Artikel

Mehr sehen