html制作翻牌游戏,基于javascript实现句子翻牌网页版小游戏

本文实例为大家分享了js实现句子翻牌网页版小游戏，供大家参考，具体内容如下

效果图：

实现思路：

考察打字能力和记忆能力的益智小游戏。

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]=[