如何用JavaScript编写长尾词的打字游戏？

本文共计1634个文字，预计阅读时间需要7分钟。

原文示例：本文字例为大师分享了JavaScript实现打字游戏的整体代码，供大师参考。具体内容如下：效果图：需求分析：

1.在char这个div中显示要输入的文字，大写

2.在result这个div中实时显示‘

改写后的内容：

本例展示了JavaScript实现打字游戏的代码示例，提供参考。内容包括：效果图：需求解析：

1.在char div中展示待输入的文字，字体加粗

2.在result div中实时显示输入结果

本文实例为大家分享了JavaScript实现打字游戏的具体代码，供大家参考，具体内容如下

效果图：

需求分析：

1、在char这个div里面显示要输入的字母，大写
2、在result这个div里面时时显示正确率，比如98%
3、给文档绑定按键事件
4、如果输入的内容和char里面一致，显示正确动画：animated zoomIn,并更换输入的字母
5、如果输入的内容和char里面不一致，显示错误动画：animated shake error
6、不管是正确还是错误都时时更新result里面的正确率

源代码：

HTML部分

<mian> <div id="char">A</div> <div id="result">请在按键上按下屏幕上显示的字母</div> </mian>

css部分

1.为了实现一些特效，先创建一个animate.css文件，在封装一些动画效果放里面

/*animate.css*/ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; }

2.css主体代码，无动画特效版

<style> body { margin: 0; /*开启弹性布局，并让弹性布局中的子元素 水平居中对齐，垂直居中对齐*/ display: flex; justify-content: center; align-items: center; /*文字居中*/ text-align: center; /*设置背景颜色的经像渐变*/ background: radial-gradient(circle, #444, #111, #000); } #char { font-size: 400px; color: lightgreen; /*设置文字阴影*/ /*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/ /*位置可以为负值*/ text-shadow: 0 0 50px #666; } #result { font-size: 20px; color: #888; } /*找到id为char及类名为error的div元素*/ #char.error { color: red; } </style>

JavaScript部分

1.为了简化代码，先封装一些常用的自定义构造函数

<script> // 定义一个函数:rand // 参数:最小整数，最大整数 // 返回:两个整数之间的一个随机整数 function rand(min, max) { return parseInt(Math.random() * (max - min + 1)) + min; } </script>

2.js主体部分，需要用到封装的函数，调用即可

<script> // 获取相关元素 var charDiv = document.getElementById('char'); var resultDiv = document.getElementById('result'); // code用于记录页面上的字母的编码，使用全局变量，到处都可以使用 var code, tirme; var rightNum = 0;//正确次数 var wrongNum = 0;//错误次数 // 1 在char这个div里面显示要输入的字母，大写 showChar(); // 3 给文档绑定按键事件 document.onkeyup = function (e) { // 事件对象 e = window.event || e; // 获取按键编码 var keyCode = e.keyCode || e.which; // 4 如果输入的内容和char里面一致 if (keyCode == code) { // 显示正确动画：animated zoomIn charDiv.className = "animated zoomIn"; rightNum++; showChar() } // 5 如果输入的内容和char里面不一致 else { // 显示错误动画：animated shake error charDiv.className = "animated shake error"; wrongNum++ } // 为了下一次有动画，在本次动画完后要移除类名 setTimeout(function () { charDiv.className = ""; }, 500) // 6 不管是正确还是错误都时时更新result里面的正确率 // 正确率 = 正确次/总次数 resultDiv.innerHTML = "正确率:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%" } // 函数功能:在char这个div里面随机显示要输入的字母:大写 function showChar() { // 先随机出一个字母编码 code = rand(65, 90); // 变成一个字母 var char = String.fromCharCode(code); // 显示在char这个div里面 charDiv.innerHTML = char; } </script>

总代码

<html> <head> <meta charset="utf-8"> <title>打字游戏</title> <!--引入animate.css动画库--> <link rel="stylesheet" href="animate.css" > <style> body { margin: 0; /*开启弹性布局，并让弹性布局中的子元素 水平居中对齐，垂直居中对齐*/ display: flex; justify-content: center; align-items: center; /*文字居中*/ text-align: center; /*设置背景颜色的经像渐变*/ background: radial-gradient(circle, #444, #111, #000); } #char { font-size: 400px; color: lightgreen; /*设置文字阴影*/ /*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/ /*位置可以为负值*/ text-shadow: 0 0 50px #666; } #result { font-size: 20px; color: #888; } /*找到id为char及类名为error的div元素*/ #char.error { color: red; } </style> </head> <body> <mian> <div id="char">A</div> <div id="result">请在按键上按下屏幕上显示的字母</div> </mian> </body> </html> <script> // 定义一个函数:rand // 参数:最小整数，最大整数 // 返回:两个整数之间的一个随机整数 function rand(min, max) { return parseInt(Math.random() * (max - min + 1)) + min; } </script> <script> // 获取相关元素 var charDiv = document.getElementById('char'); var resultDiv = document.getElementById('result'); // code用于记录页面上的字母的编码，使用全局变量，到处都可以使用 var code, tirme; var rightNum = 0;//正确次数 var wrongNum = 0;//错误次数 // 1 在char这个div里面显示要输入的字母，大写 showChar(); // 3 给文档绑定按键事件 document.onkeyup = function (e) { // 事件对象 e = window.event || e; // 获取按键编码 var keyCode = e.keyCode || e.which; // 4 如果输入的内容和char里面一致 if (keyCode == code) { // 显示正确动画：animated zoomIn charDiv.className = "animated zoomIn"; rightNum++; showChar() } // 5 如果输入的内容和char里面不一致 else { // 显示错误动画：animated shake error charDiv.className = "animated shake error"; wrongNum++ } // 为了下一次有动画，在本次动画完后要移除类名 setTimeout(function () { charDiv.className = ""; }, 500) // 6 不管是正确还是错误都时时更新result里面的正确率 // 正确率 = 正确次/总次数 resultDiv.innerHTML = "正确率:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%" } // 函数功能:在char这个div里面随机显示要输入的字母:大写 function showChar() { // 先随机出一个字母编码 code = rand(65, 90); // 变成一个字母 var char = String.fromCharCode(code); // 显示在char这个div里面 charDiv.innerHTML = char; } </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。