자바스크립트로 스피드 타이핑 게임 만들기

이 튜토리얼에서는 타이핑 속도(분당 단어 수, 분당 문자 수, 철자 오류)를 wpm 단위로 측정하고 이를 개선할 수 있는 간단한 타이핑 게임을 만들 것입니다. 우리는 javascript와 jQuery만 사용할 것입니다(실제로는 필요하지 않지만 입력 게임을 덜 장황하게 만들어 나머지 애플리케이션에 집중할 수 있습니다.

간단한 HTML 페이지를 만드는 것부터 시작하겠습니다.

그런 다음 요소 2개를 더 연결해야 합니다.

1. 플레이어가 입력해야 하는 텍스트를 표시할 요소:
   . 간단한 자바스크립트 코드를 사용하여 입력해야 하는 텍스트를 추가하겠습니다.

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

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

1. 플레이어가 키를 누를 때 이벤트 리스너를 추가할 수 있는 포커스가 필요한 요소입니다. 요소를 실제로 표시할 필요는 없습니다. 요소가 해당 페이지에 있어야 하고 표시되어야 합니다. 그렇지 않으면 포커스를 받을 수 없습니다. 그러나 표시하고 싶지 않으면 너비와 높이를 0으로 설정합니다.

이제 텍스트 입력 요소에 항상 포커스가 있는지 확인해야 합니다. 먼저 본문을 클릭할 때 텍스트 입력 요소에 초점을 설정하는 boda=y 태그에 이벤트를 광고합니다. 이는 사실상 페이지의 어느 곳이든 의미합니다.

페이지가 로드되고 준비되면 포커스를 설정해야 합니다.

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

이제 가장 중요한 부분인 타이핑 부분을 처리하는 코드를 코딩해야 합니다. 코드는 매우 쉽습니다. 3가지 주요 메소드가 있습니다:

• 입력해야 하는 텍스트를 설정하고 일부 클래스 변수를 초기화하는 생성자.
• 입력된 새 문자를 추가하는 add 메소드로 인해 오류가 발생할 수도 있고 발생하지 않을 수도 있습니다.
• 렌더링 방법은 플레이어가 진행 상황에 대한 시각적 피드백을 통해 텍스트를 렌더링하고 철자가 틀린 경우를 확인할 수 있습니다.

'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 객체를 업데이트해야 합니다(여기에 ).

            function updateText(){

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

이제 우리는 작동하는 타이핑 게임의 게임 메커니즘을 갖춘 첫 번째 프로토타입을 갖게 되었습니다. 다음 섹션에서는 분당 단어 수와 분당 문자 수(wpm 및 cpm)로 입력 속도를 측정하고 멋진 대화 상자에 성능을 표시하기 위해 몇 가지 요소를 더 추가할 것입니다.