本文實例為大家分享了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 class="zonghefen zonghefeiqi">20</strong>'); $("#game-fp-result").append('<strong class="mintimefen mintimefeiqi">'+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 class="fanpai" 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 class="fanpai" 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 class="game-fp-name">句子翻牌</div> <div class="game-fp-sm"> <p>1.將牌面上的詞語輸入到方塊中。</p> <p>2.按照正確語序輸入句子能獲得額外獎勵。</p> <p>3.每組詞語顯示2-4秒。</p> <p class="game-fp-sm-x">查看詞語：點擊“查看詞語”，或按“PageUp”鍵</p> <p>4.一共有10次機會。</p> <p class="game-fp-sm-x">跳過詞語：點擊“跳過10”，或按“PageDown”鍵</p> <p>5.別忘了輸入標點符號！</p> </div> <div class="game-fp-start">開始游戲</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 class="game-fp-tools-pause"> <dt>暫停</dt> <dd>End</dd> </dl> <dl class="game-fp-tools-see"> <dt>再看一次</dt> <dd>PageUp</dd> </dl> <dl class="game-fp-tools-skip"> <dt>跳過<span>10</span></dt> <dd>PageDown</dd> </dl> <dl class="game-fp-tools-ts"> <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 class="zonghefen">20</strong> <strong class="mintimefen">0</strong>--> </div> </div> <div id="game-fp-reset"> <div class="game-fp-reset-con"> <p>游戲結束</p> <p>你的得分：<span class="game-fp-reset-con-a">0</span></p> <p>完成句子：<span class="game-fp-reset-con-b">0</span></p> <p>完成詞語：<span class="game-fp-reset-con-c">0</span></p> </div> <span id="game-fp-reset-btn">再玩一次</span> </div> </div> </body></html>代碼下載：http://xiazai.VeVB.COm/201603/yuanma/juzifanpai(VeVB.COm).rar
如果大家覺得玩的還不過癮還可以翻看此專題：javascript經典小游戲
以上就是本文的全部內容，希望對大家學習javascript程序設計有所幫助。
新聞熱點
疑難解答
