JavaScript打字小游戏代码-js教程-PHP中文网

首页

web前端

js教程

JavaScript打字小游戏代码

高洛峰

Feb 06, 2017 am 11:04 AM

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

JavaScript打字小游戏代码

主要代码设计：

//-------全局变量------- 
var data={ 
"10":["<img src=&#39;images/A.gif&#39;/>"],"11":["<img src=&#39;images/B.gif&#39;/>"],"12":["<img src=&#39;images/C.gif&#39;/>"],"13":["<img src=&#39;images/D.gif&#39;/>"], 
"14":["<img src=&#39;images/E.gif&#39;/>"],"15":["<img src=&#39;images/F.gif&#39;/>"],"16":["<img src=&#39;images/G.gif&#39;/>"],"17":["<img src=&#39;images/H.gif&#39;/>"], 
"18":["<img src=&#39;images/I.gif&#39;/>"],"19":["<img src=&#39;images/J.gif&#39;/>"],"20":["<img src=&#39;images/K.gif&#39;/>"],"21":["<img src=&#39;images/L.gif&#39;/>"], 
"22":["<img src=&#39;images/M.gif&#39;/>"],"23":["<img src=&#39;images/N.gif&#39;/>"],"24":["<img src=&#39;images/O.gif&#39;/>"],"25":["<img src=&#39;images/P.gif&#39;/>"], 
"26":["<img src=&#39;images/Q.gif&#39;/>"],"27":["<img src=&#39;images/R.gif&#39;/>"],"28":["<img src=&#39;images/S.gif&#39;/>"],"29":["<img src=&#39;images/T.gif&#39;/>"], 
"30":["<img src=&#39;images/U.gif&#39;/>"],"31":["<img src=&#39;images/V.gif&#39;/>"],"32":["<img src=&#39;images/W.gif&#39;/>"],"33":["<img src=&#39;images/X.gif&#39;/>"], 
"34":["<img src=&#39;images/Y.gif&#39;/>"],"35":["<img src=&#39;images/Z.gif&#39;/>"] 
}; 
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; 
} 
}

总结：由于时间隔得比较久，代码方面没有优化，有个地方做得不是很好，就是字母出现的时间间隔过长，有兴趣的话可以尝试修复。代码仅供参考

更多JavaScript打字小游戏代码相关文章请关注PHP中文网！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。