JavaScript成语消消乐


声明:本文转载自https://my.oschina.net/lightled/blog/1817190,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

一 预览

二 开发步骤

基本面向过程的思想。没有面向对象的部分。

  1. 准备好成语库。db.js
  2. 选出每一关的成语。
  3. 对成语进行乱序。
  4. 初始化表格的同时,将单个字放到每个单元格的按钮上展示。
  5. 对tbody进行点击事件的监听。事件函数中获取btn。用变量记录选中的文字。
  6. 判断得分、判断下一关、判断游戏结束(成语库毕竟用数组来保存。成语数量有限。)

三 代码

只有两个文件:index.html和db.js

1 index.html代码如下:

<!DOCTYPE HTML> <HTML> <head> 	 <meta charset="UTF-8" /> 	 <style> 	    table{ 			margin:0 auto; 			width:200px; 			border:1px solid black; 		} 		table button{ 			width:100%; 			height:40px; 		} 		table td{ 			width:25%; 		} 		table td .selectbtn{ 		   background:blue; 		   color:white; 		} 	 </style> 	<script type="text/javascript" src="db.js"></script> </head> <body >    <div align="center">成语消消乐</div>    <div align="center"> 	当前第<font color="green" id="current_level_text">1</font>关&nbsp;     得分<font id="gain_scores_txt" color="green">0</font>分&nbsp; 	思考<font id="think_time" color="red">0</font>s&nbsp; 	总耗时<font id="total_times" color="blue">0</font>s&nbsp;    </div>    <table  border='0' cellpadding='0' cellspacing='0'> 	 <tbody id="mytbody"> 	 </tbody>    </table> <script> 	window.onload=function(){ 		var XXL={ 			dom:{ 				level:document.getElementById("current_level_text"), 				scores:document.getElementById("gain_scores_txt"), 				think_time:document.getElementById("think_time"), 				total_times:document.getElementById("total_times"), 				tbody:document.getElementById("mytbody") 			}, 			dbs:listWords,//从外部js中加载。 			chooseData:[],//记录从数据库从取出的成语。 			recordChooseText:"",//记录用户选择的文字。 			recordChooseBtn:[],//记录用户选择的按钮的jq对象。 			current_index:0,//当前关数。 不可调。 			every_words:6,//每一关的成语个数。可调。 			every_right_num:0,//当前关答对的成语个数。 不可调。 			current_words:0,//当前关的成语个数。 ,不可调。 			last_time:Date.now(),//最后一次答题时间。 			gain_scores:0,//得分。不可调。 			every_scores:5,//每题得分。可调。 			//从成语库中选取成语。 			initWords:function(){ 					var dbtxt = ""; 					var start =  this.current_index * this.every_words; 					var end = start + this.every_words  <= this.dbs.length ? start + this.every_words : this.dbs.length;  					//此段是后来完善的。 					this.current_words = end - start; 					if( this.current_words <=0 ){ 					   end = 0; 					   this.current_words = 0; 					} 					// 					for(var i=start;i<end;i++){ 						dbtxt +=this.dbs[i]; 						this.chooseData.push(this.dbs[i]); 					} 					return dbtxt;//返回乱序前的拼接字符串。 					 			}, 			luanxu:function(dbtxt){ 					var luanxu=[]; 					while(dbtxt.length>0){ 						var index = parseInt(Math.random()*dbtxt.length); 						luanxu.push(dbtxt.charAt(index)); 						dbtxt = dbtxt.substring(0,index)+dbtxt.substring(index+1,dbtxt.length); 					}	 				return luanxu;//返回乱序后的字符。 			}, 			createTable:function(words){ 				var len = 0; 				var tbody = document.getElementById("mytbody"); 				tbody.innerHTML="";//清空tbody。 				var tbodyhtml = ""; 				for(var i=0;i<XXL.current_words; i++){ 					var tr = "<tr>"; 					for(var j=0;j<4;j++){ 						var td = "<td>" ; 								td+=("<button type='button'>"+words[len++]+"</button>"); 						    td+="</td>"; 						tr+=td;  					} 					tr+="</tr>"; 					tbodyhtml+=tr; 				} 				tbody.innerHTML = tbodyhtml; 			}, 			removeBtn:function(){ 				for(var i=0;i<XXL.recordChooseBtn.length;i++){ 					XXL.recordChooseBtn[i].remove(); 				} 			}, 			//下一关。 			nextLevel:function(){ 			   //答对成语个数和当前关的成语个数相等。则下一关。 			   if(this.every_right_num == this.current_words){ 				  //下一关。 				   this.current_index ++; 			       alert("恭喜您进入第"+ (this.current_index+1) +"关"); 				  //清空当前答对成语个数。 				   this.every_right_num = 0; 				   //1重新初始化表格。 				   this.init(); 				   				    this.dom.level.innerText = this.current_index+1; 				   //判断终极结束。 				   if(this.current_words <= 0){ 					  alert("您已经是这个宇宙最厉害的人了。"); 					  //重新加载网页。 					  window.location.reload(); 				   }  			   } 			}, 			//检测得分。 			check:function(){ 				//如果点击的按钮个数少于4。直接退出函数。 				if(this.recordChooseBtn.length <4)return; 				//判断选择的成语,是否能够组成一个四字成语。 				var find = false;//是否匹配标志位。 				for(var i=0;i<this.chooseData.length;i++){ 					if(this.recordChooseText == this.chooseData[i]){ 						find = true; 						break; 					} 				} 				//如果能匹配上。 				if(find){ 					//答对成语个数 ++。 					this.every_right_num ++; 				   //界面中消去成语。 				   this.removeBtn(); 				   //判断是否需要跳转下一关。 				   this.nextLevel(); 				   //更新答题时间。 				   this.last_time = Date.now(); 				   //更新得分。 				   this.gain_scores += this.every_scores; 				   // 				   this.dom.scores.innerText = this.gain_scores; 				}  				//还原按钮样式。 				document.querySelectorAll(".selectbtn").forEach(function(btn){ 					btn.className=""; 				}); 				 //清空按钮数组。 				 this.recordChooseBtn=[]; 				 //清空选中的成语字符串 				 this.recordChooseText = ""; 			}, 			init:function(){ 				//1 从成语库中选出当前关的成语。 				var worstxt = this.initWords(); 				//2 准备乱序成语。 				var dbs = this.luanxu( worstxt ); 				//3 准备好界面。 				this.createTable(dbs); 			}, 			bindEvent:function(){ 				var _this = this; 				//对tbody进行点击事件的绑定。利用事件的冒泡。 				//当点击子元素时,tbody事件函数能够进行响应。 				this.dom.tbody.onclick = function(e){ 				var btn = e.target;//dom对象。 				   if( btn.type =="button"){ 				       _this.recordChooseText += btn.innerText; 					   _this.recordChooseBtn.push( btn ); 					   //添加一个class属性,控制选中样式。 					   btn.className="selectbtn"; 					   //检测得分。 					   _this.check(); 				   } 			   } 			}, 			executeTask:function(){ 				//定时1s执行一次。 				setInterval(function(){ 					//思考时间 					XXL.dom.think_time.innerText = parseInt((Date.now()-XXL.last_time)/1000); 					  					//总时间 					XXL.dom.total_times.innerText = parseInt( XXL.dom.total_times.innerText )+1; 				},1000); 			} 		}; 		XXL.init(); 		XXL.bindEvent(); 		XXL.executeTask(); 	}; </script> </body> </HTML>

 

2 db.js文件如下:

var listWords=["金蝉脱壳","百里挑一","金玉满堂","背水一战","霸王别姬","天上人间","不吐不快","海阔天空","情非得已","满腹经纶","兵临城下","春暖花开","插翅难逃","黄道吉日","天下无双","偷天换日","两小无猜","卧虎藏龙","珠光宝气","簪缨世族","花花公子","绘声绘影","国色天香","相亲相爱","八仙过海","金玉良缘","掌上明珠","皆大欢喜","逍遥法外","生财有道","极乐世界","情不自禁","愚公移山","魑魅魍魉","龙生九子","精卫填海","海市蜃楼","高山流水","卧薪尝胆","壮志凌云","金枝玉叶","四海一家","穿针引线","无忧无虑","无地自容","三位一体","落叶归根","相见恨晚","惊天动地","滔滔不绝","相濡以沫","长生不死","原来如此","女娲补天","三皇五帝","万箭穿心","水木清华","窈窕淑女","破釜沉舟","天涯海角","牛郎织女","倾国倾城","飘飘欲仙","福星高照","妄自菲薄","永无止境","学富五车","饮食男女","英雄豪杰","国士无双","塞翁失马","万家灯火","石破天惊","精忠报国","养生之道","覆雨翻云","六道轮回","鹰击长空","日日夜夜","厚德载物","亡羊补牢","万里长城","黄金时代","出生入死","一路顺风","随遇而安","千军万马","郑人买履","棋逢对手","叶公好龙","后会无期","守株待兔","凤凰于飞","一生一世","花好月圆","世外桃源","韬光养晦","画蛇添足","青梅竹马","风花雪月","滥竽充数","总而言之","没完没了","欣欣向荣","时光荏苒","差强人意","好好先生","无懈可击","随波逐流","袖手旁观","群雄逐鹿","血战到底","唯我独尊","买椟还珠","龙马精神","一见钟情","喜闻乐见","负荆请罪","三人成虎","河东狮吼","程门立雪","金戈铁马","笑逐颜开","千钧一发","纸上谈兵","风和日丽","邯郸学步","大器晚成","庖丁解牛","甜言蜜语","雷霆万钧","浮生若梦","大开眼界","汗牛充栋","百鸟朝凤","以德服人","白驹过隙","难兄难弟","鬼哭神嚎","声色犬马","指鹿为马","龙争虎斗","雾里看花","男大当婚","未雨绸缪","南辕北辙","三从四德","一丝不挂","高屋建瓴","阳春白雪","杯弓蛇影","闻鸡起舞","四面楚歌","登堂入室","张灯结彩","而立之年","饮鸩止渴","杏雨梨云","龙凤呈祥","勇往直前","左道旁门","莫衷一是","马踏飞燕","掩耳盗铃","大江东去","凿壁偷光","色厉内荏","花容月貌","越俎代庖","鳞次栉比","美轮美奂","缘木求鱼","再接再厉","马到成功","红颜知己","赤子之心","迫在眉睫","风流韵事","相形见绌","诸子百家","鬼迷心窍","星火燎原","画地为牢","岁寒三友","花花世界","纸醉金迷","狐假虎威","纵横捭阖","沧海桑田","不求甚解","暴殄天物","吃喝玩乐","乐不思蜀","身不由己","小家碧玉","文不加点","天马行空","人来人往","千方百计","天高地厚","万人空巷","争分夺秒","如火如荼","大智若愚","斗转星移","七情六欲","大禹治水","空穴来风","孟母三迁","绘声绘色","九五之尊","随心所欲","干将莫邪","相得益彰","借刀杀人","浪迹天涯","刚愎自用","镜花水月","黔驴技穷","肝胆相照","多多益善","叱咤风云","杞人忧天","作茧自缚","一飞冲天","殊途同归","风卷残云","因果报应","无可厚非","赶尽杀绝","天长地久","飞龙在天","桃之夭夭","南柯一梦","口是心非","江山如画","风华正茂","一帆风顺","一叶知秋","草船借箭","铁石心肠","望其项背","头晕目眩","大浪淘沙","纵横天下","有问必答","无为而治","釜底抽薪","吹毛求疵","好事多磨","空谷幽兰","悬梁刺股","白手起家","完璧归赵","忍俊不禁","沐猴而冠","白云苍狗","贼眉鼠眼","围魏救赵","烟雨蒙蒙","炙手可热","尸位素餐","出水芙蓉","礼仪之邦","一丘之貉","鹏程万里","叹为观止","韦编三绝","今生今世","草木皆兵","宁缺毋滥","回光返照","露水夫妻","讳莫如深","贻笑大方","紫气东来","万马奔腾","一诺千金","老马识途","五花大绑","捉襟见肘","瓜田李下","水漫金山","苦心孤诣","可见一斑","五湖四海","虚怀若谷","欲擒故纵","风声鹤唳","毛遂自荐","蛛丝马迹","中庸之道","迷途知返","自由自在","龙飞凤舞","树大根深","雨过天晴","乘风破浪","筚路蓝缕","朝三暮四","患得患失","君子好逑","鞭长莫及","竭泽而渔","飞黄腾达","囊萤映雪","飞蛾扑火","自怨自艾","风驰电掣","白马非马","退避三舍","三山五岳","称心如意","望梅止渴","茕茕孑立","振聋发聩","运筹帷幄","逃之夭夭","杯水车薪","有的放矢","矫枉过正","睚眦必报","姗姗来迟","一鸣惊人","孜孜不倦","一马平川","入木三分","沆瀣一气","天伦之乐","兄弟阋墙","藕断丝连","心猿意马","想入非非","盲人摸象","眉飞色舞","三教九流","高楼大厦","锲而不舍","过犹不及","狗尾续貂","斗酒学士","高山仰止","形影不离","小心翼翼","返璞归真","见贤思齐","按图索骥","枪林弹雨","桀骜不驯","遇人不淑","道貌岸然","名扬四海","虚与委蛇","门可罗雀","水落石出","不卑不亢","无法无天","拔苗助长","大快朵颐","因地制宜","单刀直入","时来运转","天方夜谭","一蹴而就","踌躇满志","战无不胜","插翅难飞","图穷匕见","鬼话连篇","亢龙有悔","望洋兴叹","爱屋及乌","惊鸿一瞥","风华绝代","名胜古迹","如履薄冰","持之以恒","潜移默化","昙花一现","巫山云雨","狡兔三窟","栉风沐雨","骇人听闻","断章取义","曲突徙薪","谢天谢地","脱颖而出","垂帘听政","一马当先","不耻下问","不以为然","春华秋实","欲盖弥彰","人琴俱亡","投鼠忌器","歧路亡羊","金风玉露","落花流水","春风化雨","心如刀割","锱铢必较","一叶障目","来历不明","名副其实","中流砥柱","绕梁三日","安步当车","放荡不羁","天衣无缝","自相矛盾","神机妙算","沧海一粟","冲锋陷阵","龙虎风云","言简意赅","九死一生","铁树开花","画龙点睛","风雨无阻","不耻下问","不以为然","春华秋实","欲盖弥彰","人琴俱亡","投鼠忌器","歧路亡羊","金风玉露","落花流水","春风化雨","心如刀割","锱铢必较","一叶障目","来历不明","名副其实","中流砥柱","绕梁三日","安步当车","放荡不羁","天衣无缝","自相矛盾","神机妙算","沧海一粟","冲锋陷阵","龙虎风云","言简意赅","九死一生","铁树开花","画龙点睛","风雨无阻","坐井观天","奇货可居","浮光掠影","牝鸡司晨","沽名钓誉","天作之合","甚嚣尘上","铩羽而归","劫后余生","泾渭分明","节哀顺变","有恃无恐","不绝如缕","马革裹尸","监守自盗","耳濡目染","金屋藏娇","不约而同","逐鹿中原","龙潭虎穴","江郎才尽","明日黄花","栩栩如生","人山人海","面面相觑","唇亡齿寒","知法犯法","相敬如宾","曾几何时","欢聚一堂","纷至沓来","李代桃僵","毛骨悚然","衣冠禽兽","有凤来仪","见微知著","旗鼓相当","无与伦比","摸金校尉","牛头马面","凤毛麟角","难得糊涂","衣香鬓影","马到功成","鸠占鹊巢","狭路相逢","春秋笔法","厉兵秣马","约法三章","豁然开朗","平步青云","步步为营","蝇营狗苟","心如止水","从善如流","殚精竭虑","十字路口","矢志不渝","九九归一","井底之蛙","居安思危","不一而足","周而复始","望穿秋水","秦晋之好","不落窠臼","司空见惯","怙恶不悛","百年好合","出神入化","身体力行","敬谢不敏","嗤之以鼻","天之骄子","贤妻良母","能说会道","进退维谷","甘之如饴","人心不古","颐指气使","墨守成规","左右逢源","回心转意","插科打诨","别来无恙","翩翩公子","穷兵黩武","舌战群儒","字字珠玑","义无反顾"]; 

 

本文发表于2018年05月23日 12:00
(c)注:本文转载自https://my.oschina.net/lightled/blog/1817190,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 2180 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1