用 javascript 创建一个打字游戏来测量 wpm 速度-js教程-PHP中文网

用 javascript 创建一个打字游戏来测量 wpm 速度

Mary-Kate Olsen

发布： 2024-10-02 18:19:02

原创

649 人浏览过

Create a typing game in javascript to measure wpm speed

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

在本教程中，我们将创建一个简单的打字游戏，以 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 个元素：

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

            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 标签中添加一个事件，当单击正文时，该事件会将焦点设置到 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( 
        '<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）的打字速度，并在漂亮的对话框中显示性能。

以上是用 javascript 创建一个打字游戏来测量 wpm 速度的详细内容。更多信息请关注PHP中文网其他相关文章！