你好 预期“ Fullstack JavaScript Developer”课程的开始，我们的一位作者决定分享他在创建用于触摸打字的模拟器方面的经验。 反过来，我们想向您展示此材料。
大家好！ 今天，我决定展示如何用JavaScript编写我的触摸打字模拟器。 我认为我们每个人在开始之初都训练过他的印刷品-毕竟，这是最重要的开发人员技能之一
。
互联网上有许多站点和程序可以帮助您提高打字技能并获得一些乐趣。 有
儿童游戏，有
游戏您可以与打印速度更快的其他人竞争！ 但是，假设我们想用我们自己想要的设计和速度来创建打印模拟器。 今天，我们将尝试编写应用程序的第一部分，但
现在可以在其中进行播放。
因此，作为布局的框架，我选择了
Bulma.css 。 Bulma非常多样化，借助它的帮助，至少在第一阶段无需编写css就可以做到。
因此，让我们从创建主页开始。 为了避免在每个人的相同代码上浪费空间，我会说在
head标签中，我连接了
javascript ，
bulma和
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>
我们制作一个小面板，其中按Enter键邀请用户播放。 在
buttons元素中，我们将绘制按钮，这些按钮将由我们的JS随机生成。 理想情况下，应该在游戏开始之前隐藏有错误的进度，也许我们将在下一部分中解决此问题。
好的，
index.html准备好了，
bulma和布局。 现在我们可以深入研究我们的js。
首先要训练键盘上的哪些键？ 我想每个人都知道您的食指应该放在
j和
f键上（我们的应用程序将把英语布局解析为最有用的（1C程序员，请原谅我））。 中指应分别在
k和
d上，此外，重要的是在训练过程中还要按空格键。 总计，在我们的原始版本中，我们将需要5个字符。
言归正传。 我们创建一个数组，所有键都位于其中。 另外，我们将创建一个颜色数组，因为所有字母都是一种颜色的模拟器非常无聊且令人不舒服：
let colors = ['is-info', 'is-success', 'is-warning', 'is-danger', 'is-link'];
好吧，我们决定了一套颜色和符号。 接下来，我们获得了进一步工作所需的所有DOM元素：
let begin = document.querySelector(".begin");
太好了，基本要素已收到。 现在，您可以开始创建应用程序的逻辑。 我们创建了一个函数，该函数将在随机生成器的帮助下为我们生成符号。 首先，我们给出一个函数的代码，该函数返回从0到给定最大数的随机数。 这是MDN文档中经典的随机数生成函数：
function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); }
好的，现在一切就绪，是时候开始生成DOM元素了：
function drawBoard() { for (let index = 0; index < 20; index++) {
该函数已准备就绪，现在需要调用它。 我提醒您，游戏的开始是通过按Enter键进行的，我们仍然希望隐藏邀请的铭文。 但是，游戏和绘图仅应调用一次，因此我们对
addEventListener使用
once参数：
document.addEventListener('keydown', StartGame, { once: true
这是
StartGame函数
StartGame ：
function StartGame(e) { if (e.key == "Enter") { drawBoard(); begin.style.display = "none";
在
mainGame ，我们听所有按下的按钮，以便我们了解用户是否正确按下了键盘上的按钮：
function mainGame() { document.addEventListener('keyup', press);
因此，有了这些重新连接功能，我们进入了主要游戏。 让我们考虑一下我们需要的变量。 我们需要一个将计算错误的变量以及一个在成功按下时将值添加到其中的变量：
var count_right = 0; var errors_count = 0;
好的，最基本，最美味的产品就在前面。 为了通用性，使我们的应用程序不那么依赖于俄语和英语布局，我们可以使用
keyCode ，但这会使代码复杂化。 我们需要获取所有生成的字符，并且如果键盘上的键与元素的ID相匹配（请注意，我还将
drawBoard()为
drawBoard()等于与该元素的文本内容相同的每个元素。毫无疑问，您可以通过
textContent和将来，也许我们会这样做），然后删除该元素。 在另一种情况下，向考虑用户错误的变量添加一个值，并将其写入
progress ：
function press(e) { let elements_arr = document.querySelectorAll(".game-buttons");
哇！ 现在我们的应用程序应该已经准备好并且可以测试了。
在本文的第二部分中，我们将通过添加本地保存的结果，发条音乐，点击声音，动画，排行榜和仅适用于程序员的应用程序版本以及修复一些小错误来对应用程序进行最终化。 如果还有更多的想法和意见，我正在等待您的评论。
这是这种材料。 我们提醒您，
该材料是由自由作家撰写的，与教学过程无关。 如果您对教育感兴趣，并想了解更多有关该课程的信息，我们邀请您参加开放日 ， 开放日将在星期一举行 。