首页 >

基于javascript实现句子翻牌网页版小游戏【javascript】

web前端|js教程基于javascript实现句子翻牌网页版小游戏【javascript】
javascript句子翻牌游戏,javascript网页版游戏
web前端-js教程
本文实例为大家分享了js实现句子翻牌网页版小游戏,供大家参考,具体内容如下
马克斯x站源码程 65533 模版,ubuntu 查看自己空间,tomcat7安全版本,弹出表格爬虫,云桌面 php,荔湾区运营seo优化哪个好lzw
效果图:
连锁酒店网站源码,vs2019vscode,ubuntu 用户登出,tomcat 应用卡死,sqlite的所有表索引,爬虫软件能自学吗视频,php显示不了图片,品牌效应seo,移动电商网站模板,网页自适应实例,discuz 帖子页模板lzw
战地之王挂源码,浏览器vscode插件,nvidia装ubuntu,tomcat样本应用,草莓怎么爬虫,php 富文本过滤,排名好的seo优化公司,班级网站源码相的多,php安装织梦模板文件lzw
实现思路:

考察打字能力和记忆能力的益智小游戏。
1.会先把一段文字显示
2.一小段时间后显示背面
3.输入框输入文字与文字全部对应显示正面

具体代码:

句子翻牌$(function(){ //ht5 dom var otestAudio=document.getElementById("test-audio"); //data var data_all=[]; data_all[0]=[ {id:'0',text:'我,爱你,吗,?',is:true,count:3,'url':'audio/1.mp3'}, {id:'1',text:'亲爱的,你,好吗,?',is:true,count:3,'url':'audio/2.mp3'}, {id:'2',text:'不知道,啊,!',is:true,count:2,'url':'audio/3.mp3'}, {id:'3',text:'谢谢,你,说的,。',is:true,count:3,'url':'audio/4.mp3'}, {id:'4',text:'也许,对吧,!',is:true,count:2,'url':'audio/5.mp3'}, {id:'5',text:'听,不懂,啊,!',is:true,count:3,'url':'audio/1.mp3'}, {id:'6',text:'天天,向上,,,好好,学习,。',is:true,count:4,'url':'audio/2.mp3'}, {id:'7',text:'你,说的,不,对,!',is:true,count:4,'url':'audio/3.mp3'}, {id:'8',text:'不要,问,为什么,!',is:true,count:3,'url':'audio/4.mp3'}, {id:'9',text:'很,难,理解,你的话,。',is:true,count:4,'url':'audio/5.mp3'}, {id:'10',text:'你,不爱你,吗,?',is:true,count:3,'url':'audio/1.mp3'}, {id:'11',text:'妈妈,你,好吗,?',is:true,count:3,'url':'audio/2.mp3'}, {id:'12',text:'想,知道,啊,!',is:true,count:3,'url':'audio/3.mp3'}, {id:'13',text:'你,说的,。',is:true,count:2,'url':'audio/4.mp3'}, {id:'14',text:'真的,也许,对吧,!',is:true,count:3,'url':'audio/5.mp3'}, {id:'15',text:'完全,听,不懂,啊,!',is:true,count:4,'url':'audio/1.mp3'}, {id:'16',text:'要,努力,读书。',is:true,count:3,'url':'audio/2.mp3'}, {id:'17',text:'他,说的,不,对,!',is:true,count:4,'url':'audio/3.mp3'}, {id:'18',text:'请,问,快了吗,!',is:true,count:4,'url':'audio/4.mp3'}, {id:'19',text:'哈哈,难,理解,你的话,。',is:true,count:4,'url':'audio/5.mp3'}  ]; data_all[1]=[ {id:'0',text:'你说出,你的,问题,去,改进,。',is:true,count:5,'url':'audio/1.mp3'}, {id:'1',text:'我,怎么,知道,你,好不好,?',is:true,count:5,'url':'audio/2.mp3'}, {id:'2',text:'不要,问,为什么,好吗,?',is:true,count:4,'url':'audio/3.mp3'}, {id:'3',text:'就,你,说的,是,对的,。',is:true,count:5,'url':'audio/4.mp3'}, {id:'4',text:'大家,明天,一起,出去,郊游,。',is:true,count:5,'url':'audio/5.mp3'}, {id:'5',text:'你,一定,要帅,,,一定,要低调,。',is:true,count:5,'url':'audio/1.mp3'}, {id:'6',text:'你,去了,你二大爷,家,了吗,?',is:true,count:5,'url':'audio/2.mp3'}, {id:'7',text:'天南,海北,,,众人,皆是,。',is:true,count:4,'url':'audio/3.mp3'}, {id:'8',text:'天与海,的,距离,就是,不爱你,。',is:true,count:5,'url':'audio/4.mp3'}, {id:'9',text:'不知道,无罪,,,坚强,些,。',is:true,count:4,'url':'audio/5.mp3'}, {id:'10',text:'大中华,儿女,,,华夏,子孙,。',is:true,count:4,'url':'audio/1.mp3'}, {id:'11',text:'儿时,的,时光,是,美好的,。',is:true,count:5,'url':'audio/2.mp3'}, {id:'12',text:'哪里,那么,多,秘密,。',is:true,count:4,'url':'audio/3.mp3'}, {id:'13',text:'有,你,就是,晴天,,,对吧,!',is:true,count:5,'url':'audio/4.mp3'}, {id:'14',text:'说的,和,真的,似的,,,太假了,!',is:true,count:5,'url':'audio/5.mp3'}, {id:'15',text:'呵呵,,,净,瞎扯淡,!',is:true,count:3,'url':'audio/1.mp3'}, {id:'16',text:'行了,,,就,你,知道,?',is:true,count:4,'url':'audio/2.mp3'}, {id:'17',text:'好好,学习,,,才能,越来越好,。',is:true,count:4,'url':'audio/3.mp3'}, {id:'18',text:'真的,无所依,,,孤独的,我,。',is:true,count:4,'url':'audio/4.mp3'}, {id:'19',text:'你知道,的话,就,说,出来嘛,!',is:true,count:5,'url':'audio/5.mp3'}  ]; data_all[2]=[ {id:'0',text:'我,爱你,吗,?',is:true,count:3,'url':'audio/1.mp3'}, {id:'1',text:'亲爱的,你,好吗,?',is:true,count:3,'url':'audio/2.mp3'}, {id:'2',text:'不知道,啊,!',is:true,count:2,'url':'audio/3.mp3'}, {id:'3',text:'谢谢,你,说的,。',is:true,count:3,'url':'audio/4.mp3'}, {id:'4',text:'也许,对吧,!',is:true,count:2,'url':'audio/5.mp3'}, {id:'5',text:'听,不懂,啊,!',is:true,count:3,'url':'audio/1.mp3'}, {id:'6',text:'天天,向上,,,好好,学习,。',is:true,count:4,'url':'audio/2.mp3'}, {id:'7',text:'你,说的,不,对,!',is:true,count:4,'url':'audio/3.mp3'}, {id:'8',text:'不要,问,为什么,!',is:true,count:3,'url':'audio/4.mp3'}, {id:'9',text:'很,难,理解,你的话,。',is:true,count:4,'url':'audio/5.mp3'}, {id:'10',text:'你,不爱你,吗,?',is:true,count:3,'url':'audio/1.mp3'}, {id:'11',text:'妈妈,你,好吗,?',is:true,count:3,'url':'audio/2.mp3'}, {id:'12',text:'想,知道,啊,!',is:true,count:3,'url':'audio/3.mp3'}, {id:'13',text:'你,说的,。',is:true,count:2,'url':'audio/4.mp3'}, {id:'14',text:'真的,也许,对吧,!',is:true,count:3,'url':'audio/5.mp3'}, {id:'15',text:'完全,听,不懂,啊,!',is:true,count:4,'url':'audio/1.mp3'}, {id:'16',text:'要,努力,读书。',is:true,count:3,'url':'audio/2.mp3'}, {id:'17',text:'他,说的,不,对,!',is:true,count:4,'url':'audio/3.mp3'}, {id:'18',text:'请,问,快了吗,!',is:true,count:4,'url':'audio/4.mp3'}, {id:'19',text:'哈哈,难,理解,你的话,。',is:true,count:4,'url':'audio/5.mp3'}  ]; data_all[3]=[ {id:'0',text:'你说出,你的,问题,去,改进,。',is:true,count:5,'url':'audio/1.mp3'}, {id:'1',text:'我,怎么,知道,你,好不好,?',is:true,count:5,'url':'audio/2.mp3'}, {id:'2',text:'不要,问,为什么,好吗,?',is:true,count:4,'url':'audio/3.mp3'}, {id:'3',text:'就,你,说的,是,对的,。',is:true,count:5,'url':'audio/4.mp3'}, {id:'4',text:'大家,明天,一起,出去,郊游,。',is:true,count:5,'url':'audio/5.mp3'}, {id:'5',text:'你,一定,要帅,,,一定,要低调,。',is:true,count:5,'url':'audio/1.mp3'}, {id:'6',text:'你,去了,你二大爷,家,了吗,?',is:true,count:5,'url':'audio/2.mp3'}, {id:'7',text:'天南,海北,,,众人,皆是,。',is:true,count:4,'url':'audio/3.mp3'}, {id:'8',text:'天与海,的,距离,就是,不爱你,。',is:true,count:5,'url':'audio/4.mp3'}, {id:'9',text:'不知道,无罪,,,坚强,些,。',is:true,count:4,'url':'audio/5.mp3'}, {id:'10',text:'大中华,儿女,,,华夏,子孙,。',is:true,count:4,'url':'audio/1.mp3'}, {id:'11',text:'儿时,的,时光,是,美好的,。',is:true,count:5,'url':'audio/2.mp3'}, {id:'12',text:'哪里,那么,多,秘密,。',is:true,count:4,'url':'audio/3.mp3'}, {id:'13',text:'有,你,就是,晴天,,,对吧,!',is:true,count:5,'url':'audio/4.mp3'}, {id:'14',text:'说的,和,真的,似的,,,太假了,!',is:true,count:5,'url':'audio/5.mp3'}, {id:'15',text:'呵呵,,,净,瞎扯淡,!',is:true,count:3,'url':'audio/1.mp3'}, {id:'16',text:'行了,,,就,你,知道,?',is:true,count:4,'url':'audio/2.mp3'}, {id:'17',text:'好好,学习,,,才能,越来越好,。',is:true,count:4,'url':'audio/3.mp3'}, {id:'18',text:'真的,无所依,,,孤独的,我,。',is:true,count:4,'url':'audio/4.mp3'}, {id:'19',text:'你知道,的话,就,说,出来嘛,!',is:true,count:5,'url':'audio/5.mp3'}  ];  var guan_arr=[ {n:'第一关',c:'正常语序'}, {n:'第二关',c:'熟练熟悉'}, {n:'第三关',c:'注意:词语打乱了'}, {n:'第四关',c:'全神贯注'}, {n:'第五关',c:'困难语序'} ]; //base var current_guan=1;//当前所在关卡 var current_index=0;//答对记录数 var dong=null;//全局动画 var alltime=300;//答题时间 var iskey=true;//是否按键可用 var count=0;//词语记录数 var subindex=null;//子记录键 var starttime=0;//开始时作答时间 //event $(".game-fp-start").click(function(){ $(".game-fp-name").hide(); $(".game-fp-sm").hide(); $(".game-fp-start").hide(); init(); }); $(".game-fp-tools-see").children("dt").click(function(){ funopen(); setTimeout(function(){ funclose(); },2000);  }); $("#game-fp-input").children("input").keyup(function(){  if(iskey){ var stext=$(this).val(); matchval(stext); next($("#game-fp-words").children("div").length); }else{};   }); $(".game-fp-tools-pause").click(function(){ if($("#game-fp-input").children("input").prop('disabled')==false){ clearInterval(dong); $("#game-fp-input").children("input").attr('disabled','disabled');  $("#game-fp-pause").show(); }else{}  }); $("#game-fp-sta").click(function(){  $("#game-fp-input").children("input").removeAttr('disabled');  $("#game-fp-pause").hide(); $("#game-fp-input").children("input").focus(); inctime(); });  $("#game-fp-reset-btn").click(function(){  current_guan=1; current_index=0; alltime=300; iskey=true; subindex=null;  count=0; for(var i=0;i<data_all.length;i++){ for(var j=0;j<data_all[i].length;j++){ data_all[i][j]['is']=true; };  };  $("#game-fp-reset").hide(); init(); });  $(".game-fp-tools-skip").children("dt").click(function(){  if($("#game-fp-input").children("input").prop('disabled')==false){ if($(this).children("span").html()-1 && $(this).attr("is")=="0"){ delay=parseInt(delay)+parseInt(80); $(this).attr("is","1"); addfen(10); setTimeout(function(){  that.removeClass("close").addClass("open");  that.children("em").addClass("feiqi"); },delay); real=real.replace($(this).children("span").text(),"");  }else{ };      }); $("#game-fp-input").children("input").val(real); }; function addfen(num){ $("#game-fp-fen").find("input").val(parseInt($("#game-fp-fen").find("input").val())+parseInt(num)); }; function next(zlen){ if($("#game-fp-words").children("div[is='1']").length==zlen && $("#game-fp-input").children("input").val().length==0){ iskey=false; success(); }else{};  }; function success(){ showok(); var alltime=null;  if(otestAudio.duration){  alltime=otestAudio.duration;  skipsuccess(alltime);  }else{ otestAudio.onloadedmetadata=function(){  alltime=otestAudio.duration;  skipsuccess(alltime);  }; };  }; function showok(){ $("#game-fp-words").children().remove(); var rindex=current_guan-1; var zz=chatime(); $("#game-fp-result").show(); $("#game-fp-result").append('20'); $("#game-fp-result").append(''+zz+'')  addfen($("#game-fp-result").children(".zonghefen").html()); addfen($("#game-fp-result").children(".mintimefen").html());  var showval=data_all[rindex][subindex].text.split(",").join(""); count=parseInt(count)+parseInt(data_all[rindex][subindex].count); $("#game-fp-result").children("p").html(showval); otestAudio.src=data_all[rindex][subindex].url; }; function chatime(){ var chaval=(new Date().getTime()-starttime)/1000;  if(chaval5 && chaval10){ return 10; }else{ return 0; };  }; function skipsuccess(alltime){ otestAudio.play(); current_index=parseInt(current_index)+parseInt(1); if(current_index%10==0){ current_guan=parseInt(current_guan)+parseInt(1); setTimeout(function(){ $("#game-fp-result").children(".zonghefen").remove(); $("#game-fp-result").children(".mintimefen").remove();  $("#game-fp-result").hide();  funguan();  },parseInt(alltime*1000));   setTimeout(function(){  fundata(); },parseInt(alltime*1000)+parseInt(1000));  }else{ setTimeout(function(){ $("#game-fp-result").children(".zonghefen").remove(); $("#game-fp-result").children(".mintimefen").remove();  $("#game-fp-result").hide(); fundata(); },parseInt(alltime*1000)); }; $("#game-fp-input").children("input").val("");  }; //function  function init(){ $("#game-fp-box").show(); $("#game-fp-input").children("input").val(""); $("#game-fp-fen").find("input").val("0"); $("#game-fp-input").children("input").attr('disabled','disabled');  $("#game-fp-time").children("span").html(alltime); funguan();  setTimeout(function(){ fundata(); },1000); inctime(); }; function funguan(){ $("#game-fp-guanka").children("strong").html(guan_arr[current_guan-1].n); $("#game-fp-guanka").children("span").html(guan_arr[current_guan-1].c); $("#game-fp-guanka").show(); setTimeout(function(){ $("#game-fp-guanka").hide();  },1000) }; function fundata(){  $("#game-fp-input").children("input").attr('disabled','disabled');  setTimeout(function(){ appenddata(); iskey=true; },0); setTimeout(function(){ funclose(); $("#game-fp-input").children("input").focus(); },2000); }; function appenddata(){  if(current_guan<=2){ var arrtext=returnraditem().text.split(","); //console.log(current_guan+"-----"+returnraditem().id); for(var i=0;i'+ arrtext[i] +'10
'); $("#game-fp-words").append(tmp); }; }else if(current_guan>2 && current_guan<=4){ var arrtext=returnraditem().text.split(","); //乱序处理 var lasttext=[]; var eearr=luanxu(arrtext.length); for(var j=0;j<eearr.length;j++){ lasttext.push(arrtext[eearr[j]]); }; for(var i=0;i<lasttext.length;i++){ var tmp=$('
'+ lasttext[i] +'10
'); $("#game-fp-words").append(tmp); }; }; }; function luanxu(maxlen){ var rarr=[]; for(var i=0;i<maxlen;i++){ rarr.push(i); }; var eearr=[]; for(var j=0;j<maxlen;j++){ var ing=Math.floor(Math.random()*rarr.length); eearr.push(rarr[ing]); rarr.splice(ing,1); }; return eearr; }; function returnraditem(){ var rindex=current_guan-1; var temparr=[]; for(var i=0;i<data_all[rindex].length;i++){ if(data_all[rindex][i]['is']==true){ temparr.push(data_all[rindex][i]); }else{}; }; var realrad=Math.floor(Math.random()*temparr.length); for(var i=0;i<data_all[rindex].length;i++){ if(data_all[rindex][i]['id']==temparr[realrad]['id']){ data_all[rindex][i]['is']=false; subindex=i; }else{}; }; return temparr[realrad]; }; function funclose(){ $("#game-fp-input").children("input").removeAttr('disabled'); $("#game-fp-input").children("input").focus(); starttime=new Date().getTime(); $("#game-fp-words").children("div").each(function(index, element) { if($(this).attr("is")=="0"){ $(this).removeClass("open").addClass("close"); }else{}; }); }; function funopen(){ $("#game-fp-input").children("input").attr('disabled','disabled'); $("#game-fp-words").children("div").each(function(index, element) { if($(this).attr("is")=="0"){ $(this).removeClass("close").addClass("open"); }else{}; }); }; function inctime(){ dong=setInterval(function(){ alltime-=1; if(alltime<0){ clearInterval(dong); $("#game-fp-words").children().remove(); $("#game-fp-box").hide(); $("#game-fp-input").children("input").attr('disabled','disabled'); $(".game-fp-reset-con-a").html($("#game-fp-fen").find("input").val()); $(".game-fp-reset-con-b").html(current_index); $(".game-fp-reset-con-c").html(count); $("#game-fp-reset").show(); }else{ $("#game-fp-time").children("span").html(alltime); }; },1000); }; //end});
句子翻牌

1.将牌面上的词语输入到方块中。

2.按照正确语序输入句子能获得额外奖励。

3.每组词语显示2-4秒。

查看词语:点击“查看词语”,或按“PageUp”键

4.一共有10次机会。

跳过词语:点击“跳过10”,或按“PageDown”键

5.别忘了输入标点符号!

开始游戏
得分
剩余时间 300
暂停 End 再看一次 PageUp 跳过10 PageDown 游戏说明 Home
第一关 正常词序
继续
正确语序
<!--20 0-->

游戏结束

你的得分:0

完成句子:0

完成词语:0

再玩一次
代码下载:http://xiazai.jb51.net/201603/yuanma/juzifanpai(jb51.net).rar

如果大家觉得玩的还不过瘾还可以翻看此专题:javascript经典小游戏


基于javascript实现句子翻牌网页版小游戏【javascript】
  • 基于javascript实现泡泡大冒险网页版小游戏【javascript】
  • 基于javascript实现泡泡大冒险网页版小游戏【javascript】 | 基于javascript实现泡泡大冒险网页版小游戏【javascript】 ...

    © 牛的日记 | www.liuzhongwei.com
    网站部分内容来源于网友供稿,若有侵权请联系删除,970928#QQ.com