Rumah >hujung hadapan web >tutorial js >JavaScript打字小游戏代码
功能模块: 程序设计:
1.可选择游戏时间,显示倒计时 1.定义全局变量
2.可选择英文字母出现个数 2.控制游戏时间函数
3.统计得分 3.动画效果
4.菜单选项 4.设定字母图片出现的时间
5.判断函数
6.游戏菜单
7.游戏时间选项
8.显示游戏时间
9.游戏难度选项
10.游戏得分
先上效果图:(PS:美工是硬伤)
主要代码设计:
//-------全局变量------- var data={ "10":["<img src='images/A.gif'/>"],"11":["<img src='images/B.gif'/>"],"12":["<img src='images/C.gif'/>"],"13":["<img src='images/D.gif'/>"], "14":["<img src='images/E.gif'/>"],"15":["<img src='images/F.gif'/>"],"16":["<img src='images/G.gif'/>"],"17":["<img src='images/H.gif'/>"], "18":["<img src='images/I.gif'/>"],"19":["<img src='images/J.gif'/>"],"20":["<img src='images/K.gif'/>"],"21":["<img src='images/L.gif'/>"], "22":["<img src='images/M.gif'/>"],"23":["<img src='images/N.gif'/>"],"24":["<img src='images/O.gif'/>"],"25":["<img src='images/P.gif'/>"], "26":["<img src='images/Q.gif'/>"],"27":["<img src='images/R.gif'/>"],"28":["<img src='images/S.gif'/>"],"29":["<img src='images/T.gif'/>"], "30":["<img src='images/U.gif'/>"],"31":["<img src='images/V.gif'/>"],"32":["<img src='images/W.gif'/>"],"33":["<img src='images/X.gif'/>"], "34":["<img src='images/Y.gif'/>"],"35":["<img src='images/Z.gif'/>"] }; 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;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='divPop"+Divs+"'>"+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('','_self');window.close();break;//退出游戏 case 4:window.opener=null;window.open('','_self');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='select'><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('<option>' + i+ '</option>') } for(var j=1;j<=9;j++){ $("#select2").append('<option>' + j+ '</option>') } //---------开始时取得第一个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; } }
总结:由于时间隔得比较久,代码方面没有优化,有个地方做得不是很好,就是字母出现的时间间隔过长,有兴趣的话可以尝试修复。代码仅供参考
更多JavaScript打字小游戏代码相关文章请关注PHP中文网!