JQuery's simple typing game prompts you for correct and incorrect counts

2020-03-30 03:27:45
OfStack

var off_x; //abscissa
var count=0; // Total score  
var speed=5000; //The speed, by default, is 5 seconds.
var keyErro=0; //Number of input errors
var keyRight=0; //Enter the correct number of times

//Groups of letters
var charArray=new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"); 
//Key code array
var arrCode=new Array(); 
for(var i=65;i<=90;i++){ 
arrCode[i-65]=i; 
} 
//I'm going to produce a random letter
var randomChar=function(){ 
off_x=Math.random()*500+5; // in divabscissa
//off_y=Math.random()*500-10; // in div ordinate  
var c=charArray[parseInt(Math.random()*25)]; //I'm going to randomly generate a letter
var charHtml=" <div class='char' id='"+c+"' style='left: "+off_x+"px;color:"+colorBox()+"'>"+c+"</div>"; 
$("#div1").append(charHtml); 
}; 

var colorBox=function(){ 
Color=[]; //Use arrays to store color styles
Color[0]="#ff2211"; 
Color[1]="#ff3311"; 
Color[2]="#ff5511"; 
Color[3]="#ff8811"; 
Color[4]="#ffBB99"; 
Color[5]="#1ff4f1"; 
Color[6]="#ff5566"; 
Color[7]="#668899"; 
Color[8]="#99BBfA"; 
Color[9]="#fECECC"; 
return Color[parseInt(Math.random()*10)]; //I'm going to pick a random color.
} 

//Methods are called every three seconds to produce letters
function accrueChar(){ 
//Put the random ones in the animation queue
var _sildeFun=[ 
//Place the animations to be executed in sequence into an array
function(){$('#div1 div').animate({top:'+=470px'},speed,function(){ 
//When the animation is finished, it is deleted
$(this).remove(); 
count-=10; 
$("input[type='text']").attr({"value":count}); 
});} 
]; 
//Put the function group in the slideList animation queue
$("#div1").queue('slideList',_sildeFun); 
var _takeStart=function(){ 
//Removes a queue function from the front of the queue and executes it.
$("#div1").dequeue("slideList"); 
}; 

function randCharHandle(){ 
randomChar(); 
_takeStart(); 

} 
randCharHandle(); 
} 

//Key code processing
function keyCode(event){ 
var keyValue = event.keyCode; 
var flag=false; 
//alert(keyValue); 
for(var i=0;i<=arrCode.length;i++){ 
if(keyValue==arrCode[i]&&$("#"+charArray[i]+"").text()!=""){ 

//Pick right and stop for a second
$("#"+charArray[i]+"").stop(1000).remove(); 
//If you pick the right one, add 10 points
count+=10; 
$("input[type='text']").attr({"value":count}); 
$("#right").text(keyRight); 

flag=true; 
break; 
} 
} 
if(flag){ 
flag=false; 
keyRight++; 
$("#right").text(keyRight); 

}else{ 
keyErro++; 
$("#erro").text(keyErro); 
} 
} 

$(function(){ 

// To speed up  
$("input[value=' To speed up ++']").click(function(){ 
if(speed>0) 
speed-=1000; 
}); 

// Slow down  
$("input[value=' Slow down --']").click(function(){ 
speed+=1000; 
}); 


}); 
window.setInterval("accrueChar()",1500);


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="../../jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript" src="test.js"></script> 
<title> Typing game </title> 
<style type="text/css"> 
#div1{ 
border: 2px red solid; 
width:500px; 
height: 500px; 
background-color: black; 
} 
.char{ 
width: 20px; 
height:20px; 
position:absolute; 
font: 40px; 

} 
</style> 
</head> 
<body onkeypress="keyCode(event)"> 
<div id="div1"> 

</div> 
<div> 
<br> The total number of :<input type="text" readonly="readonly"> 
<input type="button" value=" To speed up ++"> 
<input type="button" value=" Slow down --"> 
<br> Wrong number :<label id="erro"></label> 
<br> The correct number :<label id="right"></label> 
</div> 
</body> 
</html>