用 JavaScript 创建一个快速打字游戏

在本教程中，我们将创建一个简单的打字游戏，以 wpm 为单位测量我们的打字速度 - 每分钟单词数、每分钟字符数、拼写错误，并允许改进它。我们将只使用 javascript 和 jQuery（这并不是真正需要的，但它会让我们的打字游戏变得不那么冗长，这样我们就可以专注于应用程序的其余部分。

我们首先创建一个简单的 html 页面：

然后我们需要附加两个元素：

1. 我们将在其中显示玩家必须输入的文本的元素：
   。我们将使用一段简单的 javascript 代码添加需要输入的文本：

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

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

1. 需要获得焦点的元素，我们可以在玩家按下按键时添加事件侦听器。我们并不真正需要显示该元素，我们只需要将它放在页面中并且它必须是可见的，否则它无法接收焦点。但是，如果我们不想显示它，我们会将其宽度和高度设置为 0。

现在我们需要确保文本输入元素始终具有焦点。首先，我们在 boda=y 标记中添加一个事件，当单击正文时，该事件会将焦点设置到 textinput 元素，这实际上意味着页面中的任何位置：

我们还需要在页面加载并准备好时设置焦点。

$( 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 元素中输入新字母时，我们需要更新打字机对象（记住我们有一个监听器 ).

            function updateText(){

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

现在我们有了第一个原型，具有可运行的打字游戏的游戏机制。在下一节中，我们将添加更多元素来测量每分钟字数和每分钟字符数（wpm 和 cpm）的打字速度，并在漂亮的对话框中显示性能。