JavaScript實(shí)現(xiàn)打字游戲

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

效果圖：

需求分析：

1、在char這個(gè)div里面顯示要輸入的字母，大寫

2、在result這個(gè)div里面時(shí)時(shí)顯示正確率，比如98%

3、給文檔綁定按鍵事件

4、如果輸入的內(nèi)容和char里面一致，顯示正確動(dòng)畫：animatedzoomIn,并更換輸入的字母

5、如果輸入的內(nèi)容和char里面不一致，顯示錯(cuò)誤動(dòng)畫：animatedshakeerror

6、不管是正確還是錯(cuò)誤都時(shí)時(shí)更新result里面的正確率

源代碼：

HTML部分

mian

divid="char"A/div

divid="result"請(qǐng)?jiān)诎存I上按下屏幕上顯示的字母/div

/mian

css部分

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

/*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-keyframeszoomIn{

from{

opacity:0;

-webkit-transform:scale3d(.3,.3,.3);

transform:scale3d(.3,.3,.3);

50%{

opacity:1;

@keyframeszoomIn{

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-keyframesshake{

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);

@keyframesshake{

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

style

body{

margin:0;

/*開啟彈性布局，并讓彈性布局中的子元素

水平居中對(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:0050px#666;

#result{

font-size:20px;

color:#888;

/*找到id為char及類名為error的div元素*/

#char.error{

color:red;

/style

JavaScript部分

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

script

//定義一個(gè)函數(shù):rand

//參數(shù):最小整數(shù)，最大整數(shù)

//返回:兩個(gè)整數(shù)之間的一個(gè)隨機(jī)整數(shù)

functionrand(min,max){

returnparseInt(Math.random()*(max-min+1))+min;

/script

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

script

//獲取相關(guān)元素

varcharDiv=document.getElementById('char');

varresultDiv=document.getElementById('result');

//code用于記錄頁面上的字母的編碼，使用全局變量，到處都可以使用

varcode,tirme;

varrightNum=0;//正確次數(shù)

varwrongNum=0;//錯(cuò)誤次數(shù)

//1在char這個(gè)div里面顯示要輸入的字母，大寫

showChar();

//3給文檔綁定按鍵事件

document.onkeyup=function(e){

//事件對(duì)象

e=window.event||e;

//獲取按鍵編碼

varkeyCode=e.keyCode||e.which;

//4如果輸入的內(nèi)容和char里面一致

if(keyCode==code){

//顯示正確動(dòng)畫：animatedzoomIn

charDiv.className="animatedzoomIn";

rightNum++;

showChar()

//5如果輸入的內(nèi)容和char里面不一致

else{

//顯示錯(cuò)誤動(dòng)畫：animatedshakeerror

charDiv.className="animatedshakeerror";

wrongNum++

//為了下一次有動(dòng)畫，在本次動(dòng)畫完后要移除類名

setTimeout(function(){

charDiv.className="";

},500)

//6不管是正確還是錯(cuò)誤都時(shí)時(shí)更新result里面的正確率

//正確率=正確次/總次數(shù)

resultDiv.innerHTML="正確率:"+parseInt(rightNum/(rightNum+wrongNum)*100)+"%"

//函數(shù)功能:在char這個(gè)div里面隨機(jī)顯示要輸入的字母:大寫

functionshowChar(){

//先隨機(jī)出一個(gè)字母編碼

code=rand(65,90);

//變成一個(gè)字母

varchar=String.fromCharCode(code);

//顯示在char這個(gè)div里面

charDiv.innerHTML=char;

/script

總代碼

html

head

metacharset="utf-8"

title打字游戲/title

!--引入animate.css動(dòng)畫庫--

linkrel="stylesheet"href="animate.css"

style

body{

margin:0;

/*開啟彈性布局，并讓彈性布局中的子元素

水平居中對(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:0050px#666;

#result{

font-size:20px;

color:#888;

/*找到id為char及類名為error的div元素*/

#char.error{

color:red;

/style

/head

body

mian

divid="char"A/div

divid="result"請(qǐng)?jiān)诎存I上按下屏幕上顯示的字母/div

/mian

/body

/html

script

//定義一個(gè)函數(shù):rand

//參數(shù):最小整數(shù)，最大整數(shù)

//返回:兩個(gè)整數(shù)之間的一個(gè)隨機(jī)整數(shù)

functionrand(min,max){

returnparseInt(Math.random()*(max-min+1))+min;

/script

script

//獲取相關(guān)元素

varcharDiv=document.getElementById('char');

varresultDiv=document.getElementById('result');

//code用于記錄頁面上的字母的編碼，使用全局變量，到處都可以使用

varcode,tirme;

varrightNum=0;//正確次數(shù)

varwrongNum=0;//錯(cuò)誤次數(shù)

//1在char這個(gè)div里面顯示要輸入的字母，大寫

showChar();

//3給文檔綁定按鍵事件

document.onkeyup=function(e){

//事件對(duì)象

e=window.event||e;

//獲取按鍵編碼

varkeyCode=e.keyCode||e.which;

//4如果輸入的內(nèi)容和char里面一致

if(keyCode==code){

//顯示正確動(dòng)畫：animatedzoomIn

charDiv.className="animatedzoomIn";

rightNum++;