本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)打字游戲的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

需求分析：

1、在char這個(gè)div里面顯示要輸入的字母，大寫(xiě)2、在result這個(gè)div里面時(shí)時(shí)顯示正確率，比如98%3、給文檔綁定按鍵事件4、如果輸入的內(nèi)容和char里面一致，顯示正確動(dòng)畫(huà)：animated zoomIn,并更換輸入的字母5、如果輸入的內(nèi)容和char里面不一致，顯示錯(cuò)誤動(dòng)畫(huà)：animated shake error6、不管是正確還是錯(cuò)誤都時(shí)時(shí)更新result里面的正確率

源代碼：

HTML部分

<mian> <div id='char'>A</div> <div id='result'>請(qǐng)?jiān)诎存I上按下屏幕上顯示的字母</div></mian>

css部分

1.為了實(shí)現(xiàn)一些特效，先創(chuàng)建一個(gè)animate.css文件，在封裝一些動(dòng)畫(huà)效果放里面

/*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主體代碼，無(wú)動(dòng)畫(huà)特效版

<style> body { margin: 0; /*開(kāi)啟彈性布局，并讓彈性布局中的子元素 水平居中對(duì)齊，垂直居中對(duì)齊*/ display: flex; justify-content: center; align-items: center; /*文字居中*/ text-align: center; /*設(shè)置背景顏色的經(jīng)像漸變*/ background: radial-gradient(circle, #444, #111, #000); } #char { font-size: 400px; color: lightgreen; /*設(shè)置文字陰影*/ /*text-shadow: 水平位置 垂直位置 模糊距離 陰影顏色*/ /*位置可以為負(fù)值*/ text-shadow: 0 0 50px #666; } #result { font-size: 20px; color: #888; } /*找到id為char及類(lèi)名為error的div元素*/ #char.error { color: red; }</style>

JavaScript部分

1.為了簡(jiǎn)化代碼，先封裝一些常用的自定義構(gòu)造函數(shù)

<script>// 定義一個(gè)函數(shù):rand// 參數(shù):最小整數(shù)，最大整數(shù)// 返回:兩個(gè)整數(shù)之間的一個(gè)隨機(jī)整數(shù)function rand(min, max) { return parseInt(Math.random() * (max - min + 1)) + min;} </script>

2.js主體部分，需要用到封裝的函數(shù)，調(diào)用即可

<script> // 獲取相關(guān)元素 var charDiv = document.getElementById(’char’); var resultDiv = document.getElementById(’result’); // code用于記錄頁(yè)面上的字母的編碼，使用全局變量，到處都可以使用 var code, tirme; var rightNum = 0;//正確次數(shù) var wrongNum = 0;//錯(cuò)誤次數(shù) // 1 在char這個(gè)div里面顯示要輸入的字母，大寫(xiě) showChar(); // 3 給文檔綁定按鍵事件 document.onkeyup = function (e) { // 事件對(duì)象 e = window.event || e; // 獲取按鍵編碼 var keyCode = e.keyCode || e.which; // 4 如果輸入的內(nèi)容和char里面一致 if (keyCode == code) { // 顯示正確動(dòng)畫(huà)：animated zoomIn charDiv.className = 'animated zoomIn'; rightNum++; showChar() } // 5 如果輸入的內(nèi)容和char里面不一致 else { // 顯示錯(cuò)誤動(dòng)畫(huà)：animated shake error charDiv.className = 'animated shake error'; wrongNum++ } // 為了下一次有動(dòng)畫(huà)，在本次動(dòng)畫(huà)完后要移除類(lèi)名 setTimeout(function () { charDiv.className = ''; }, 500) // 6 不管是正確還是錯(cuò)誤都時(shí)時(shí)更新result里面的正確率 // 正確率 = 正確次/總次數(shù) resultDiv.innerHTML = '正確率:' + parseInt(rightNum / (rightNum + wrongNum) * 100) + '%' } // 函數(shù)功能:在char這個(gè)div里面隨機(jī)顯示要輸入的字母:大寫(xiě) function showChar() { // 先隨機(jī)出一個(gè)字母編碼 code = rand(65, 90); // 變成一個(gè)字母 var char = String.fromCharCode(code); // 顯示在char這個(gè)div里面 charDiv.innerHTML = char; }</script>

總代碼

<html><head> <meta charset='utf-8'> <title>打字游戲</title> <!--引入animate.css動(dòng)畫(huà)庫(kù)--> <link rel='stylesheet' href='http://www.hdgsjgj.cn/bcjs/animate.css' > <style> body { margin: 0; /*開(kāi)啟彈性布局，并讓彈性布局中的子元素 水平居中對(duì)齊，垂直居中對(duì)齊*/ display: flex; justify-content: center; align-items: center; /*文字居中*/ text-align: center; /*設(shè)置背景顏色的經(jīng)像漸變*/ background: radial-gradient(circle, #444, #111, #000); } #char { font-size: 400px; color: lightgreen; /*設(shè)置文字陰影*/ /*text-shadow: 水平位置 垂直位置 模糊距離 陰影顏色*/ /*位置可以為負(fù)值*/ text-shadow: 0 0 50px #666; } #result { font-size: 20px; color: #888; } /*找到id為char及類(lèi)名為error的div元素*/ #char.error { color: red; } </style></head><body> <mian> <div id='char'>A</div> <div id='result'>請(qǐng)?jiān)诎存I上按下屏幕上顯示的字母</div> </mian></body></html><script> // 定義一個(gè)函數(shù):rand // 參數(shù):最小整數(shù)，最大整數(shù) // 返回:兩個(gè)整數(shù)之間的一個(gè)隨機(jī)整數(shù) function rand(min, max) { return parseInt(Math.random() * (max - min + 1)) + min; }</script><script> // 獲取相關(guān)元素 var charDiv = document.getElementById(’char’); var resultDiv = document.getElementById(’result’); // code用于記錄頁(yè)面上的字母的編碼，使用全局變量，到處都可以使用 var code, tirme; var rightNum = 0;//正確次數(shù) var wrongNum = 0;//錯(cuò)誤次數(shù) // 1 在char這個(gè)div里面顯示要輸入的字母，大寫(xiě) showChar(); // 3 給文檔綁定按鍵事件 document.onkeyup = function (e) { // 事件對(duì)象 e = window.event || e; // 獲取按鍵編碼 var keyCode = e.keyCode || e.which; // 4 如果輸入的內(nèi)容和char里面一致 if (keyCode == code) { // 顯示正確動(dòng)畫(huà)：animated zoomIn charDiv.className = 'animated zoomIn'; rightNum++; showChar() } // 5 如果輸入的內(nèi)容和char里面不一致 else { // 顯示錯(cuò)誤動(dòng)畫(huà)：animated shake error charDiv.className = 'animated shake error'; wrongNum++ } // 為了下一次有動(dòng)畫(huà)，在本次動(dòng)畫(huà)完后要移除類(lèi)名 setTimeout(function () { charDiv.className = ''; }, 500) // 6 不管是正確還是錯(cuò)誤都時(shí)時(shí)更新result里面的正確率 // 正確率 = 正確次/總次數(shù) resultDiv.innerHTML = '正確率:' + parseInt(rightNum / (rightNum + wrongNum) * 100) + '%' } // 函數(shù)功能:在char這個(gè)div里面隨機(jī)顯示要輸入的字母:大寫(xiě) function showChar() { // 先隨機(jī)出一個(gè)字母編碼 code = rand(65, 90); // 變成一個(gè)字母 var char = String.fromCharCode(code); // 顯示在char這個(gè)div里面 charDiv.innerHTML = char; }</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。