网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 基于javascript实现句子翻牌网页版小游戏
内容
    这篇文章主要介绍了基于javascript实现句子翻牌网页版小游戏的相关资料,需要的朋友可以参考下
    本文实例为大家分享了js实现句子翻牌网页版小游戏，供大家参考，具体内容如下
    效果图：
    名单
    实现思路：
    考察打字能力和记忆能力的益智小游戏。
    1.会先把一段文字显示
    2.一小段时间后显示背面
    3.输入框输入文字与文字全部对应显示正面
    具体代码：
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>句子翻牌</title>
    <link href="css/reset.css" rel="stylesheet" />
    <link href="css/fanpai.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript">
    $(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()<=0){
     }else{
     $(this).children("span").html($(this).children("span").html()-1);
     $("#game-fp-words").children().remove();
     fundata();
     }; 
     }else{} 
     }); 
     $(window).keyup(function(event){
     switch (event.which)
     {
     case 35://end
     $(".game-fp-tools-pause").trigger("click");
     break;
     case 36://hpme
     break;
     case 33://pageup
     $(".game-fp-tools-see").children("dt").trigger("click");
     break;
     case 34://pagedown
     $(".game-fp-tools-skip").children("dt").trigger("click");
     break;
     } 
     });
     //handel
     function matchval(stext){
     var real=stext;
     var delay=0;
     $("#game-fp-words").children("div").each(function(index, element) {
     var ishas=stext.search($(this).children("span").text());
     var that=$(this);
     if(ishas>-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('<strong>20</strong>');
     $("#game-fp-result").append('<strong>'+zz+'</strong>') 
     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(chaval<=5){
     return 30;
     }else if(chaval>5 &&　chaval<=10){
     return 20;
     }else if(chaval>10){
     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.length;i++){
     var tmp=$('<div is="0"><span>'+ arrtext[i] +'</span><em>10</em></div>');
     $("#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=$('<div is="0"><span>'+ lasttext[i] +'</span><em>10</em></div>');
     $("#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
    }); 
    </script>
    </head>
    <body>
     <div id="game-fp">
      <div>句子翻牌</div>
      <div>
       <p>1.将牌面上的词语输入到方块中。</p>
       <p>2.按照正确语序输入句子能获得额外奖励。</p>
       <p>3.每组词语显示2-4秒。</p>
       <p>查看词语：点击“查看词语”，或按“PageUp”键</p>
       <p>4.一共有10次机会。</p>
       <p>跳过词语：点击“跳过10”，或按“PageDown”键</p>
       <p>5.别忘了输入标点符号！</p>
      </div>
      <div>开始游戏</div>
      <div id="game-fp-box">
       <div id="game-fp-fen">
        得分<span><input type="text" value="0" readonly="readonly" /></span>
       </div>
       <div id="game-fp-input">
        <input type="text" />
       </div>
       <div id="game-fp-time">
        剩余时间 <span>300</span>
       </div>
       <div id="game-fp-tools">
        <dl>
         <dt>暂停</dt>
         <dd>End</dd>
        </dl>
        <dl>
         <dt>再看一次</dt>
         <dd>PageUp</dd>
        </dl>
        <dl>
         <dt>跳过<span>10</span></dt>
         <dd>PageDown</dd>
        </dl>
        <dl>
         <dt>游戏说明</dt>
         <dd>Home</dd>
        </dl>
       </div>
       <div id="game-fp-words">
       </div>
       <div id="game-fp-guanka">
        <strong>第一关</strong>
        <span>正常词序</span>
       </div>
       <div id="game-fp-pause">
        <span id="game-fp-sta">继续</span>
       </div>
       <div id="game-fp-result">
        <div><span>正确语序</span><em><audio src="" id="test-audio"></audio></em></div>
        <p></p>
        <!--<strong>20</strong>
        <strong>0</strong>-->
       </div>
      </div>
      <div id="game-fp-reset">
       <div>    
        <p>游戏结束</p>
        <p>你的得分：<span>0</span></p>
        <p>完成句子：<span>0</span></p>
        <p>完成词语：<span>0</span></p>
       </div>
       <span id="game-fp-reset-btn">再玩一次</span>
      </div> 
     </div>
    </body>
    </html>
    以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 11:34:08