SoFunction
Updated on 2025-03-02

JavaScript typing game code

 
//-----------------------------------
var data={ 
"10":["<img src='images/'/>"],"11":["<img src='images/'/>"],"12":["<img src='images/'/>"],"13":["<img src='images/'/>"], 
"14":["<img src='images/'/>"],"15":["<img src='images/'/>"],"16":["<img src='images/'/>"],"17":["<img src='images/'/>"], 
"18":["<img src='images/'/>"],"19":["<img src='images/'/>"],"20":["<img src='images/'/>"],"21":["<img src='images/'/>"], 
"22":["<img src='images/'/>"],"23":["<img src='images/'/>"],"24":["<img src='images/'/>"],"25":["<img src='images/'/>"], 
"26":["<img src='images/'/>"],"27":["<img src='images/'/>"],"28":["<img src='images/'/>"],"29":["<img src='images/'/>"], 
"30":["<img src='images/'/>"],"31":["<img src='images/'/>"],"32":["<img src='images/'/>"],"33":["<img src='images/'/>"], 
"34":["<img src='images/'/>"],"35":["<img src='images/'/>"]
};
var datas=new Array();//The randomly occurring class style is stored as even numbers in the array, and the picture is stored as odd numbers in the array
var now=new Date();
var Image; //Stock image appears
var Divs;// Random layers appear
var count=0;//Points System
var key;//The value of the keyboard
var amounts=1;//The number of letter pictures appears
var gametime=30;//Control the game time
var gametimes;//Time is 0
var gametimess=30;//Show clock variables
var time1;//setInterval variable
var time2=5000;//Set the time of setInterval
var time3;
var tab;// Used to record and pass the value of the tabindex focus position
//-------------------------
var plug = {
addEvent:function(o,e,f){
if(){
(e,f,false);
}
else if(){
("on"+e,f);
}
}
}
(window,"load",function(){Focus()});//Compatible with FF browser
//------1. Control the game time function--------
function Gametime(){
for(gametimes=gametime;gametimes>=0;gametimes--) {
('Show(' + gametimes + ')',(gametime-gametimes+2) * 1000);
}
}
function Show(gametimes){
if(gametimes==0){
clearInterval(time1);//Stop the game
alert("The game ends! Your score is:"+count);
$("#main").empty();//Clear the div in main
$(".gameapply").empty();
$("#select1").empty();
$("#select2").empty();
count=0;//Clear the score to 0
Score();//Let the score box be displayed as 0
Focus();//Regenerate menu options
}
}
//-----------------------------------------------------------------------------------------------------------------------------
function fun(){
=0;
for(var i=0;i<amounts;i++){
Image=parseInt(() * 26)+10;//The letter image appears randomly
(Image);//The picture is stored as even numbers in the array, starting from zero
Divs=parseInt(() * 8)+1;//The class style of the random occurrence of the layer is that is different positions of the layer
(Divs);//Style is stored as odd numbers in an array
var time=parseInt(() * 2000)+3000;//Time to complete the animation
if(time<5000){
var $divs=$("<div class='divPop"+Divs+"'>"+data[Image]+"</div>");
$("#main").append($divs);
//------JQ animation function----
$(".divPop"+Divs).animate(
{"top":$(window).height() - $(".divPop"+Divs).height() - $(".divPop"+Divs).position().top},time,function(){$("#main").empty()})
}
}
}
//-----------3. Set the time when the letter picture appears------
function sets(){
time1 = setInterval(fun,time2);
}
//----------4. Bind the keyboard------------
//-----------------------------------------------------------------------------------------------------------------------------
= function keydown(e){
e = e||;
var key = ||
select(key)
}
//-----------5. Judgment function-----------
function select(key){
if(key==13){
switch(tab){
case 0:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//Start the game
case 1:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//Start the game
case 2:alert("The game options can be set on the left"); break;
case 3:=null;('','_self');();break;//Exit the game
case 4:=null;('','_self');();break;//Exit the game
}
}
for(var j=0;j<;j=j+2){//In order to prevent the style and picture values ​​in data1 from being repeated (that is, it is impossible to repeat odd numbers and even numbers, the value of m or k must be different by a certain value)
if(key==datas[j]+55){
$(".divPop"+datas[j+1]).hide();//The key values ​​are equal, hide this layer
delete datas[j]; //In order to avoid duplicate letters, this value must be deleted every time (key==datas[j]+55) is traversed in the array.
count+=10;
Score();
break;
}
}
}
//-----------6. Game menu-------
function Focus(){
//-----------------------------------------------------------------------------------------------------------------------------
var $selects=$("<div id='select'><table id=\"tables\"><tr><td><input class=\"inputs\" type=\"text\"value=\"game start\"/></td></tr><tr><td><input class=\"inputs\" type=\"text\" value=\"game options\"/></td></tr><tr><td><input class=\"inputs\" type=\"text\" value=\"exit game\"/></td></tr></table></div>");
$(".gameapply").append($selects);
for(var i=30;i<=300;i=i+30){
$("#select1").append('<option>' + i+ '</option>')
}
for(var j=1;j<=9;j++){
$("#select2").append('<option>' + j+ '</option>')
}
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
$(".inputs:first").trigger("focus").addClass("input1");
tab=1;//Because the first focus is that it is impossible to enter Enter, you need to call the keyboard to enter the event
var tabIndex=1;
//-----------------------------------------------------------------------------------------------------------------------------
$("#tables").find("tr").each(function(r) {
$(this).find("input").attr("tabindex", r+1);//tabindex is the value of the focus position, the initial value is 1, and the traversal is 1-2-3-4
});
//-----------------------------------------------------------------------------------------------------------------------------
$("#tables .inputs").bind("keydown", function(e){
tabIndex = parseInt($(this).attr("tabindex"));//Get the current tabindex focus value
switch(){
case 38://up
tabIndex-=1;
tab=tabIndex;
break;
case 40://down
tabIndex+=1;
tab=tabIndex;
break;
default:
return;
}
//--------------Judge the value of tabIndex focus
if (tabIndex > 0 && tabIndex < 4) {
$(".inputs[tabindex=" + tabIndex + "]").focus().addClass("input1");//The current input gets focus
for(var i=0;i<=4;i++)
{
if(i==tabIndex){
break;
}
else{
$(this).removeClass("input1");
}
}
keydown();
return false;
}
return true;
});
}
//---------7. Game time options-----------
function Gametimeselect(){
var option=("select1");
for(var i=0;i<;++i){
if(option[i].selected) {
gametime=[i].text;
gametimess=gametime;
}
}
}
//-----8. Show game time --------
function countdown(){
var timeshows=("timeshow");
if(timeshows){//If the web page is very slow, the control may not be loaded while the timer is running.
if(gametimess<0){
clearInterval(time3);//Stop the timer
}
else{
=gametimess;
gametimess--;
}
}
}
//---------9. Game difficulty options-----------
function Gameselectamount(){
var option=("select2");
for(var i=0;i<;++i){
if(option[i].selected) {
amounts=[i].text;
}
}
}
//----------10. Game Score-------------------------------------------------------------------------------------------------------------
function Score(){
var sum=("sum");
=count;
if(count==0){ //Initialize text box score is 0
=count;
}
}