首頁 > web前端 > js教程 > JavaScript打字小游戏代码_javascript技巧

JavaScript打字小游戏代码_javascript技巧

WBOY
發布: 2016-05-16 17:57:55
原創
1362 人瀏覽過

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

复制代码 代码如下:
 
//-------全局变量------- 
var data={ 
"10":["JavaScript打字小游戏代码_javascript技巧"],"11":["JavaScript打字小游戏代码_javascript技巧"],"12":["JavaScript打字小游戏代码_javascript技巧"],"13":["JavaScript打字小游戏代码_javascript技巧"], 
"14":["JavaScript打字小游戏代码_javascript技巧"],"15":["JavaScript打字小游戏代码_javascript技巧"],"16":["JavaScript打字小游戏代码_javascript技巧"],"17":["JavaScript打字小游戏代码_javascript技巧"], 
"18":["JavaScript打字小游戏代码_javascript技巧"],"19":["JavaScript打字小游戏代码_javascript技巧"],"20":["JavaScript打字小游戏代码_javascript技巧"],"21":["JavaScript打字小游戏代码_javascript技巧"], 
"22":["JavaScript打字小游戏代码_javascript技巧"],"23":["JavaScript打字小游戏代码_javascript技巧"],"24":["JavaScript打字小游戏代码_javascript技巧"],"25":["JavaScript打字小游戏代码_javascript技巧"], 
"26":["JavaScript打字小游戏代码_javascript技巧"],"27":["JavaScript打字小游戏代码_javascript技巧"],"28":["JavaScript打字小游戏代码_javascript技巧"],"29":["JavaScript打字小游戏代码_javascript技巧"], 
"30":["JavaScript打字小游戏代码_javascript技巧"],"31":["JavaScript打字小游戏代码_javascript技巧"],"32":["JavaScript打字小游戏代码_javascript技巧"],"33":["JavaScript打字小游戏代码_javascript技巧"], 
"34":["JavaScript打字小游戏代码_javascript技巧"],"35":["JavaScript打字小游戏代码_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;iImage=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(timevar $divs=$("
"+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;jif(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=$("
");
$(".gameapply").append($selects);
for(var i=30;i$("#select1").append('')
}
for(var j=1;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 $(".inputs[tabindex=" + tabIndex + "]").focus().addClass("input1");//当前input获取焦点
for(var i=0;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;iif(option[i].selected) {
gametime=option.options[i].text;
gametimess=gametime;
}
}
}
//-----8.显示游戏时间-------
function countdown(){
var timeshows=document.getElementById("timeshow");
if(timeshows){//如果网页速度很慢的话,可能定时器运行的时候控件还没有加载
if(gametimessclearInterval(time3);//停止计时器
}
else{
timeshows.value=gametimess;
gametimess--;
}
}
}
//--------9.游戏难度选项---------
function Gameselectamount(){
var option=document.getElementById("select2");
for(var i=0;iif(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.jb51.net/js/2011/StarWars/
打包下载: http://www.jb51.net/jiaoben/40902.html
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板