JavaScriptはタイピングゲームを実現します。

本論文の実例はJavaScriptがタイピングゲームの具体的なコードを共有しています。参考にしてください。具体的な内容は以下の通りです。
効果図:



需要分析：
1、charというdivに入力する文字を表示し、大文字にします。
2、resultというdivでは常に正確率を示しています。例えば98%です。
3、ドキュメントに結合するキーイベント
4、入力された内容がcharと一致したら、正確な動画を表示する：animed zoomIn、入力された文字を交換する
5、入力内容がcharと一致しない場合、エラー動画を表示する：animed shakerror
6、正しいにしても間違っていても、常にリセットの正しい率を更新します。
ソースコード:
HTML部分

<mian>
 <div id="char">A</div>
 <div id="result">               </div>
</mian>

css部分
1.いくつかの効果を実現するために、まずアニメイト.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>

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。