上節(jié)課在網(wǎng)頁上使用JavaScript實(shí)現(xiàn)了根據(jù)輸入日期計(jì)算星座的程序讨衣。
這節(jié)課來做一個(gè)算24點(diǎn)游戲，主要是練習(xí)使用JavaScript來控制網(wǎng)頁元素没炒。
程序設(shè)計(jì)思路
在第1章的教程里面涛癌，學(xué)習(xí)過如何編寫算法來計(jì)算給出4個(gè)1到13之間的數(shù)字來求出所有的算出24點(diǎn)的算法。
這節(jié)課就不做算法了送火，來在網(wǎng)頁上實(shí)現(xiàn)這個(gè)游戲拳话。
游戲規(guī)則是這樣的：網(wǎng)頁加載后，現(xiàn)實(shí)4個(gè)隨機(jī)數(shù)种吸，范圍是從1到13之間弃衍，可以重復(fù)。同時(shí)顯示4個(gè)運(yùn)算法坚俗，加減乘除镜盯。
然后在下方顯示5種運(yùn)算次序岸裙，然后可以通過點(diǎn)擊數(shù)字或者運(yùn)算符，將數(shù)字或運(yùn)算符進(jìn)行移動(dòng)速缆，當(dāng)將一個(gè)運(yùn)算次序填滿之后哥桥，程序會(huì)進(jìn)行計(jì)算，假如結(jié)果等于24激涤，則提示回答正確并將分?jǐn)?shù)加1分，同時(shí)題目數(shù)加1判呕，進(jìn)入下一道題目倦踢。
大致的顯示界面是這樣的：
網(wǎng)頁元素的邊框?yàn)榧t色顏色時(shí)，表示該元素被選中了侠草。選中某個(gè)元素之后辱挥，點(diǎn)擊其它空白元素，可以將當(dāng)前選中的元素移動(dòng)過去边涕。
如果選中的元素時(shí)運(yùn)算符需要清除晤碘，則可以點(diǎn)擊運(yùn)算符元素右側(cè)的清除按鈕。
這是因?yàn)檫\(yùn)算符可以重續(xù)選用多個(gè)功蜓，因此采用此種處理方式园爷。
因此，網(wǎng)頁的JavaScript當(dāng)中式撼，要存儲(chǔ)一個(gè)當(dāng)前的元素的代表值童社。因此需要給每一個(gè)元素都指定一個(gè)編號(hào)，可以如下圖一般：
編寫頁面顯示效果
創(chuàng)建3個(gè)文件著隆，get24.html扰楼，get24.css，get24.js美浦。
首先來編寫網(wǎng)頁的內(nèi)容和相應(yīng)的顯示樣式弦赖，可以參考前面四則運(yùn)算器的樣式。
同時(shí)給每個(gè)元素增加onclick="dc(this.id);"事件浦辨。
get24.html代碼如下：
get24.css代碼如下：
瀏覽器打開這個(gè)網(wǎng)頁：
可以看到蹬竖，所有的的顯示樣式，其中的如果要修改選中元素流酬，則只要在div元素上增加或減少樣式selecteddiv即可達(dá)到切換選中元素的樣式案腺。
編寫移動(dòng)元素處理邏輯
然后來編寫JavaScript的代碼。
設(shè)置一個(gè)變量selectedid來存儲(chǔ)當(dāng)前選中的元素id的值康吵，默認(rèn)為n1劈榨。
然后在dc函數(shù)中，通過this.id參數(shù)可以將不同的div元素的id傳遞到函數(shù)當(dāng)中晦嵌，這樣就不需要每個(gè)div都寫一個(gè)不同的函數(shù)了同辣，使用同樣的一個(gè)函數(shù)拷姿，進(jìn)行同樣的邏輯處理，同時(shí)也能知道是哪一個(gè)div的事件被觸發(fā)了旱函。
get24.js代碼如下：
修改html文件响巢，將所有測(cè)試的內(nèi)容刪除，并設(shè)置body的onload事件和重新開始按鈕onclick事件為initPage函數(shù)棒妨，設(shè)置清除按鈕的事件為cleartype函數(shù)踪古。
get24.html代碼如下：
刷新網(wǎng)頁：
可以看到默認(rèn)第一個(gè)數(shù)字的邊框變成紅色了，表示此數(shù)字被選中券腔，然后點(diǎn)擊第一種運(yùn)算次序的第一個(gè)空白元素：
可以看到伏穆，原始的數(shù)字不見了，數(shù)字出現(xiàn)在第一種運(yùn)算次序的第一個(gè)空白元素纷纫，表示數(shù)字被移動(dòng)過來了枕扫。
此時(shí)數(shù)字被選中狀態(tài)也跟著移動(dòng)了，此時(shí)如果點(diǎn)擊原始的第一個(gè)數(shù)字的空白元素：
可以看到辱魁，數(shù)字又被移動(dòng)回去了烟瞧。通過這樣的方式就可以移動(dòng)數(shù)字。
此時(shí)染簇，如果被選中元素是原始數(shù)字第1個(gè)参滴，點(diǎn)擊原始數(shù)字第2個(gè)，就可以切換選中的焦點(diǎn)到第2個(gè)了锻弓。
也就是卵洗，假如選中一個(gè)元素，再去選第二個(gè)元素弥咪，假如第二個(gè)元素是空白則移動(dòng)第一個(gè)元素的值到第二個(gè)元素过蹂，假如第二個(gè)元素不是空白有數(shù)值的話，就是移動(dòng)選中的焦點(diǎn)聚至。
有一種特殊情況要處理酷勺，假如焦點(diǎn)在某個(gè)元素上，此時(shí)點(diǎn)擊這個(gè)元素扳躬，則什么事情也不需要做脆诉。
來看看如果是運(yùn)算符該如何處理。
首先要明確數(shù)字和運(yùn)算符是不同類的元素贷币，互相之間不能移動(dòng)內(nèi)容击胜。
然后運(yùn)算符的移動(dòng)和數(shù)字不同，因?yàn)閿?shù)字是必須使用且只能使用一次役纹，但是運(yùn)算符卻是可以重復(fù)使用的偶摔。比如三個(gè)運(yùn)算符都可以是加號(hào)。
因此促脉，將運(yùn)算符移動(dòng)到空白運(yùn)算符位置之后辰斋，原始的運(yùn)算符內(nèi)容仍然要保留策州。
如果要?jiǎng)h除已經(jīng)設(shè)置的運(yùn)算符，可以點(diǎn)擊原始運(yùn)算符右側(cè)的清除按鈕宫仗，這樣做起來比較方便够挂。
因此需要判斷如果是運(yùn)算符元素，則清除按鈕才起作用藕夫。
首先選中一個(gè)運(yùn)算符加號(hào)：
然后孽糖，點(diǎn)擊第一種運(yùn)算次序的第一個(gè)運(yùn)算符空白元素：
可以看到，空白運(yùn)算符填好了加號(hào)毅贮，并且原來的加號(hào)還在办悟，可以繼續(xù)將加號(hào)放到其它空白運(yùn)算符種。
此時(shí)在運(yùn)算符被選中的情況下嫩码，點(diǎn)擊清除按鈕，可以清除這個(gè)填好的運(yùn)算符罪既。
測(cè)試每一種運(yùn)算次序铸题，看看各種數(shù)字和各種運(yùn)算符的移動(dòng)是否正常。
增加隨機(jī)題目生成代碼
前面的處理都是針對(duì)網(wǎng)頁元素的控制琢感。
接下來編寫JavaScript代碼丢间，nextSubject函數(shù)隨機(jī)生成4個(gè)1到13之間的整數(shù)，然后題目數(shù)加1驹针。
get24.js代碼修改如下：
get24.html代碼刪除掉測(cè)試的4個(gè)值：
刷新網(wǎng)頁：
可以看到生成了4個(gè)隨機(jī)數(shù)烘挫，多刷新網(wǎng)頁看看是否每次都生成的是不一樣的4個(gè)數(shù)字。
計(jì)算驗(yàn)證結(jié)果
現(xiàn)在來編寫檢查按鈕的事件柬甥。
首先修改html代碼增加事件處理函數(shù)饮六。檢查按鈕的事件。
get24.html代碼修改如下：
然后增加JavaScript函數(shù)苛蒲，首先檢查5種運(yùn)算次序卤橄，如果全部空白元素都填寫好了則進(jìn)行計(jì)算，判斷是否等于24臂外。
如果正確窟扑，則alert顯示正確，然后分?jǐn)?shù)增加漏健，然后調(diào)用下一題目函數(shù)嚎货。
如果錯(cuò)誤，則alert顯示錯(cuò)誤蔫浆，然后分?jǐn)?shù)不變殖属，調(diào)用下一題目函數(shù)。
get24.js代碼修改如下：
刷新網(wǎng)頁瓦盛，開始測(cè)試：
移動(dòng)數(shù)字到相應(yīng)位置：
移動(dòng)運(yùn)算符到相應(yīng)位置：
然后點(diǎn)擊檢查按鈕：
顯示檢查結(jié)果是答案正確忱辅，點(diǎn)擊確定按鈕：
可以看到下一題了七蜘，并且分?jǐn)?shù)加1了。
然后移動(dòng)數(shù)字和運(yùn)算符墙懂，故意結(jié)果不正確橡卤，點(diǎn)擊檢查按鈕：
看到顯示結(jié)果不正確，點(diǎn)擊確定按鈕：
可以看到下一題了损搬，分?jǐn)?shù)不變碧库。
題目沒有答案怎么辦
持續(xù)測(cè)試下去，會(huì)碰到一種情況巧勤，也就是說嵌灰，給出的4個(gè)隨機(jī)數(shù)非常不巧，加減乘除怎么計(jì)算也算不出24點(diǎn)颅悉，那么這種情況怎么辦呢沽瞭？
有2種解決辦法，一種辦法是在生成4個(gè)隨機(jī)數(shù)之后就寫一個(gè)函數(shù)去計(jì)算能不能得到一個(gè)解法算出24剩瓶，如果沒有解法驹溃，則重新生成另外4個(gè)隨機(jī)數(shù)，直到一定有解法延曙，才顯示到界面上豌鹤。
另外一種辦法是在頁面上增加一個(gè)按鈕，無答案枝缔，當(dāng)用戶發(fā)現(xiàn)沒有解法時(shí)布疙，點(diǎn)擊這個(gè)按鈕，此時(shí)程序去計(jì)算是否有解法愿卸，如果有解法則說明用戶回答錯(cuò)誤灵临，則顯示回答錯(cuò)誤，不加分進(jìn)入下一題趴荸，如果確實(shí)沒有解法俱诸，則說明用戶回答正確，則顯示回答正確赊舶，加分并進(jìn)入下一題睁搭。
由于這里學(xué)習(xí)的重點(diǎn)是如何使用JavaScript來控制網(wǎng)頁元素，這里的求算24點(diǎn)解法的邏輯在第1章里面有說明笼平，這里就不深入講解了园骆。
大家可以作為課后練習(xí)將這塊內(nèi)容自行完成。
