JavaScript打字小游戏代码


Posted in Javascript onDecember 26, 2011

功能模块:

程序设计:

 1.可选择游戏时间,显示倒计时

 1.定义全局变量

 2.可选择英文字母出现个数

 2.控制游戏时间函数

 3.统计得分

3.动画效果

 4.菜单选项

4.设定字母图片出现的时间

5.判断函数

6.游戏菜单

7.游戏时间选项

8.显示游戏时间

9.游戏难度选项

10.游戏得分


先上效果图:(PS:美工是硬伤)
JavaScript打字小游戏代码
主要代码设计:

 
//-------全局变量------- 
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; 
} 
}

总结:由于时间隔得比较久,代码方面没有优化,有个地方做得不是很好,就是字母出现的时间间隔过长,有兴趣的话可以尝试修复。代码仅供参考
在线演示:http://demo.3water.com/js/2011/StarWars/
打包下载: https://3water.com/jiaoben/40902.html
Javascript 相关文章推荐
在新窗口打开超链接的方法小结
Apr 14 Javascript
js中substring和substr的定义和用法
May 05 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 #Javascript
js 函数调用模式小结
Dec 26 #Javascript
JavaScript 原型继承
Dec 26 #Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 #Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 #Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 #Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 #Javascript
You might like
PHP基本语法实例总结
2016/09/09 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
Python 功能和特点(新手必学)
2015/12/30 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
python 日志 logging模块详细解析
2020/03/31 Python
Django中FilePathField字段的用法
2020/05/21 Python
python如何实时获取tcpdump输出
2020/09/16 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
校园绿化美化方案
2014/06/08 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
Python实现照片卡通化
2021/12/06 Python
SQL Server中锁的用法
2022/05/20 SQL Server