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