功能模块： 程序设计：
　1.可选择游戏时间，显示倒计时　1.定义全局变量
　2.可选择英文字母出现个数　2.控制游戏时间函数
　3.统计得分3.动画效果
　4.菜单选项4.设定字母图片出现的时间
5.判断函数
6.游戏菜单
7.游戏时间选项
8.显示游戏时间
9.游戏难度选项
10.游戏得分
先上效果图：(ps：美工是硬伤)
主要代码设计：
复制代码 代码如下:
//-------全局变量------- 
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 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('show(' + gametimes + ')',(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;iimage=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(timevar $divs=$(+data[image]+
);
$(#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('','_self');window.close();break;//退出游戏
case 4:window.opener=null;window.open('','_self');window.close();break;//退出游戏
}
}
for(var j=0;jif(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=$(
);
$(.gameapply).append($selects);
for(var i=30;i$(#select1).append('' + i+ '')
}
for(var j=1;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 $(.inputs[tabindex= + tabindex + ]).focus().addclass(input1);//当前input获取焦点
for(var i=0;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;iif(option[i].selected) {
gametime=option.options[i].text;
gametimess=gametime;
}
}
}
//-----8.显示游戏时间-------
function countdown(){
var timeshows=document.getelementbyid(timeshow);
if(timeshows){//如果网页速度很慢的话，可能定时器运行的时候控件还没有加载
if(gametimessclearinterval(time3);//停止计时器
}
else{
timeshows.value=gametimess;
gametimess--;
}
}
}
//--------9.游戏难度选项---------
function gameselectamount(){
var option=document.getelementbyid(select2);
for(var i=0;iif(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;
}
}
总结：由于时间隔得比较久，代码方面没有优化，有个地方做得不是很好，就是字母出现的时间间隔过长，有兴趣的话可以尝试修复。代码仅供参考
在线演示：http://demo.jb51.net/js/2011/starwars/
打包下载： http://www.jb51.net/jiaoben/40902.html