vue + element UI【实战】打字闯关（含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧）-APISpace

vue + element UI【实战】打字闯关（含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧）

效果预览

点我在线预览

实现思路

将目标字符串按字符转换为数组，遍历展示

this.stringLib[this.step].split("").forEach((item) => { this.targetList.push({ text: item, }); });

监听键盘事件

created() { this.keyDown();},

// 按下按键keyDown() { // function内的this不再是vue实例，需提前将 this 存入 that以便在 function内使用 let that = this; document.onkeydown = function (e) { console.log(e.key) // 按下键盘上的 A 时会打印 a }}

根据按键值判断输入是否正确，若正确则添加属性 type 为 success ，字符变绿；输入错误则添加属性 type 为 danger，字符变红（type 值来自 el-tag 对应的效果）

// 用下标 index 跟踪标记输入进度let targetText = that.targetList[that.index].text;if (e.key === targetText) { // 使用 $set 页面才能及时响应对象的变化 that.$set(that.targetList[that.index], "type", "success");} else { that.$set(that.targetList[that.index], "type", "danger");}

当前关的字符输入完后，按任意键都会判定通关结果，输入全部正确才能通关

// 输入的正确字符数与目标字符数相等时，通过当前关if (that.rightCharNum === that.targetList.length) { // 若已是最后一关，则全部通关，闯关结束 if (that.step === that.totalStep) { that.over(); } else { that.result = "success"; // 通过当前关时播放通关成功的音效 that.$refs.successAudio.play(); }} else { that.result = "fail"; // 存在错误字符时播放通关失败的音效 that.$refs.failAudio.play();}

判定结果后，按回车键/空格键，若通关则开始下一关，若失败则重新挑战

if (that.result) { if (e.key === "Enter" || e.key === " ") { if (that.result === "success") { that.nextStep(); } if (that.result === "fail") { that.replay(); } } return;}

为提升用户体验，每一次输入都会配音效，并统计输入正确和错误的次数

if (e.key === targetText) { that.$set(that.targetList[that.index], "type", "success"); // 为避免输入过快时声音反应不及时，在每次输入时让音频从头开始播放 that.$refs.inputAudio.currentTime = 0; that.$refs.inputAudio.play(); that.rightNum++; } else { that.$set(that.targetList[that.index], "type", "danger"); that.$refs.errorAudio.currentTime = 0; that.$refs.errorAudio.play(); that.wrongNum++; }

重要提示

element UI 需升级到 2.15.7 以上版本，否则不支持 el-result 标签升级 element UI 的方法可以参考音效素材可从以下网站搜索下载Audacity 剪辑（腾讯管家软件库中可下载）

完整范例代码