wpm 속도를 측정하기 위해 자바스크립트로 타이핑 게임 만들기-JS 튜토리얼-php.cn

wpm 속도를 측정하기 위해 자바스크립트로 타이핑 게임 만들기

Mary-Kate Olsen

풀어 주다： 2024-10-02 18:19:02

원래의

648명이 탐색했습니다.

Create a typing game in javascript to measure wpm speed

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

이 튜토리얼에서는 wpm 단위로 타이핑 속도(분당 단어 수, 분당 문자 수, 철자 오류)를 측정하고 이를 개선할 수 있는 간단한 타이핑 게임을 만들 것입니다. 우리는 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개의 요소를 더 연결해야 합니다.

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

            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>

로그인 후 복사

이제 텍스트 입력 요소에 항상 포커스가 있는지 확인해야 합니다. 먼저 본문을 클릭할 때 텍스트 입력 요소에 초점을 설정하는 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( 
        '<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()
            }

로그인 후 복사

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

위 내용은 wpm 속도를 측정하기 위해 자바스크립트로 타이핑 게임 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!