
最近和我爸聊天,發現他們 LINE 的聊天室除了 「早安」、「平安喜樂」 的貼圖之外,居然也有這種互相貼一些手寫題目解題防老的鼓勵貼圖。
這是最後的 出題 / 解題 介面:
Demo: https://it-monk-team.github.io/pazzle_beer/
GitHub: https://github.com/it-monk-team/pazzle_beer

看到了這一題,我想這不就是典型的 while loop 嗎!
條件如下:
啤酒一瓶 2 元
4 個瓶蓋可以換 1 瓶
2 個空瓶可以換 1 瓶
10 元可以喝幾瓶?
比起拿紙筆從頭算半天,我想還是打開我的 IDE 讓電腦幫忙吧。順便做一個能夠修改題目的簡單介面吧。
先來設定變數。
// 我有 10 元
let money = 10;
// 啤酒 0 瓶
let beer = 0;
// 瓶蓋 0 個
let cap = 0;
// 空瓶子 0 個
let bottle = 0;
// 已經喝了 0 瓶
let drinked = 0;
// 條件 =================================
// 酒的價格 2 元
let beer_price = 2;
// 4 個瓶蓋可換一瓶酒
let caps_for_beer = 4;
// 2 個空瓶可以換一瓶酒
let bottles_for_beer = 2
第一個步驟,買酒。
錢錢 ÷ 酒的價格。
為了避免之後改變題目會有 除不盡的情形,要使用 Math.floor 只取整數值的函式。
// 買酒
beer = Math.floor( money / beer_price );
console.log("我買了" + beer + "瓶酒");
第二個步驟,喝酒 -> 蒐集瓶蓋 -> 蒐集空瓶。
// 喝酒 使用 += 累計喝酒的數量
drinked += beer;
// 蒐集瓶蓋和瓶子
cap += beer;
bottle += beer;
//蒐集完之後,手邊已經沒有酒了
beer = 0;
console.log("我已經喝了" + drinked + "瓶酒");
console.log("我有" + cap + "個蓋子");
console.log("我有" + bottle + "個空瓶");
第三個步驟,拿空瓶、瓶蓋去換酒。
換酒要注意,換到酒以後要把剩下不足換酒的蓋子和空瓶蒐集起來。
除了使用 Math.floor 函數外,要使用 % 運算子取得餘數。
寫法如下:
// 用瓶蓋換酒
beer += Math.floor( cap / caps_for_beer );
cap = cap % caps_for_beer;
// 用空瓶換酒
beer += Math.floor( bottle / bottles_for_beer );
bottle = bottle % bottles_for_beer;
console.log("我換到了" + beer + "瓶酒");
console.log("剩下" + cap + "個蓋子");
console.log("剩下" + bottle + "個空瓶");
接下來,不斷重複喝酒、換酒的步驟,一直到剩下的瓶子、蓋子都不能換為止。
所以我們要為這個循環設立繼續執行的條件,那就是如果蓋子和空瓶能夠繼續換就要不斷的換來喝個爽! 主角 while 終於出場了!
這邊要先設定繼續執行的條件,
1.酒還沒喝完
2.空瓶多於或等於 2 ( bottles_for_beer )
3.蓋子多於或等於 4 ( caps_for_beer )
以上條件滿足任何一個,表示可以繼續喝酒換酒,就要繼續執行 while loop 的內容。我們可以這樣寫:
// 只要可以繼續換就執行
while( beer > 0 || cap >= caps_for_beer || bottle >= bottles_for_beer ){
//把前面喝酒,換酒的步驟貼進來
// 喝酒 使用 += 累計喝酒的數量
drinked += beer;
// 蒐集瓶蓋和瓶子
cap += beer;
bottle += beer;
//蒐集完之後,手邊已經沒有酒了
beer = 0;
console.log("我已經喝了" + drinked + "瓶酒");
console.log("我有" + cap + "個蓋子");
console.log("我有" + bottle + "個空瓶");
// 用瓶蓋換酒
beer += Math.floor( cap / caps_for_beer );
cap = cap % caps_for_beer;
// 用空瓶換酒
beer += Math.floor( bottle / bottles_for_beer );
bottle = bottle % bottles_for_beer;
console.log("我換掉到" + beer + "瓶酒");
console.log("剩下" + cap + "個蓋子");
console.log("剩下" + bottle + "個空瓶");
}
最後 while loop 結束後,我們再中括號後面做一個總結。
console.log("不能再換囉~");
console.log("我總共喝了" + drinked + "瓶酒");
console.log("剩下" + cap + "個蓋子");
console.log("剩下" + bottle + "個空瓶");
完整執行後的 console 可以看到最後的結果。

這邊我們可以看到 while loop ,就是不斷執行 {} 內的動作,一直到滿足 while 的 ( ) 內的條件。當條件未被滿足就會一直執行下去。
也就是說,你如果在 while 的括弧內設定的條件一直被滿足的狀況下,就可以看到你瀏覽器的圈圈轉個不停,電腦的風扇開始哀號,所以 () 裡面的條件要特別注意!
寫完這些後,不要說 10 元最後可以喝幾瓶,我們可以來算算 100 元可以喝幾瓶都可以了!
最後我用 Vue.js 做一個簡單介面。可參考 Github 的範例和說明。
Demo: https://it-monk-team.github.io/pazzle_beer/
GitHub: https://github.com/it-monk-team/pazzle_beer
最後祝各位平安喜樂。

其實你應該找朋友一起喝!我起碼可以再出10塊
擺好等你來喝囉~