< Return to Video

更多 while 迴圈(視頻版)

  • 0:01 - 0:07
    現在,你已經學會了迴圈的基礎知識,讓我們繼續,做出一個像這樣的超讚迴圈,
  • 0:07 - 0:10
    熱氣球飛行員飄過一片美麗的天空
  • 0:10 - 0:16
    當我談到程式編寫時,我希望你先想想你會怎麼寫,因為你馬上就要自己寫了。
  • 0:16 - 0:20
    首先,將你的程式拆開為一些步驟,這麼做每次都有用。
  • 0:20 - 0:27
    一開始我們先畫一些氣球,像這樣重複地橢圓,聽起來就像迴圈。
  • 0:27 - 0:34
    然後,我們將以此為基礎,最後再加上熱氣球飛行員。
  • 0:34 - 0:38
    好,這裡是一片空白,看起來有點可怕。
  • 0:38 - 0:44
    加上背景,有時候背景可以讓畫面看起來比較和善,也比較容易讓人代入。
  • 0:44 - 0:50
    現在,既然我們要畫一個迴圈,你應該會先想到我們上次講到的迴圈問題。
  • 0:50 - 0:57
    我們很快地再做一次,如果你需要複習,可以回到「介紹 While 迴圈」。
  • 0:57 - 1:01
    現在,第一個問題是:「我們要重複什麼?」
  • 1:01 - 1:06
    來,我們先畫第一個氣球,因為我們要複製這些氣球。
  • 1:06 - 1:15
    你可以現在立刻做,也許像那樣,嗯,你知道的,它有點小,位置不太對,
  • 1:15 - 1:17
    所以,我們試著做一點點移動。
  • 1:17 - 1:25
    這只是程式設計的一部分。先做一些嘗試,當發現不是你想要的就再試,直到越來越接近。
  • 1:25 - 1:34
    現在我們需要加上顏色,是吧?在思考步驟時沒想到這個,這部分就是畫氣球的其中一部分。
  • 1:34 - 1:41
    好了?下一步,我們來思考,究竟想要這個氣球,在迴圈過程中,做出什麼改變。
  • 1:41 - 1:48
    嗯,我們想要氣球橫排在螢幕上,是嗎?我們希望它像這裡和這裡,還有這裡,
  • 1:48 - 1:51
    我們希望由電腦來畫,因為我畫得非常糟糕。
  • 1:51 - 1:58
    我們可以透過改變第一個數字編造,就如你們印象中控制 x 位置:橫向整理的位置。
  • 1:58 - 2:03
    不過,我想,那其實蠻無趣的,是吧?不像我們之前所看到的酷圖片。
  • 2:03 - 2:11
    於是,讓我們稱這個 x 位置為 x,而且我們要使一個可變數跟原來看到的一樣。
  • 2:11 - 2:16
    現在,我們要改變迴圈中的可變數,所以會用到 while 迴圈,
  • 2:16 - 2:22
    然後在迴圈中,命令 x 每次改變,也許,20
  • 2:22 - 2:27
    如果我們非常小心的在裏面移動橢圓,當然不可以移動裏面的可變數聲明,
  • 2:27 - 2:30
    否則,我們就得找出哪裡可能會出錯。
  • 2:30 - 2:34
    但,這絕對值得自己動手做,如果你夠好奇的話。
  • 2:34 - 2:39
    好,接著,我們第三個迴圈問題是:「我們想要重複多長?」
  • 2:39 - 2:44
    或許我們可以繼續往下,基本上直到超出螢幕側邊
  • 2:44 - 2:47
    也許一直到 x 小於400。
  • 2:47 - 2:51
    現在,這很酷,因為我們做了東西出來,對吧?但它並不是我們想要的。
  • 2:51 - 2:56
    跟之前一樣,你知道的,我們只要修改它、慢慢地改成我們想要的樣子就可以了。
  • 2:56 - 2:59
    因此,讓我們先來解決橢圓全擠在一起的問題。
  • 2:59 - 3:02
    好,給它們彼此一些空間。
  • 3:02 - 3:09
    但你知道,也許他們離螢幕邊還是有點太遠了,如果我們改終點,
  • 3:09 - 3:17
    我們就可以讓橢圓消失,因為在這裡我們命令,只要 x 的值是某個數,就停止繪圖。
  • 3:17 - 3:19
    這就是這部分 while 迴圈的特色。
  • 3:19 - 3:25
    好吧?我們也可以說「好吧,也許我們想給橢圓一點改變」,我們希望它們都向下移動,
  • 3:25 - 3:34
    我們想稍為改變它們的大小,而 while 迴圈不錯的地方是我們可以一次地把它們都改。
  • 3:34 - 3:37
    好的,完美!
  • 3:37 - 3:42
    來看看這些氣球,加一些線上去應該不錯。如果我們想要,就放一些上去吧!
  • 3:42 - 3:44
    不然,它們會飄走!
  • 3:44 - 3:51
    所以,每一顆都要一條線。為了簡單化,我們想把線頭都放在每個氣球的中心,
  • 3:51 - 3:56
    且它們都往下延伸到同一位置,大概像那樣。
  • 3:56 - 3:59
    那如何使程式這樣做,而不是靠自己手描呢?
  • 3:59 - 4:05
    所以如果要複製東西,我們得要把它放在 while 迴圈裡,所以來做出那條線吧!
  • 4:05 - 4:11
    如果我們要把它放在橢圓的中心,那麼它得從這兩個座標開始,才可以做到。
  • 4:11 - 4:17
    你可以把線尾放到任何一處。那其實很接近!
  • 4:17 - 4:24
    然而,再一次,你可能留意到它不完美,我們要修復它。先來修復這個醜陋的傢伙。
  • 4:24 - 4:30
    再來,我們畫的線段疊在氣球上,可以這樣一點也不對。
  • 4:30 - 4:35
    我們想要橢圓覆蓋著線,可這樣只能夠透過改變順序去做。
  • 4:35 - 4:39
    你學過很多東西,而這次是這些東西一起應用的時候。
  • 4:39 - 4:45
    很好!我們也想要改這些線條的顏色。如果我們真的自己要寫程式,可怎麼辦?
  • 4:45 - 4:47
    我們去看看那些檔案。
  • 4:47 - 4:50
    或者,如果我們不知道怎麼做,也可以看影片檔。
  • 4:50 - 4:55
    所以,我們可以使用 stroke() 來設定這些線的顏色,
  • 4:55 - 5:00
    也許讓它們變成,不知道,也許,那種顏色?
  • 5:00 - 5:10
    很漂亮!最後,我們需要做的是繪製熱氣球飛行員。只要將她的影像檔置入就可以,像這樣,
  • 5:10 - 5:17
    你可以參考檔案,看我是如何做的。你知道,只要移動她,使她看起來像抓著氣球
  • 5:17 - 5:18
    飄過天空。
  • 5:18 - 5:27
    你做到了!我們完成了!你可以試著裝飾氣球,你想得到東西都加進迴圈,使這些氣球更酷些,
  • 5:27 - 5:31
    甚至你下次繪圖時可以運用迴圈。
Title:
更多 while 迴圈(視頻版)
Description:

這只是影像擷取我們寫編碼時的互動談話,方便字幕製作和轉譯。更詳細的內容可以到:
https://www.khanacademy.org/cs/programming/

more » « less
Video Language:
English
Duration:
05:31

Chinese, Traditional subtitles

Revisions