JavaScript实现打字游戏

第JavaScript实现打字游戏本文实例为大家分享了JavaScript实现打字游戏的具体代码，供大家参考，具体内容如下

效果图：

需求分析：

1、在char这个div里面显示要输入的字母，大写

2、在result这个div里面时时显示正确率，比如98%

3、给文档绑定按键事件

4、如果输入的内容和char里面一致，显示正确动画：animatedzoomIn,并更换输入的字母

5、如果输入的内容和char里面不一致，显示错误动画：animatedshakeerror

6、不管是正确还是错误都时时更新result里面的正确率

源代码：

HTML部分

mian

divid="char"A/div

divid="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-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主体代码，无动画特效版

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:0050px#666;

#result{

font-size:20px;

color:#888;

/*找到id为char及类名为error的div元素*/

#char.error{

color:red;

/style

JavaScript部分

1.为了简化代码，先封装一些常用的自定义构造函数

script

//定义一个函数:rand

//参数:最小整数，最大整数

//返回:两个整数之间的一个随机整数

functionrand(min,max){

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

/script

2.js主体部分，需要用到封装的函数，调用即可

script

//获取相关元素

varcharDiv=document.getElementById('char');

varresultDiv=document.getElementById('result');

//code用于记录页面上的字母的编码，使用全局变量，到处都可以使用

varcode,tirme;

varrightNum=0;//正确次数

varwrongNum=0;//错误次数

//1在char这个div里面显示要输入的字母，大写

showChar();

//3给文档绑定按键事件

document.onkeyup=function(e){

//事件对象

e=window.event||e;

//获取按键编码

varkeyCode=e.keyCode||e.which;

//4如果输入的内容和char里面一致

if(keyCode==code){

//显示正确动画：animatedzoomIn

charDiv.className="animatedzoomIn";

rightNum++;

showChar()

//5如果输入的内容和char里面不一致

else{

//显示错误动画：animatedshakeerror

charDiv.className="animatedshakeerror";

wrongNum++

//为了下一次有动画，在本次动画完后要移除类名

setTimeout(function(){

charDiv.className="";

},500)

//6不管是正确还是错误都时时更新result里面的正确率

//正确率=正确次/总次数

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

//函数功能:在char这个div里面随机显示要输入的字母:大写

functionshowChar(){

//先随机出一个字母编码

code=rand(65,90);

//变成一个字母

varchar=String.fromCharCode(code);

//显示在char这个div里面

charDiv.innerHTML=char;

/script

总代码

html

head

metacharset="utf-8"

title打字游戏/title

!--引入animate.css动画库--

linkrel="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: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"请在按键上按下屏幕上显示的字母/div

/mian

/body

/html

script

//定义一个函数:rand

//参数:最小整数，最大整数

//返回:两个整数之间的一个随机整数

functionrand(min,max){

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

/script

script

//获取相关元素

varcharDiv=document.getElementById('char');

varresultDiv=document.getElementById('result');

//code用于记录页面上的字母的编码，使用全局变量，到处都可以使用

varcode,tirme;

varrightNum=0;//正确次数

varwrongNum=0;//错误次数

//1在char这个div里面显示要输入的字母，大写

showChar();

//3给文档绑定按键事件

document.onkeyup=function(e){

//事件对象

e=window.event||e;

//获取按键编码

varkeyCode=e.keyCode||e.which;

//4如果输入的内容和char里面一致

if(keyCode==code){

//显示正确动画：animatedzoomIn

charDiv.className="animatedzoomIn";

rightNum++;