JavaScript实现打字游戏

本文实例为大家分享了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>
    

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

• 原生JS实现点击数字小游戏
• 用js实现拼图小游戏
• js实现贪吃蛇游戏含注释
• 原生js实现2048小游戏
• javascript实现拼图游戏
• 原生js实现自定义难度的扫雷游戏
• js canvas实现五子棋小游戏
• 如何利用JavaScript编写一个格斗小游戏
• 基于JavaScript实现简单扫雷游戏
• JavaScript 实现生命游戏

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！