Hallo! Im Vorgriff auf den Beginn des Kurses "Fullstack JavaScript Developer" hat einer unserer Autoren beschlossen, seine Erfahrungen bei der Erstellung eines Simulators für das Tippen von Berührungen mitzuteilen. Und wir wollen Ihnen dieses Material zeigen.
Hallo allerseits! Heute habe ich beschlossen, zu zeigen, wie ich meinen Touch-Typing-Simulator in JavaScript schreibe. Ich denke, dass jeder von uns am Anfang des Weges seinen Druck trainiert hat - schließlich ist dies eine der wichtigsten Fähigkeiten des Entwicklers
.
Es gibt viele Websites und Programme im Internet, mit denen Sie Ihre Schreibfähigkeiten verbessern und Spaß haben können. Es gibt Spiele für
Kinder , es gibt
Spiele, bei denen Sie sich mit einer anderen Person messen können, die schneller druckt! Angenommen, wir möchten einen Drucksimulator mit dem von uns gewünschten Design und der gewünschten Geschwindigkeit erstellen. Und heute werden wir versuchen, den ersten Teil unserer Anwendung zu schreiben, in dem es jetzt möglich sein wird, zu spielen.
Als Rahmen für das Layout habe ich
Bulma.css gewählt . Bulma ist sehr vielfältig und mit seiner Hilfe können Sie zumindest in der ersten Phase auf das Schreiben Ihres CSS verzichten.
Beginnen wir also mit der Erstellung der Hauptseite. Damit nicht für alle derselbe Code belegt wird, habe ich im
head Tag die
javascript ,
bulma und
favicon Datei
bulma .
<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>
Wir erstellen ein kleines Fenster, in dem der Benutzer durch Drücken der Eingabetaste zum Spielen eingeladen wird. Im
buttons Element zeichnen wir unsere Buttons, die von unserem JS zufällig generiert werden. Im Idealfall sollte der Fortschritt bei Fehlern vor dem Start des Spiels ausgeblendet werden. Vielleicht werden wir dies im nächsten Teil beheben.
Okay,
index.html fertig und
bulma sich um die Schönheit und das Layout gekümmert. Jetzt können wir in unsere js eintauchen.
Welche Tasten auf der Tastatur werden zuerst trainiert? Ich denke, jeder ist sich bewusst, dass Ihre Zeigefinger auf den Tasten
j und
f liegen sollten (unsere Anwendung analysiert das englische Layout als das nützlichste (1C-Programmierer, verzeihen Sie mir, wenn Sie können)). Die Mittelfinger sollten auf
k bzw.
d stehen. Außerdem ist es wichtig, dass wir während des Trainings auch die Leertaste drücken. Insgesamt benötigen wir in unserer Originalversion 5 Zeichen.
Gesagt, getan. Wir erstellen ein Array, in dem sich alle unsere Schlüssel befinden. Außerdem werden wir eine Reihe von Farben erstellen, da der Simulator, in dem alle Buchstaben einfarbig sind, sehr langweilig und unangenehm ist:
let colors = ['is-info', 'is-success', 'is-warning', 'is-danger', 'is-link'];
Nun, mit einer Reihe von Farben und Symbolen haben wir uns entschieden. Als Nächstes erhalten wir alle DOM-Elemente, die für die weitere Arbeit erforderlich sind:
let begin = document.querySelector(".begin");
Toll, die Grundelemente werden angenommen. Jetzt können Sie beginnen, die Logik unserer Anwendung zu erstellen. Wir erstellen eine Funktion, die mit Hilfe eines Zufallsgenerators unsere Symbole für uns generiert. Zuerst geben wir den Code einer Funktion an, die uns Zufallszahlen von 0 bis zu einer bestimmten Höchstzahl zurückgibt. Dies ist die klassische Zufallszahlengenerierungsfunktion aus der MDN-Dokumentation:
function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); }
Okay, jetzt ist alles fertig, es ist Zeit, DOM-Elemente zu generieren:
function drawBoard() { for (let index = 0; index < 20; index++) {
Die Funktion ist fertig, jetzt muss sie aufgerufen werden. Ich erinnere Sie daran, dass der Start des Spiels durch Drücken der Eingabetaste erfolgt und wir die einladende Inschrift dennoch ausblenden möchten. Das Spiel und die Zeichnung sollten jedoch nur einmal aufgerufen werden, daher verwenden wir das Argument
once für
addEventListener :
document.addEventListener('keydown', StartGame, { once: true
Und hier ist die
StartGame Funktion
StartGame :
function StartGame(e) { if (e.key == "Enter") { drawBoard(); begin.style.display = "none";
In
mainGame hören wir alle gedrückten Tasten, um zu verstehen, ob der Benutzer die Tasten auf der Tastatur richtig drückt oder nicht:
function mainGame() { document.addEventListener('keyup', press);
Mit diesen Wiederverbindungsfunktionen kamen wir zum Hauptspiel. Lassen Sie uns über die Variablen nachdenken, die wir brauchen. Wir benötigen eine Variable, die unsere Fehler zählt, und eine Variable, zu der wir Werte hinzufügen, wenn Sie erfolgreich gedrückt werden:
var count_right = 0; var errors_count = 0;
Okay, das Einfachste und Leckerste liegt vor uns. Aus
keyCode Vielseitigkeit, damit unsere Anwendung nicht so stark vom russischen und englischen
keyCode , können wir
keyCode , was den Code jedoch kompliziert. Wir müssen alle Zeichen
drawBoard() , die generiert wurden, und wenn die Taste auf der Tastatur mit der ID unseres Elements
drawBoard() (Anmerkung, ich habe auch in
drawBoard() jedem Element eine ID gegeben, die dem Textinhalt des Elements entspricht. Ohne Zweifel können Sie den Inhalt
textContent über
textContent und lesen Vielleicht werden wir dies in Zukunft tun, dann wird das Element gelöscht. In einem anderen Fall fügen Sie einer Variablen einen Wert hinzu, der Benutzerfehler berücksichtigt und sie in
progress schreibt:
function press(e) { let elements_arr = document.querySelectorAll(".game-buttons");
Wow! Jetzt sollte unsere Anwendung fertig sein und kann getestet werden.
Im zweiten Teil des Artikels werden wir die Anwendung fertigstellen, indem wir lokale Speicherung von Ergebnissen, Clockwork-Musik, Click-Sounds, Animationen, eine Bestenliste und eine Version der Anwendung, die nur für Programmierer geschärft wurde, hinzufügen und kleinere Fehler beheben. Wenn es weitere Ideen und Kommentare gibt, warte ich in den Kommentaren auf Sie.
Hier ist so ein Material. Wir erinnern Sie daran, dass
dieses Material von einem freiberuflichen Autor verfasst wurde und nicht mit dem Bildungsprozess zusammenhängt. Wenn Sie sich für Bildung interessieren und mehr über den Kurs erfahren möchten, laden wir Sie zu einem Tag der offenen Tür ein , der am Montag stattfindet .