Olá Antecipando o início do curso "Fullstack JavaScript Developer", um de nossos autores decidiu compartilhar sua experiência na criação de um simulador para digitação por toque. E nós, por sua vez, queremos mostrar esse material.
Olá pessoal! Hoje eu decidi mostrar como escrever meu simulador de digitação por toque em JavaScript. Penso que cada um de nós, no início do caminho, treinou suas impressões - afinal, essa é uma das habilidades mais importantes do desenvolvedor
.
Existem muitos sites e programas na Internet que podem ajudá-lo a aprimorar suas habilidades de digitação e se divertir. Existem jogos para
crianças , existem
jogos nos quais você pode competir com outra pessoa que imprime mais rápido! Mas suponha que desejemos criar um simulador de impressão com o design e a velocidade que nós mesmos queremos. E hoje vamos tentar escrever a primeira parte do nosso aplicativo, mas na qual será possível jogar
agora .
Então, como estrutura para o layout, escolhi o
Bulma.css . Bulma é bastante diverso, e com sua ajuda você pode fazer sem escrever seu css pelo menos no primeiro estágio.
Então, vamos começar criando a página principal. Para não desperdiçar espaço no mesmo código para todos, direi que na tag
head conectei o arquivo
javascript ,
bulma e
favicon .
<body> <section class="hero is-primary is-large"> <div class="hero-head container"> <h1 class="label is-size-3 has-text-white promo"> </h1> <h3 class="label is-size-4 has-text-link has-text-centered"></h3> <progress id="prog" class="progress is-danger" value="0" max="20"></progress> <h3 class="label is-size-5 has-text-white has-text-centered begin">Press Enter to Start</h3> </div> <div class="hero-body has-background-grey-dark "> <div id="columns"> <div class="buttons columns is-half is-centered "> </div> </div> </div> </section> </body>
Fazemos um pequeno painel no qual há um convite para o usuário tocar, pressionando a tecla Enter. No elemento
buttons , desenharemos nossos botões, que serão gerados aleatoriamente por nosso JS. Idealmente, o progresso com erros deve ser oculto antes do início do jogo. Talvez consertemos isso na próxima parte.
Ok,
index.html pronto e
bulma cuidou da beleza e do layout. Agora podemos mergulhar em nossos js.
Quais teclas do teclado são treinadas primeiro? Acho que todo mundo está ciente de que seus dedos indicadores devem estar nas teclas jef (nosso aplicativo analisará o layout em inglês como o mais útil (programadores 1C, perdoe-me se puder)). Os dedos do meio devem estar em
k e
d, respectivamente, e além disso, é importante que durante o treinamento também pressione a barra de espaço. Total, em nossa versão original, precisaremos de 5 caracteres.
Mal disse o que fez. Criamos uma matriz na qual todas as nossas chaves estão localizadas. Além disso, criaremos uma variedade de cores, porque o simulador, no qual todas as letras são de uma cor, é muito chato e desconfortável:
let colors = ['is-info', 'is-success', 'is-warning', 'is-danger', 'is-link'];
Bem, com um conjunto de cores e símbolos, decidimos. Em seguida, obtemos todos os elementos DOM necessários para trabalhos futuros:
let begin = document.querySelector(".begin");
Ótimo, os elementos básicos são recebidos. Agora você pode começar a criar a lógica do nosso aplicativo. Criamos uma função que, com a ajuda de um gerador aleatório, gerará nossos símbolos para nós. Primeiro, fornecemos o código de uma função que nos retorna números aleatórios de 0 a um determinado número máximo. Esta é a função clássica de geração de números aleatórios da documentação MDN:
function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); }
Ok, agora está tudo pronto, é hora de começar a gerar elementos DOM:
function drawBoard() { for (let index = 0; index < 20; index++) {
A função está pronta, agora precisa ser chamada. Lembro que o início do jogo ocorre pressionando a tecla Enter e ainda queremos ocultar a inscrição convidativa. No entanto, o jogo e o desenho devem ser chamados apenas uma vez, portanto, usamos o argumento
once para
addEventListener :
document.addEventListener('keydown', StartGame, { once: true
E aqui está a
StartGame função
StartGame :
function StartGame(e) { if (e.key == "Enter") { drawBoard(); begin.style.display = "none";
No
mainGame , ouvimos todos os botões pressionados para que possamos entender se o usuário pressiona os botões no teclado corretamente ou não:
function mainGame() { document.addEventListener('keyup', press);
Então, com essas funções de reconexão, chegamos ao jogo principal. Vamos pensar nas variáveis que precisamos. Precisamos de uma variável que conte nossos erros e uma variável à qual adicionaremos valores quando pressionada com êxito:
var count_right = 0; var errors_count = 0;
Ok, o mais básico e delicioso está à frente. Por versatilidade, para que nosso aplicativo não seja tão dependente dos layouts em russo e inglês, poderíamos usar
keyCode , mas isso complicará o código. Precisamos obter todos os caracteres gerados e, se a tecla do teclado corresponder ao id do nosso elemento (note, eu também
drawBoard() como
drawBoard() cada elemento que é igual ao conteúdo de texto do elemento. Sem dúvida, você pode apenas ler o conteúdo através de
textContent e no futuro, talvez o façamos), o elemento será excluído. Em outro caso, adicione um valor a uma variável que considere erros do usuário e os grave em
progress :
function press(e) { let elements_arr = document.querySelectorAll(".game-buttons");
Uau! Agora, nosso aplicativo deve estar pronto e pode ser testado.
Na segunda parte do artigo, finalizaremos o aplicativo adicionando economia local de resultados, música mecânica, sons de cliques, animações, uma tabela de classificação e uma versão do aplicativo que foi aprimorada apenas para programadores, além de corrigir pequenos erros. Se houver mais idéias e comentários, estou esperando por você nos comentários.
Aqui está esse material. Lembramos que
este material foi escrito por um escritor freelancer e não está relacionado ao processo educacional. Se você está interessado em educação e deseja aprender mais sobre o curso, convidamos você para um dia aberto , que será realizado na segunda-feira .