JavaScript打字小游戏代码示例

上半年自学了javascript，然后就做了个打字小游戏玩玩

功能模块： 　　程序设计：
　　　1.可选择游戏时间，显示倒计时　　　　　　　1.定义全局变量
　　　2.可选择英文字母出现个数　　　　　　　　　2.控制游戏时间函数
　　　3.统计得分　　　　　　　　　　　　　　　　3.动画效果
　　　4.菜单选项　　　　　　　　　　　　　　　　4.设定字母图片出现的时间
　　　　　　　　　　　　　　　　　　　　　　　　5.判断函数
　　　　　　　　　　　　　　　　　　　　　　　　6.游戏菜单
　　　　　　　　　　　　　　　　　　　　　　　　7.游戏时间选项
　　　　　　　　　　　　　　　　　　　　　　　　8.显示游戏时间
　　　　　　　　　　　　　　　　　　　　　　　　9.游戏难度选项
　　　　　　　　　　　　　　　　　　　　　　　　10.游戏得分
　　
　　先上效果图：(PS：美工是硬伤)

主要代码设计：

VidAU

VidAU AI 是一款AI驱动的数字人视频创作平台，旨在简化视频内容创作流程

下载

代码如下:

//-------全局变量------- 
var data={ 
"10":["@@##@@"],"11":["@@##@@"],"12":["@@##@@"],"13":["@@##@@"], 
"14":["@@##@@"],"15":["@@##@@"],"16":["@@##@@"],"17":["@@##@@"], 
"18":["@@##@@"],"19":["@@##@@"],"20":["@@##@@"],"21":["@@##@@"], 
"22":["@@##@@"],"23":["@@##@@"],"24":["@@##@@"],"25":["@@##@@"], 
"26":["@@##@@"],"27":["@@##@@"],"28":["@@##@@"],"29":["@@##@@"], 
"30":["@@##@@"],"31":["@@##@@"],"32":["@@##@@"],"33":["@@##@@"], 
"34":["@@##@@"],"35":["@@##@@"] 
}; 
var datas=new Array();//随机出现的 class样式以数组中偶数存储，图片以数组中奇数存储 
var now=new Date(); 
var Image; //随机出现图片 
var ps;//随机出现层 
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('Show(' + gametimes + ')',(gametime-gametimes+2) * 1000); 
} 
} 
function Show(gametimes){ 
if(gametimes==0){ 
clearInterval(time1);//停止游戏 
alert("游戏结束!你的得分为:"+count); 
$("#main").empty();//清除main中的p 
$(".gameapply").empty(); 
$("#select1").empty(); 
$("#select2").empty(); 
count=0;//得分清空为0 
Score();//让分数框显示为0 
Focus();//重新生成菜单选项 
} 
} 
//---------2.动画效果--------- 
function fun(){ 
datas.length=0; 
for(var i=0;i"+data[Image]+"
"); 
$("#main").append($ps); 
//-----JQ动画函数---- 
$(".pPop"+ps).animate( 
{"top":$(window).height() - $(".pPop"+ps).height() - $(".pPop"+ps).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('','_self');window.close();break;//退出游戏 
case 4:window.opener=null;window.open('','_self');window.close();break;//退出游戏 
} 
} 
for(var j=0;j
"); 
$(".gameapply").append($selects); 
for(var i=30;i<=300;i=i+30){ 
$("#select1").append('' + i+ '') 
} 
for(var j=1;j<=9;j++){ 
$("#select2").append('' + j+ '') 
} 
//---------开始时取得第一个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