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免费学习笔记(深入)”;

相关文章

在线游戏
在线游戏

海量精品小游戏合集,无需安装即点即玩,休闲益智、动作闯关应有尽有,秒开即玩,轻松解压,快乐停不下来

下载

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
java连接字符串方法汇总
java连接字符串方法汇总

本专题整合了java连接字符串教程合集,阅读专题下面的文章了解更多详细操作。

7

2026.02.05

java中fail含义
java中fail含义

本专题整合了java中fail的含义、作用相关内容,阅读专题下面的文章了解更多详细内容。

8

2026.02.05

控制反转和依赖注入区别
控制反转和依赖注入区别

本专题整合了控制反转和依赖注入区别、解释、实现方法相关内容。阅读专题下面的文章了解更多详细教程。

11

2026.02.05

钉钉脑图插图教程合集
钉钉脑图插图教程合集

本专题整合了钉钉脑图怎么插入图片、钉钉脑图怎么用相关教程,阅读专题下面的文章了解更多详细内容。

24

2026.02.05

python截取字符串方法汇总
python截取字符串方法汇总

本专题整合了python截取字符串方法相关合集,阅读专题下面的文章了解更多详细内容。

2

2026.02.05

Java截取字符串方法合集
Java截取字符串方法合集

本专题整合了Java截取字符串方法汇总,阅读专题下面的文章了解更多详细操作教程。

1

2026.02.05

java 抽象方法
java 抽象方法

本专题整合了java抽象方法定义、作用教程等内容,阅读专题下面的文章了解更多详细内容。

2

2026.02.05

Eclipse创建jsp文件教程合集
Eclipse创建jsp文件教程合集

本专题整合了Eclipse创建jsp文件、创建jsp项目等等内容,阅读专题下面的文章了解更多详细教程。

26

2026.02.05

java 字符串转数字
java 字符串转数字

本专题整合了java如何字符串转数字相关内容,阅读专题下面的文章了解更多详细教程。

4

2026.02.05

热门下载

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

相关下载

更多

精品课程

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

共33课时 | 2.1万人学习

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

共6课时 | 0.7万人学习

最新文章

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

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