0

0

JavaScript打字小游戏代码

高洛峰

高洛峰

发布时间:2017-02-06 11:04:10

|

2205人浏览过

|

来源于php中文网

原创

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

JavaScript打字小游戏代码

主要代码设计: 

//-------全局变量------- 
var data={ 
"10":["JavaScript打字小游戏代码"],"11":["JavaScript打字小游戏代码"],"12":["JavaScript打字小游戏代码"],"13":["JavaScript打字小游戏代码"], 
"14":["JavaScript打字小游戏代码"],"15":["JavaScript打字小游戏代码"],"16":["JavaScript打字小游戏代码"],"17":["JavaScript打字小游戏代码"], 
"18":["JavaScript打字小游戏代码"],"19":["JavaScript打字小游戏代码"],"20":["JavaScript打字小游戏代码"],"21":["JavaScript打字小游戏代码"], 
"22":["JavaScript打字小游戏代码"],"23":["JavaScript打字小游戏代码"],"24":["JavaScript打字小游戏代码"],"25":["JavaScript打字小游戏代码"], 
"26":["JavaScript打字小游戏代码"],"27":["JavaScript打字小游戏代码"],"28":["JavaScript打字小游戏代码"],"29":["JavaScript打字小游戏代码"], 
"30":["JavaScript打字小游戏代码"],"31":["JavaScript打字小游戏代码"],"32":["JavaScript打字小游戏代码"],"33":["JavaScript打字小游戏代码"], 
"34":["JavaScript打字小游戏代码"],"35":["JavaScript打字小游戏代码"] 
}; 
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"+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;j
"); $(".gameapply").append($selects); for(var i=30;i<=300;i=i+30){ $("#select1").append('') } for(var j=1;j<=9;j++){ $("#select2").append('') } //---------开始时取得第一个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

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

html5飞机打字小游戏源码
html5飞机打字小游戏源码

一款html5飞机打字小游戏源码

下载

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

立即学习Java免费学习笔记(深入)”;

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

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

相关专题

更多
php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

5

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

1

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

15

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

4

2026.01.13

nginx部署php项目教程汇总
nginx部署php项目教程汇总

本专题整合了nginx部署php项目教程汇总,阅读专题下面的文章了解更多详细内容。

5

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP基础入门课程
PHP基础入门课程

共33课时 | 1.9万人学习

JS轻松实现打地鼠游戏
JS轻松实现打地鼠游戏

共6课时 | 0.7万人学习

最新文章

更多
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号