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

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

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

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

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

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

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

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

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

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

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

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

• 入力する必要があるテキストを設定し、いくつかのクラス変数を初期化する コンストラクター。
add メソッド。入力された新しい文字を追加します。これにより、エラーが発生する場合と発生しない場合があります。
render メソッドはテキストをレンダリングし、プレーヤーは進行状況を視覚的にフィードバックできるため、スペルが間違っている場合にそれを確認できます。

'厳密に使用'; クラス タイピングゲーム { コンストラクター( text, div ) { this.text = テキスト; this.history = ""; this.mispelled = false; this.stats = []; } 追加(c) { if ( c == this.text.substring( this.history.length, this.history.length 1 ) ){ this.history = c; this.mispelled = false; } それ以外{ this.mispelled = true; } this.render(); } 与える（）{ letcursorstyle = '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 ) '' ); } }

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

    }


  }

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

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

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

    }


  }

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