JavaScriptでタイピングゲームを作成してwpm速度を測定する-jsチュートリアル-php.cn

JavaScriptでタイピングゲームを作成してwpm速度を測定する

Mary-Kate Olsen

リリース： 2024-10-02 18:19:02

オリジナル

658 人が閲覧しました

Create a typing game in javascript to measure wpm speed

JavaScriptでスピードタイピングゲームを作成する

このチュートリアルでは、wpm でのタイピング速度 (1 分あたりの単語数、1 分あたりの文字数、スペルミスなど) を測定し、改善できる簡単なタイピングゲームを作成します。 JavaScript と jQuery のみを使用します (実際には必要ありませんが、これによりタイピングゲームの冗長さが軽減され、アプリケーションの残りの部分に集中できるようになります。

簡単な HTML ページを作成することから始めます:

<!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>

ログイン後にコピー

次に、さらに 2 つの要素をアタッチする必要があります:

プレイヤーが入力する必要があるテキストを表示する要素:
。単純な JavaScript コードを使用して、入力する必要があるテキストを追加します。

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

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

ログイン後にコピー

フォーカスが必要な要素。プレーヤーがキーを押したときにイベントリスナーを追加できます。実際に要素を表示する必要はありません。要素をページ内に配置するだけでよく、表示されていなければフォーカスを受け取ることができません。ただし、表示したくない場合は、幅と高さを 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>

ログイン後にコピー

ここで、テキスト入力要素が常にフォーカスされていることを確認する必要があります。まず、本文をクリックしたときにフォーカスを textinput 要素に設定するイベントを boda=y タグに追加します。これは実際にはページ内の任意の場所を意味します。

ページがロードされて準備ができたときに、フォーカスを設定する必要もあります。

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

ログイン後にコピー

次に、最も重要な部分、つまり入力部分を処理するコードをコーディングする必要があります。コードは非常に簡単で、主に 3 つのメソッドがあります:

コンストラクター。

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

    }


  }

ログイン後にコピー

次の部分では、textinput 要素に新しい文字が入力されたときに、typer オブジェクトを更新する必要があります (そこにリスナーがあることを思い出してください ).

            function updateText(){

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

ログイン後にコピー

これで、実際に動作するタイピングゲームのゲームメカニクスを備えた最初のプロトタイプが完成しました。次のセクションでは、さらにいくつかの要素を追加して、1 分あたりの単語数と 1 分あたりの文字数 (wpm および cpm) でタイピング速度を測定し、そのパフォーマンスを素敵なダイアログに表示します。

以上がJavaScriptでタイピングゲームを作成してwpm速度を測定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。