然後我們需要附加兩個元素：

  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個主要方法：

\\'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 元素中輸入新字母時，我們需要更新打字機物件（記住我們有一個監聽器

現在我們需要確保文字輸入元素始終具有焦點。首先，我們在 boda=y 標籤中新增一個事件，當點擊正文時，該事件會將焦點設定到 textinput 元素，這實際上意味著頁面中的任何位置：

我們還需要在頁面載入並準備好時設定焦點。 

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

現在我們需要寫最重要的部分，就是處理輸入部分的程式碼。程式碼很簡單，有3個主要方法：

'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）的打字速度，並在漂亮的對話方塊中顯示效能。

版本聲明 本文轉載於：https://dev.to/websilvercraft/create-a-speed-typing-game-in-javascript-4lpc?1如有侵犯，請聯絡[email protected]刪除
最新教學 更多>
分類更多>
學日語 學韓語 學中文 學外語 遊戲 常見問題 科技週邊 人工智慧 軟體教學 程式設計 文章

學習中文

工具更多>
圖片base64 解編碼
漢語拼音
Unicode編碼
JS混淆加密壓縮
URL網址16進位加密工具
UTF-8編碼轉換工具
線上Ascii編碼解碼工具
MD5加密工具
雜湊/雜湊 文字線上加密解密工具
線上SHA加密

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3