JavaScript實現打字游戲

更新時間：2021年02月19日 09:03:54 作者：一顆不甘墜落的流星

這篇文章主要為大家詳細介紹了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.為了實現一些特效，先創(chuàng)建一個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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: