欣迪Avatar

最近和我爸聊天,發現他們 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

最後祝各位平安喜樂。

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚
Loading

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。

2 thoughts on “LINE 貼圖題目( 1 ) 買酒換贈品

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *