Bonjour En prévision du début du cours "Fullstack JavaScript Developer", l' un de nos auteurs a décidé de partager son expérience dans la création d'un simulateur de saisie tactile. Et nous, à notre tour, voulons vous montrer ce matériel.
Bonjour à tous! Aujourd'hui, j'ai décidé de montrer comment écrire mon simulateur de saisie tactile en JavaScript. Je pense que chacun de nous au début du chemin a formé son impression - après tout, c'est l'une des compétences les plus importantes du développeur
.
Il existe de nombreux sites et programmes sur Internet qui peuvent vous aider à perfectionner vos compétences de frappe et à vous amuser. Il y a des jeux pour
enfants , il y a des
jeux dans lesquels vous pouvez rivaliser avec une autre personne qui imprime plus vite! Mais supposons que nous voulons créer un simulateur d'impression avec la conception et la vitesse que nous voulons nous-mêmes. Et aujourd'hui, nous allons essayer d'écrire la première partie de notre application, mais dans laquelle il sera possible de jouer
maintenant .
Donc, comme cadre pour la mise en page, j'ai choisi
Bulma.css . Bulma est assez diversifié, et avec son aide, vous pouvez vous passer de l'écriture de votre CSS au moins dans la première étape.
Commençons donc par créer la page principale. Afin de ne pas perdre d'espace sur le même code pour tout le monde, je dirai que dans la balise
head j'ai connecté le fichier
javascript ,
bulma et
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>
Nous faisons un petit panneau dans lequel il y a une invitation pour notre utilisateur à jouer en appuyant sur la touche Entrée. Dans l'élément
buttons , nous dessinerons nos boutons, qui seront générés aléatoirement par notre JS. Idéalement, la progression avec des erreurs devrait être cachée avant le début du jeu, peut-être que nous corrigerons cela dans la prochaine partie.
D'accord,
index.html prêt, et
bulma s'est occupé de la beauté et de la mise en page. Maintenant, nous pouvons plonger dans nos js.
Quelles touches du clavier sont entraînées en premier? Je pense que tout le monde est conscient que vos index doivent reposer sur les touches
j et
f (notre application analysera la disposition en anglais comme la plus utile (programmeurs 1C, pardonnez-moi si vous le pouvez)). Le majeur doit être sur
k et
d, respectivement, et en outre, il est important que pendant la formation, nous appuyions également sur la barre d'espace. Au total, dans notre version originale, nous aurons besoin de 5 caractères.
Aussitôt dit, aussitôt fait. Nous créons un tableau dans lequel toutes nos clés sont situées. De plus, nous allons créer un tableau de couleurs, car le simulateur, dans lequel toutes les lettres sont unicolores, est très ennuyeux et inconfortable:
let colors = ['is-info', 'is-success', 'is-warning', 'is-danger', 'is-link'];
Eh bien, avec un ensemble de couleurs et de symboles, nous avons décidé. Ensuite, nous obtenons tous les éléments DOM nécessaires à la poursuite des travaux:
let begin = document.querySelector(".begin");
Génial, les éléments de base sont reçus. Vous pouvez maintenant commencer à créer la logique de notre application. Nous créons une fonction qui, à l'aide d'un générateur aléatoire, générera nos symboles pour nous. Tout d'abord, nous donnons le code d'une fonction qui nous renvoie des nombres aléatoires de 0 à un nombre maximum donné. Il s'agit de la fonction classique de génération de nombres aléatoires de la documentation MDN:
function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); }
Bon, maintenant tout est prêt, il est temps de commencer à générer des éléments DOM:
function drawBoard() { for (let index = 0; index < 20; index++) {
La fonction est prête, elle doit maintenant être appelée. Je vous rappelle que le début du jeu a lieu en appuyant sur la touche Entrée, et nous voulons toujours masquer l'inscription invitante. Cependant, le jeu et le dessin ne doivent être appelés qu'une seule fois, nous utilisons donc l'argument
once pour
addEventListener :
document.addEventListener('keydown', StartGame, { once: true
Et voici la fonction
StartGame -
StartGame :
function StartGame(e) { if (e.key == "Enter") { drawBoard(); begin.style.display = "none";
Dans
mainGame , nous écoutons tous les boutons enfoncés afin de comprendre si l'utilisateur appuie correctement ou non sur les boutons du clavier:
function mainGame() { document.addEventListener('keyup', press);
Donc, avec ces fonctions de reconnexion, nous sommes arrivés au jeu principal. Réfléchissons aux variables dont nous avons besoin. Nous avons besoin d'une variable qui comptera nos erreurs et d'une variable à laquelle nous ajouterons des valeurs une fois appuyées avec succès:
var count_right = 0; var errors_count = 0;
D'accord, le plus simple et le plus délicieux est à venir. Pour plus de polyvalence, afin que notre application ne dépende pas autant des dispositions russes et anglaises, nous pourrions utiliser
keyCode , mais cela compliquera le code. Nous devons obtenir tous les caractères générés et, si la touche du clavier correspond à l'ID de notre élément (remarque, j'ai également
drawBoard() pour
drawBoard() chaque élément qui est égal au contenu textuel de l'élément. Sans aucun doute, vous pouvez simplement lire le contenu via
textContent , et à l'avenir, nous le ferons peut-être), puis l'élément est supprimé. Dans un autre cas, ajoutez une valeur à une variable qui prend en compte les erreurs utilisateur et les écrit dans la
progress :
function press(e) { let elements_arr = document.querySelectorAll(".game-buttons");
Ouah! Maintenant, notre application doit être prête et elle peut être testée.
Dans la deuxième partie de l'article, nous finaliserons l'application en ajoutant une sauvegarde locale des résultats, de la musique d'horlogerie, des sons de clic, des animations, un classement et une version de l'application qui a été affinée uniquement pour les programmeurs, ainsi que des bugs mineurs. S'il y a plus d'idées et de commentaires, je vous attends dans les commentaires.
Voici un tel matériau. Nous vous rappelons que
ce matériel a été rédigé par un rédacteur indépendant et n'est pas lié au processus éducatif. Si vous êtes intéressé par l'éducation et souhaitez en savoir plus sur le cours, nous vous invitons à une journée portes ouvertes , qui se tiendra le lundi .