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年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小夥伴，731771211