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