开发者社区> 李一花> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

点亮LED的个人空间 JavaScript 正文 JavaScript成语消消乐

简介: 基本面向过程的思想。没有面向对象的部分。准备好成语库。db.js选出每一关的成语。对成语进行乱序。初始化表格的同时,将单个字放到每个单元格的按钮上展示。对tbody进行点击事件的监听。事件函数中获取btn。
+关注继续查看

一 预览

二 开发步骤

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

  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>关 
    得分<font id="gain_scores_txt" color="green">0</font>分 
	思考<font id="think_time" color="red">0</font>s 
	总耗时<font id="total_times" color="blue">0</font>s 
   </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日
原文作者:点亮LED 

本文来源:开源中国 如需转载请联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python全栈 Web(JavaScript DOM树、DOM对象、BOM对象)
外部对象: BOM和DOM BOM: Browser Object Module 浏览器对象模型 将浏览器比喻成一个对象-window (网页初始化自动创建) 可以通过window对象操作浏览器 DOM: Document Object .
2088 0
+关注
126
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载