JavaScript typing game code

Function module: Program design:
1. You can select the game time and display the countdown 1. Define global variables
2. You can select the number of English letters 2. Control the game time function
3. Statistics Score 3. Animation effect
4. Menu options 4. Set the time when the letter picture appears
5. Judgment function
6. Game menu
7. Game time option
　　　　　　　　　8.Show game Time
Main code design:

//-------全局变量------- 
var data={ 
"10":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/A.gif&#39;/ alt="JavaScript typing game code" >"],"11":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/B.gif&#39;/ alt="JavaScript typing game code" >"],"12":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/C.gif&#39;/ alt="JavaScript typing game code" >"],"13":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/D.gif&#39;/ alt="JavaScript typing game code" >"], 
"14":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/E.gif&#39;/ alt="JavaScript typing game code" >"],"15":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/F.gif&#39;/ alt="JavaScript typing game code" >"],"16":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/G.gif&#39;/ alt="JavaScript typing game code" >"],"17":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/H.gif&#39;/ alt="JavaScript typing game code" >"], 
"18":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/I.gif&#39;/ alt="JavaScript typing game code" >"],"19":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/J.gif&#39;/ alt="JavaScript typing game code" >"],"20":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/K.gif&#39;/ alt="JavaScript typing game code" >"],"21":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/L.gif&#39;/ alt="JavaScript typing game code" >"], 
"22":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/M.gif&#39;/ alt="JavaScript typing game code" >"],"23":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/N.gif&#39;/ alt="JavaScript typing game code" >"],"24":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/O.gif&#39;/ alt="JavaScript typing game code" >"],"25":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/P.gif&#39;/ alt="JavaScript typing game code" >"], 
"26":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/Q.gif&#39;/ alt="JavaScript typing game code" >"],"27":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/R.gif&#39;/ alt="JavaScript typing game code" >"],"28":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/S.gif&#39;/ alt="JavaScript typing game code" >"],"29":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/T.gif&#39;/ alt="JavaScript typing game code" >"], 
"30":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/U.gif&#39;/ alt="JavaScript typing game code" >"],"31":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/V.gif&#39;/ alt="JavaScript typing game code" >"],"32":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/W.gif&#39;/ alt="JavaScript typing game code" >"],"33":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/X.gif&#39;/ alt="JavaScript typing game code" >"], 
"34":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/Y.gif&#39;/ alt="JavaScript typing game code" >"],"35":["<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/Z.gif&#39;/ alt="JavaScript typing game code" >"] 
}; 
var datas=new Array();//随机出现的 class样式以数组中偶数存储，图片以数组中奇数存储 
var now=new Date(); 
var Image; //随机出现图片 
var Divs;//随机出现层 
var count=0;//积分系统 
var key;//键盘的值 
var amounts=1;//出现字母图片的个数 
var gametime=30;//控制游戏的时间 
var gametimes;//时间为0 
var gametimess=30;//显示时钟变量 
var time1;//setInterval变量 
var time2=5000;//设定setInterval的时间 
var time3; 
var tab;//用来记录，传递tabindex焦点位置的值 
//--------这样写为了兼容FF浏览器------- 
var plug = { 
addEvent:function(o,e,f){ 
if(o.addEventListener){ 
o.addEventListener(e,f,false); 
} 
else if(o.attachEvent){ 
o.attachEvent("on"+e,f); 
} 
} 
} 
plug.addEvent(window,"load",function(){Focus()});//兼容FF浏览器 
//------1.控制游戏时间函数-------- 
function Gametime(){ 
for(gametimes=gametime;gametimes>=0;gametimes--) { 
window.setTimeout(&#39;Show(&#39; + gametimes + &#39;)&#39;,(gametime-gametimes+2) * 1000); 
} 
} 
function Show(gametimes){ 
if(gametimes==0){ 
clearInterval(time1);//停止游戏 
alert("游戏结束!你的得分为:"+count); 
$("#main").empty();//清除main中的div 
$(".gameapply").empty(); 
$("#select1").empty(); 
$("#select2").empty(); 
count=0;//得分清空为0 
Score();//让分数框显示为0 
Focus();//重新生成菜单选项 
} 
} 
//---------2.动画效果--------- 
function fun(){ 
datas.length=0; 
for(var i=0;i<amounts;i++){ 
Image=parseInt(Math.random() * 26)+10;//随机出现字母图片 
datas.push(Image);//图片以数组中偶数存储,从零开始 
Divs=parseInt(Math.random() * 8)+1;//随机出现层的class样式即层的不同位置 
datas.push(Divs);//样式以数组中奇数存储 
var time=parseInt(Math.random() * 2000)+3000;//完成动画的时间 
if(time<5000){ 
var $divs=$("<div class=&#39;divPop"+Divs+"&#39;>"+data[Image]+"</div>"); 
$("#main").append($divs); 
//-----JQ动画函数---- 
$(".divPop"+Divs).animate( 
{"top":$(window).height() - $(".divPop"+Divs).height() - $(".divPop"+Divs).position().top},time,function(){$("#main").empty()}) 
} 
} 
} 
//--------3.设定字母图片出现的时间------ 
function sets(){ 
time1 = setInterval(fun,time2); 
} 
//---------4.绑定键盘--------- 
//---------兼容FF浏览器--------- 
document.onkeydown = function keydown(e){ 
e = e||window.event; 
var key = e.charCode||e.keyCode 
select(key) 
} 
//---------5.判断函数--------- 
function select(key){ 
if(key==13){ 
switch(tab){ 
case 0:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//开始游戏 
case 1:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//开始游戏 
case 2:alert("可以在左侧设置游戏选项");break; 
case 3:window.opener=null;window.open(&#39;&#39;,&#39;_self&#39;);window.close();break;//退出游戏 
case 4:window.opener=null;window.open(&#39;&#39;,&#39;_self&#39;);window.close();break;//退出游戏 
} 
} 
for(var j=0;j<datas.length;j=j+2){//为了让data1里面样式和图片的值不重复（即奇数跟偶数的不可能重复，m的值或者k的值要相差一定的值） 
if(key==datas[j]+55){ 
$(".divPop"+datas[j+1]).hide();//key值相等,隐藏该层 
delete datas[j]; //为了避免有重复的字母，所以数组里面每遍历到一个(key==datas[j]+55)都要删除这个值 
count+=10; 
Score(); 
break; 
} 
} 
} 
//---------6.游戏菜单------- 
function Focus(){ 
//---------初始化游戏界面-------- 
var $selects=$("<div id=&#39;select&#39;><table id=\"tables\"><tr><td><input class=\"inputs\" type=\"text\"value=\"游戏开始\"/></td></tr><tr><td><input class=\"inputs\" type=\"text\" value=\"游戏选项\"/></td></tr><tr><td><input class=\"inputs\" type=\"text\" value=\"退出游戏\"/></td></tr></table></div>"); 
$(".gameapply").append($selects); 
for(var i=30;i<=300;i=i+30){ 
$("#select1").append(&#39;<option>&#39; + i+ &#39;</option>&#39;) 
} 
for(var j=1;j<=9;j++){ 
$("#select2").append(&#39;<option>&#39; + j+ &#39;</option>&#39;) 
} 
//---------开始时取得第一个input的焦点-------- 
$(".inputs:first").trigger("focus").addClass("input1"); 
tab=1;//因为第一个焦点是没法输入Enter，所以要调用键盘输入事件 
var tabIndex=1; 
//----------获取tr行数，input个数-------- 
$("#tables").find("tr").each(function(r) { 
$(this).find("input").attr("tabindex", r+1);//tabindex为焦点位置的值，赋初值为1，遍历为1-2-3-4 
}); 
//---------响应input的键盘上下操作 
$("#tables .inputs").bind("keydown", function(e){ 
tabIndex = parseInt($(this).attr("tabindex"));//取得当前tabindex焦点的值 
switch(e.which){ 
case 38://向上 
tabIndex-=1; 
tab=tabIndex; 
break; 
case 40://向下 
tabIndex+=1; 
tab=tabIndex; 
break; 
default: 
return; 
} 
//--------判断tabIndex焦点的值 
if (tabIndex > 0 && tabIndex < 4) { 
$(".inputs[tabindex=" + tabIndex + "]").focus().addClass("input1");//当前input获取焦点 
for(var i=0;i<=4;i++) 
{ 
if(i==tabIndex){ 
break; 
} 
else{ 
$(this).removeClass("input1"); 
} 
} 
keydown(); 
return false; 
} 
return true; 
}); 
} 
//--------7.游戏时间选项--------- 
function Gametimeselect(){ 
var option=document.getElementById("select1"); 
for(var i=0;i<option.length;++i){ 
if(option[i].selected) { 
gametime=option.options[i].text; 
gametimess=gametime; 
} 
} 
} 
//-----8.显示游戏时间------- 
function countdown(){ 
var timeshows=document.getElementById("timeshow"); 
if(timeshows){//如果网页速度很慢的话，可能定时器运行的时候控件还没有加载 
if(gametimess<0){ 
clearInterval(time3);//停止计时器 
} 
else{ 
timeshows.value=gametimess; 
gametimess--; 
} 
} 
} 
//--------9.游戏难度选项--------- 
function Gameselectamount(){ 
var option=document.getElementById("select2"); 
for(var i=0;i<option.length;++i){ 
if(option[i].selected) { 
amounts=option.options[i].text; 
} 
} 
} 
//---------10.游戏得分----------- 
function Score(){ 
var sum=document.getElementById("sum"); 
sum.value=count; 
if(count==0){ //初始化文本框分数为0 
sum.value=count; 
} 
}

Summary: Since the time interval is relatively long, the code has not been optimized. There is one place that is not done very well, that is, the time interval between letters appearing is too long. If you are interested, you can try to fix it. The code is for reference only

For more articles related to JavaScript typing game codes, please pay attention to the PHP Chinese website!