Então precisamos anexar mais 2 elementos:

  1. Um elemento onde vamos exibir o texto que os jogadores devem digitar:
    . Vamos adicionar o texto que precisa ser digitado usando um simples trecho de código javascript:
            var text2type = \\'Some text that needs to be typed...\\';            function init(){                $(\\'#txt\\').text( text2type );            }
  1. Um elemento que precisa ter o foco, onde podemos adicionar um ouvinte de evento quando o jogador pressiona uma tecla. Na verdade não precisamos exibir o elemento, só precisamos tê-lo na página e ele deve estar visível, caso contrário não poderá receber o foco. Porém, se não quisermos mostrá-lo, definiremos sua largura e altura como 0.

Agora precisamos garantir que o elemento de entrada de texto sempre tenha o foco. Primeiro anunciamos um evento na tag boda=y que definirá o foco para o elemento textinput quando clicar no corpo, o que significa praticamente em qualquer lugar da página:

Também precisamos definir o foco quando a página estiver carregada e pronta.

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

Agora precisamos codificar a parte mais importante, o código que trata da parte de digitação. O código é bastante fácil, possui 3 métodos principais:

\\'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 )   \\'\\'      );    }  }

Para a próxima parte, precisamos atualizar o objeto typer, quando uma nova letra é inserida no elemento textinput (lembre-se que temos um listner lá

Agora precisamos garantir que o elemento de entrada de texto sempre tenha o foco. Primeiro anunciamos um evento na tag boda=y que definirá o foco para o elemento textinput quando clicar no corpo, o que significa praticamente em qualquer lugar da página:

Também precisamos definir o foco quando a página estiver carregada e pronta.

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

Agora precisamos codificar a parte mais importante, o código que trata da parte de digitação. O código é bastante fácil, possui 3 métodos principais:

'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 )   ''
      );

    }


  }

Para a próxima parte, precisamos atualizar o objeto typer, quando uma nova letra é inserida no elemento textinput (lembre-se que temos um listner lá 

            function updateText(){

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

Agora temos o primeiro protótipo com a mecânica de jogo de um jogo de digitação funcional. Na próxima seção adicionaremos mais alguns elementos para medir a velocidade de digitação em palavras por minuto e caracteres por minuto (wpm e cpm) e para exibir o desempenho em uma bela caixa de diálogo.

Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/websilvercraft/create-a-speed-typing-game-in-javascript-4lpc?1 Se houver alguma violação, entre em contato com [email protected] para excluí-la
Tutorial mais recente Mais>
ClassificaçãoMais>
Aprenda japonês Aprender coreano Aprenda chinês Aprender língua estrangeira Jogo Problema comum Periféricos de tecnologia IA Tutorial de software Programação Artigo

Estude chinês

FerramentaMais>
Decodificação de imagem base64
pinyin chinês
Codificação Unicode
Compressão de criptografia de ofuscação JS
Ferramenta de criptografia hexadecimal de URL
Ferramenta de conversão de codificação UTF-8
Ferramentas online de codificação e decodificação Ascii
Ferramenta de criptografia MD5
Ferramenta on-line de criptografia e descriptografia de texto Hash/Hash
Criptografia SHA on-line

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3