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

一预览

二开发步骤

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

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

三代码

只有两个文件：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

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

点亮LED的个人空间 JavaScript 正文 JavaScript成语消消乐相关推荐

linux字符驱动之点亮LED
上一节中,我们讲解了如何自动创建设备节点,这一节我们在上一节的基础上,实现点亮LED. 上一节文章链接:https://blog.csdn.net/qq_37659294/article/detail ...
【STM32】STM32CubeMX教程二--基本使用(新建工程点亮LED灯)
前言在配置好CubeMX之后,就是新建工程的开始了,那么首先我们需要一些准备,本片博客我们会很详细的介绍STM32CubeMx的基本使用和如何创建一个新的工程并且点亮LED灯面向初学者如果 ...
IMX6ULL裸机开发之点亮LED灯
裸机点亮LED灯该实验使用正点原子的linux开发板和下载工具知识储备 GPIO时钟控制器在<IMX6ULL用户手册>中,时钟控制器模块介绍在第18章首先看CCM Clock Ga ...
STM32F03寄存器方式点亮LED流水灯
STM32F03寄存器方式点亮LED流水灯文章目录 STM32F03寄存器方式点亮LED流水灯一.题目内容二.STM32F03系列芯片的地址映射和寄存器映射映射原理:了解GPIO端口的初始化设置 ...
stm32的点亮led的基础知识
led所需要的知识 stm32的GPIO的工作方式(浮空输入,上拉输入,下拉输入,模拟输入,开漏输出,开漏复用输出,推挽输出,推挽复用输出)以及点亮led的软件和硬件配置. 文章目录 led所需要的知 ...
使用驱动程序点亮LED灯
继第一节第一个驱动程序框架记录之后,本篇文章将会在上一篇驱动程序的框架下编写点亮LED的驱动程序,同样会对上一个框架进行修改,优化.接下来进入正题 1.点亮LED程序框架分析在最开始之前先来梳理一下 ...
一、点亮LED和流水灯设计
点亮LED和流水灯设计参考书籍:51单片机C语言教程视频链接:参考视频单片机型号:巫妖王51单片机V2版单片机概述什么是单片机? Micro Controller Unit简称MCU,即单片 ...
[Android]Android 下实现点亮 Led
Android 下的实现点亮 led 1 准备驱动 1.1 修改设备树在设备树中添加节点,在 / 节点下添加 led_test 节点,在 &iomuxc 节点下添加 led_test 的 p ...
Linux系统点亮LED
目录应用层操控硬件的两种方式 sysfs 文件系统 sysfs 与/sys 总结标准接口与非标准接口 LED 硬件控制方式编写LED 应用程序在开发板上测试对于一款学习型开发板来说,永远都绕 ...

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

点亮LED的个人空间 JavaScript 正文 JavaScript成语消消乐相关推荐

最新文章

热门文章