基于javascript实现句子翻牌网页版小嬉戏_

1、基于javascript实现句子翻牌网页版小嬉戏_ 这篇文章主要介绍了基于javascript实现句子翻牌网页版小嬉戏的相关资料,需要的伴侣可以参考下 本文实例为大家分享了js实现句子翻牌网页版小嬉戏，供大家参考，具体内容如下 效果图： 实现思路： 考察打字力量和记忆力量的益智小嬉戏。 1.会先把一段文字显示 2.一小段时间后显示背面 3.输入框输入文字与文字全部对应显示正面 具体代码： html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title句子翻牌/title link href=css/

2、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_all0= id:0,text:我,爱你,吗,？,is:true,count:3,url

3、: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:天天,向上,，,好好,学习,。

4、,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

5、.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:t

6、rue,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_all1= 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:t

7、rue,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:tru

8、e,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,

9、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

10、,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_all2= 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,

11、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:不要,问

12、,为什么,！,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

13、/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:哈哈,难,理解,

14、你的话,。,is:true,count:4,url:audio/5.mp3 ; data_all3= 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:大家,明天,

15、一起,出去,郊游,。,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:不知道,

16、无罪,，,顽强,些,。,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:说的,和,

17、真的,似的,，,太假了,！,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:你知道,

18、的话,就,说,出来嘛,！,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;/子

19、记录键 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(); ,2021); ); $(#game-fp-input).children(input).ke

20、yup(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)

21、; $(#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=t

22、rue; subindex=null; count=0; for(var i=0;idata_all.length;i+) for(var j=0;jdata_alli.length;j+) data_allijis=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()

23、=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-se

24、e).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

25、 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).c

26、hildren(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(divis=1).length=zlen $(#game-fp-input).children(input).val().length=0) iskey=false; success(); else; ; functi

27、on 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;

28、 var zz=chatime(); $(#game-fp-result).show(); $(#game-fp-result).append(strong class=zonghefen zonghefeiqi20/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

29、(); var showval=data_allrindexsubindex.text.split(,).join(); count=parseInt(count)+parseInt(data_allrindexsubindex.count); $(#game-fp-result).children(p).html(showval); otestAudio.src=data_allrindexsubindex.url; ; function chatime() var chaval=(new Date().getTime()-starttime)/1000; if(chaval=5) retu

30、rn 30; else if(chaval5 chaval=10) return 20; else if(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-re

31、sult).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();

32、 $(#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-in

33、put).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_arrcurrent_guan-1.n); $(#game-fp-guanka).children(span).html(guan_arrcurrent_

34、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

35、(); ,2021); ; function appenddata() if(current_guan=2) var arrtext=returnraditem().text.split(,); /console.log(current_guan+-+returnraditem().id); for(var i=0;iarrtext.length;i+) var tmp=$(div class=fanpai is=0span+ arrtexti +/spanem10/em/div); $(#game-fp-words).append(tmp); ; else if(current_guan2

36、current_guan=4) var arrtext=returnraditem().text.split(,); /乱序处理 var lasttext=; var eearr=luanxu(arrtext.length); for(var j=0;jeearr.length;j+) lasttext.push(arrtexteearrj); ; for(var i=0;ilasttext.length;i+) var tmp=$(div class=fanpai is=0span+ lasttexti +/spanem10/em/div); $(#game-fp-words).append

37、(tmp); ; ; ; function luanxu(maxlen) var rarr=; for(var i=0;imaxlen;i+) rarr.push(i); ; var eearr=; for(var j=0;jmaxlen;j+) var ing=Math.floor(Math.random()*rarr.length); eearr.push(rarring); rarr.splice(ing,1); ; return eearr; ; function returnraditem() var rindex=current_guan-1; var temparr=; for(

38、var i=0;idata_allrindex.length;i+) if(data_allrindexiis=true) temparr.push(data_allrindexi); else; ; var realrad=Math.floor(Math.random()*temparr.length); for(var i=0;idata_allrindex.length;i+) if(data_allrindexiid=temparrrealradid) data_allrindexiis=false; subindex=i; else; ; return temparrrealrad;

39、 ; 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; ); ; functio

40、n 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(alltime0) clearInterval(dong

41、); $(#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(spa