wpm 속도를 측정하기 위해 자바스크립트로 타이핑 게임 만들기
- Mary-Kate Olsen원래의
- 2024-10-02 18:19:02647검색
자바스크립트로 스피드 타이핑 게임 만들기
이 튜토리얼에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!