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