第八章 終極密碼

終極密碼

1.1專題介紹：終極密碼

　　在一連串的程式學習中，有沒有比較熟悉程式的寫法了呢，那我們就打鐵趁熱，再來學習一個比較複雜的程式，想必大家都玩過，沒玩過也看過別人玩過的終極密碼，那我們來看看如何寫出終極密碼的程式吧！

1.2專題重點

※能夠使用變數

※能將圖片匯入

※能夠使用文字輸入框

※能判斷輸入數字的範圍

2.專題實作：終極密碼

2.1專題總覽

　　在1~100的範圍內，猜中答案者為輸，是個適合多人一起玩的遊戲。設計出一個遊戲，遊戲中會有一個答案，在遊戲過程中可選擇是否要換一組數字，猜中數字會出現BOOM!圖片，若猜的數字加1或減1恰巧等於答案，則會出現LUCKY!圖片。

2.2專題建置

◎需求元件：

請先自行準備好兩張圖，一張上面寫BOOM!而另外一張上面寫LUCKY!。

1.       新增專案：Code

新增「專題名稱：Code」的專案

進入AppInventor的Designer視窗

(註：專案名稱開頭不能是數字；專案名稱中可用底線，但是不能使用空格或其他特殊字元)

2.3介面配置

2.       使所有元件能夠橫向排列

在視窗左側的元件面板(Palette)中，點選頁面布局(Layout)中的橫向排列(HorizontalArrangement)元件，按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗，共拖曳5個。

橫向排列：Palette/Layout/HorizontalArrangement

3.       文字輸入框（TextBox）

在視窗左側的元件面板(Palette)中，點選使用者介面(UserInterface)中的文字輸入框(TextBox)元件，按住滑鼠不放將其拖曳至第一個橫向排列(HorizontalArrangement)元件中，接著請到右邊的屬性(Properties)面板上，找到Hint屬性，將方框中預設的文字改為請輸入數字1~100。

加入文字輸入框：Palette/UserInterface/TextBox

Properties/Hint：請輸入數字1~100

4.       增加元件按鈕（Button）

在視窗左側的元件面板(Palette)中，點選使用者介面(UserInterface)中的按鈕(Button)元件，按住滑鼠不放將其拖曳至第二個水平排列(HorizontalArrangement)元件中，共拖曳兩個，接著請到右邊的屬性(Properties)面板上，找到Text屬性，第一個按鈕請將方框中預設的文字改為挑戰！(可以為中文)，而第二個按鈕請將方框中預設的文字該為我要換答案(可以為中文)。

新增按鈕：Palette/UserInterface/Button

Properties/Text：挑戰！

Properties/Text：我要換答案

5.       將元件庫(Components)裡名稱重新命名(Rename)

接著到右邊的元件庫(Components)先點Button1一下，在點下面的重新命名(Rename)將它的名字改為start，再將Button2改為change，接著按下OK。

重新命名：Components/Button1/Rename：start

Components/Button2/Rename：change

6.       文字(Label)元件，顯示Bingo！

在視窗左側的元件面板(Palette)中，點選使用者介面(UserInterface)中的文字(Label)元件，按住滑鼠不放將其拖曳至第三個水平排列(HorizontalArrangement)元件中，接著請到右邊的屬性(Properties)面板上，找到Text屬性，請將方框中預設的文字改為Bingo!(可以為中文)，並在屬性(Properties)面板上，找到Textcolor屬性，將顏色改為紅色。

顯示Bingo：Palette/UserInterface/Label1

Properties/Text：Bingo！

Textcolor：red

7.       新增元件按鈕(Button)

在視窗左側的元件面板(Palette)中，點選使用者介面(UserInterface)中的按鈕(Button)元件，按住滑鼠不放一樣將其拖曳至第三個水平排列(HorizontalArrangement)元件中，接著請到右邊的屬性(Properties)面板上，找到Text屬性，請將方框中預設的文字改為繼續(可以為中文)。

新增按鈕：Palette/UserInterface/Button

Properties/Text：繼續

8.       新增元件文字(Label)

在視窗左側的元件面板(Palette)中，點選使用者介面(UserInterface)中的文字(Label)元件，按住滑鼠不放將其拖曳至第四個水平排列(HorizontalArrangement)元件中，接著請到右邊的屬性(Properties)面板上，找到Text屬性，請將方框中預設的文字改為Lucky!(可以為中文)，並在屬性(Properties)面板上，找到Textcolor屬性，將顏色改為紅色。

顯示Lucky：Palette/UserInterface/Label2

Properties/Text：Lucky！

Textcolor：red

9.       新增元件按鈕(Button)

在視窗左側的元件面板(Palette)中，點選使用者介面(UserInterface)中的按鈕(Button)元件，按住滑鼠不放一樣將其拖曳至第四個水平排列(HorizontalArrangement)元件中，接著請到右邊的屬性(Properties)面板上，找到Text屬性，請將方框中預設的文字改為繼續(可以為中文)。

新增按鈕：Palette/UserInterface/Button

Properties/Text：繼續

10.  新增元件文字(Label)6個

請在視窗左側的元件面板(Palette)中，點選使用者介面(UserInterface)中的文字(Label)元件，按住滑鼠不放將其拖曳至第五個水平排列(HorizontalArrangement)元件中，共拖曳6個。

新增元件文字：Palette/UserInterface/Label

11.  提示範圍製作

請到右邊的屬性(Properties)面板上，找到Text屬性。

第一個Label3請將方框中預設的文字改為提示：。

第二個Label4請將方框中預設的文字改為0。

第三個Label5請將方框中預設的文字改為<。

第四個Label6請將方框中預設的文字改為ANSWER。

第五個Label7請將方框中預設的文字改為<。

第六個Label8請將方框中預設的文字改為100。

12.  將文字(Label4&8)元件重新命名(Rename)

接著到右邊的元件庫(Components)先點Label4一下，在點下面的重新命名(Rename)將它的名字改為number1，再將Label8改為number2，接著按下OK。

重新命名：Components/Label4/Rename：number1

Components/Label4/Rename：number2

13.  新增元件圖片(Image)

請在視窗左側的元件面板(Palette)中，點選使用者介面(UserInterface)中的圖片(Image)元件，按住滑鼠不放將其拖曳至最下層，請拖曳2個。

新增圖片：Palette/UserInterface/Image

14.  設定圖片屬性

接著請到右邊的屬性(Properties)面板上，找到Picture屬性，第一個請上傳BOOM!圖，第二個請上傳LUCKY!圖，並將兩張圖片的寬度(Width)改為300像素和高度(Height)改為300像素。

放入圖片：Properties/Image/Picture：boom.jpg

Visible：hidden

Width：300

Height：300

Properties/Image/Picture：lucky.jpg

Visible：hidden

Width：300

Height：300

15.  調整visible屬性

接著請到右邊的屬性(Properties)面板上，找到Visible屬性，請分別將HorizontalArrangement3、HorizontalArrangement4、Image1、Imege2這四個元件的Visible屬性取消勾選。

放入圖片：Properties/Picture/Visible：取消勾選

Properties/Picture/Visible：取消勾選

Properties/HorizontalArrangement3/Visible：取消勾選

Properties/HorizontalArrangement4/Visible：取消勾選

使用元件及其重要屬性

名稱	屬性
Screen1
HorizontalArrangement
TextBox1	Hint：請輸入數字1~100
HorizontalArrangement2
start	Text：挑戰！
change	Text：我要換答案
HorizontalArrangement3	Visible：hidden
Label1	Text：Bingo！Textcolor：red
Button1	Text：繼續
HorizontalArrangement4	Visible：hidden
Label2	Text：Lucky！Textcolor：red
Button2	Text：繼續
HorizontalArrangement5
Label3	Text：提示：
number1	Text：0
Label5	Text：<
Label6	Text：ANSWER
Label7	Text：<
number2	Text：100
Image1	Visible：hidden Picture：boom.jpg Visible：取消勾選 Width：300 Height：300
Image2	Visible：hidden Picture：lucky.jpg Visible：取消勾選 Width：300 Height：300

2.4專題分析和程式拼塊說明

接下來我們就可以開始編寫程式囉！請先從視窗右上角的 Designer 視窗切換至 Blocks 視窗。

16.  設置變數，隨機選取一個答案值

在左側Blocks選單中點選Built-in下的變數(Variables)，在的拼圖式程式區塊中選取initialize global name to，置於預覽視窗中，並將initialize global name to中的name空格，將其名字改為answer，接著請到左側點選Blocks選單中點選Built-in下的數學(Math)，在的拼圖式程式區塊中選取random integer from 1 to 100。並請將後面的100改為99。

設置變數：Blocks/Built-in/Variable/initialize global name to

將name改成answer

Blocks/Built-in/Math/random integer from 1 to 100

將100改成99

17.  拉出按鈕的指示

在左側Blocks選單中點選Screen1中的start，在的拼圖式程式區塊中選取when start.Click。

按鈕指令：Blocks/Screen1/start/when start.Clickdo

18.  拉出指示

在左側Blocks選單中點選Built-in下的控制(Control)在的拼圖式程式區塊中選取if/then。

條件指示：Blocks/Built-in/Control/if then

19.  條件的設定

在左側Blocks選單中的Built-in裡點選數學(Math)，在的拼圖式程式區塊中選取is a number？將它卡入if後面。接著到在左側Blocks選單中的Screen1裡點選Textbox1中選取Textbox1.Text，卡在is a number？的後面。

設定條件：Blocks/Built-in/Math/is a number?

Blocks/Screen1/TextBox1/TextBox1.Text

20.  判定數字的範圍-1

在左側Blocks選單中的Built-in裡，從Control中選取一個if/then，將它卡在第一個if/then中，並在左側Blocks選單中點選數學(Math)，在裡面選取＝，接著到Textbox1中選取Textbox1.Text，卡在＝前面，然後再到變數(Variables)中點選get向下拉出global answer，將它卡在＝的後面。請在左側Image1的拼圖式程式區塊中選取set Image1.Visible to，並到邏輯(Logic)中選取true，卡在to的後面。在左側HorizontalArrangement3的拼圖式程式區塊中選取set HorizontalArrangement3.Visible to，並到邏輯(Logic)中選取true，卡在to的後面。在左側HorizontalArrangement1的拼圖式程式區塊中選取set HorizontalArrangement1.Visible to，並到邏輯(Logic)中選取false，卡在to的後面。在左側HorizontalArrangement2的拼圖式程式區塊中選取set HorizontalArrangement2.Visible to，並到邏輯(Logic)中選取false，卡在to的後面。在左側HorizontalArrangement5的拼圖式程式區塊中選取set HorizontalArrangement5.Visible to，並到邏輯(Logic)中選取false，卡在to的後面。

◎  解釋：這裡做的部分是當你猜的數字恰巧等於答案時，我們要讓Image1跳出來(也就是BOOM！圖)，還要出現Bingo！文字和繼續的按鈕，而有一些元件需讓它看不見，並設定背景為白色，如果你選的圖背景是其他顏色，就可以在這裡設定。

設定條件：

Blocks/Built-in/Control/if then

Blocks/Built-in/Math/=

Blocks/Screen1/TextBox1/TextBox1.Text

Blocks/Built-in/Variables/get global answer

Blocks/Screen1/Image1/set Image1.Visible to

Blocks/Built-in/Logic/true

Blocks/Screen1/HorizontalArrangement1/set HorizontalArrangement3.Visible to

Blocks/Built-in/Logic/false

Blocks/Screen1/HorizontalArrangement1/set HorizontalArrangement1.Visible to

Blocks/Built-in/Logic/false

Blocks/Screen1/HorizontalArrangement1/set HorizontalArrangement2.Visible to

Blocks/Built-in/Logic/false

Blocks/Screen1/HorizontalArrangement1/set HorizontalArrangement5.Visible to

Blocks/Built-in/Logic/false

21.  判定數字的範圍-2

在左側Blocks選單中的Built-in裡，從Control中選取一個if/then，將它卡在第一個if/then中，並在左側Blocks選單中點選數學(Math)，在裡面選取＜，接著到Textbox1中選取Textbox1.Text，卡在＜前面，然後再到變數(Variables)中選取get向下拉出global answer，將它卡在＜的後面。請再從control中選取一個if/then，將它卡在then後面。在左側Blocks選單中的Built-in裡，點選數學(Math)，在裡面選取＜，接著到number1中選取number1.Text，卡在＜前面，然後再到Textbox1中選取Textbox1.Text，將它卡在＜的後面，接著卡入if後面。到number1中選取set number1.Text to，再到Textbox1中選取Textbox1.Text，將Textbox1.Text卡到to的後面，在將這一列卡入then中。

◎  解釋：這部分是當我們猜的數字小於答案時，我們要讓提示中前面的空格(我們前面有將它名字改為number1)等於你猜的那一個數字，這裡設計讓我們猜過後會固定在提示欄，而不會出錯，使提示能讓你離答案越來越近。

設定條件：

Blocks/Built-in/Control/if then

Blocks/Built-in/Math/<

Blocks/Screen1/TextBox1/TextBox1.Text

Blocks/Built-in/Variables/get global answer

Blocks/Built-in/Control/if then

Blocks/Built-in/Math/<

Blocks/Screen1/number1/number1.Text

Blocks/Screen1/TextBox1/TextBox1.Text

Blocks/Screen1/number1/set number1.Text to

Blocks/Screen1/TextBox1/TextBox1.Text

22.  判定數字的範圍-3

在左側Blocks選單中的control中選取一個if/then，將它卡在第一個ifthen中，並在左側Blocks選單中點選數學(Math)，在裡面選取＞，接著到Textbox1中選取Textbox1.Text，卡在＞前面，然後再到變數(Variables)中選取get向下拉出global answer，將它卡在＞的後面。請再從control中選取一個if/then，將它卡在then後面。請在左側Blocks選單中點選數學(Math)，在裡面選取＞，接著到number2中選取number2.Text，卡在＞前面，然後再到Textbox1中選取Textbox1.Text，將它卡在＞的後面，接著卡入if後面。請到number2中選取set number2.Text to，再到Textbox1中選取Textbox1.Text，將Textbox1.Text卡到to的後面，在將這一列卡入then中。

◎  解釋：這部分是當我們猜的數字大於答案時，我們要讓提示中後面的空格(我們前面有將它名字改為number2)等於你猜的那一個數字，這裡設計讓我們猜過後會固定在提示欄，而不會出錯，使提示能讓你離答案越來越近。

設定條件：Blocks/Built-in/Control/if then

Blocks/Built-in/Math/>

Blocks/Screen1/TextBox1/TextBox1.Text

Blocks/Built-in/Variables/get global answer

Blocks/Built-in/Control/if then

Blocks/Built-in/Math/>

Blocks/Screen1/number2/number2.Text

Blocks/Screen1/TextBox2/TextBox2.Text

Blocks/Screen1/number2/setnumber2.Textto

Blocks/Screen1/TextBox2/TextBox2.Text

23.  提示能離答案越來越近

先在左側Blocks選單中點選數學(Math)，在裡面選取＋，再到Textbox1中選取Textbox1.Text，將它卡在＋的前面。再從左側Blocks選單中點選數學(Math)，在裡面選取—，再到Textbox1中選取Textbox1.Text，將它卡在—的前面。再從數學(Math)裡面選取0，將0改為1後分別放在＋和－的後面。

變更提示：Blocks/Built-in/Math/+

Blocks/Screen1/TextBox1.Text

Blocks/Built-in/Math/0

將0改成1

Blocks/Built-in/Math/-

Blocks/Screen1/TextBox1.Text

Blocks/Built-in/Math/0

將0改成1

24.  結合兩個條件

在左側Blocks選單中點選數學(Math)，在裡面選取＝，將上面的Textbox1.Text +1放在＝的前面，再到變數(Variables)中選取get向下拉出global answer，將它卡在＝的後面。在左側Blocks選單中點選數學(Math)，在裡面選取＝，將上面的將上面的Textbox1.Text -1放在＝的前面，再到變數(Variables)中選取get向下拉出global answer，將它卡在＝的後面。請到邏輯(Logic)中選取or，將上面兩個分別卡在or的前面和後面。

結合條件：Blocks/Built-in/Math/=

Blocks/Built-in/Variables/get global answer

Blocks/Built-in/Logic/or

25.  判定true or false

在左側Blocks選單中的control裡選取一個if/then，將and卡在if的後面。

在左側Image2的拼圖式程式區塊中選取set Image2.Visible to，並到邏輯(Logic)中選取true，卡在to的後面。在左側HorizontalArrangement4的拼圖式程式區塊中選取set HorizontalArrangement4.Visible to，並到邏輯(Logic)中選取true，卡在to的後面。在左側HorizontalArrangement1的拼圖式程式區塊中選取set HorizontalArrangement1.Visible to，並到邏輯(Logic)中選取false，卡在to的後面。在左側HorizontalArrangement2的拼圖式程式區塊中選取set HorizontalArrangement2.Visible to，並到邏輯(Logic)中選取false，卡在to的後面。在左側HorizontalArrangement5的拼圖式程式區塊中選取set HorizontalArrangement5.Visible to，並到邏輯(Logic)中選取false，卡在to的後面。

◎  解釋：這裡我們要讓當他猜出來的數字加1或減1時會出現Lucky!的字和圖，因此我們要設定讓Image2變成true。

設定條件：

Blocks/Screen1/Image2/set Image2.Visible to

Blocks/Built-in/Logic/true

Blocks/Screen1/HorizontalArrangement4/set HorizontalArrangement4.Visible to

Blocks/Built-in/Logic/false

Blocks/Screen1/HorizontalArrangement1/set HorizontalArrangement1.Visible to

Blocks/Built-in/Logic/false

Blocks/Screen1/HorizontalArrangement2/set HorizontalArrangement2.Visible to

Blocks/Built-in/Logic/false

Blocks/Screen1/HorizontalArrangement5/set HorizontalArrangement5.Visible to

Blocks/Built-in/Logic/false

26.  清空作答區

在左側Textbox1中選取setTextbox1.Textto，接著在到左側Text中的拼圖式程式區塊中選取(空白格)將空白格卡入to的後面後，在將這一列放在這一個ifthen的後面。

清空：Blocks/Screen1/TextBox1/setTextBox1.Textto

Blocks/Built-in/Text/

◎  解釋：

這裡我們設計當你猜出的數字加1或減1時，我們認程式會跳出LUCKY圖，而後面多出的那一列是要讓我們每次猜玩數字後上面的格子都能夠清空。

這樣我們Start按鈕就做好囉!

27.  接著做change按鈕

在左側Blocks選單中點選Screen1中的change，在的拼圖式程式區塊中選取when change.Click。在左側Blocks選單中點選Built-in下的變數(Variables)，在的拼圖式程式區塊中選取set向下拉至global answer，接著到左側點選數學(Math)，在的拼圖式程式區塊中選取random integer from 1 to 100。在左側number1的拼圖式程式區塊中選取set number1.Text to，再從數學(Math)裡面選取0，放在to的後面。在左側number2的拼圖式程式區塊中選取set number2.Text to，再從數學(Math)裡面選取100，放在to的後面。

按鈕指令：Blocks/Screen1/change/when change.Click do

Blocks/Built-in/Variables/set answer to global answer

Blocks/Built-in/Math/random integer from 1 to 100

Blocks/Screen1/number1/set number1.Text to

Blocks/Built-in/Math/0

Blocks/Screen1/number2/set number2.Text to

Blocks/Built-in/Math/0

將0改成100

28.    接著做Button1(Bingo!的繼續按鈕)。

在左側Blocks選單中點選Screen1中的Button1，在的拼圖式程式區塊中選取when Button1.Click。在左側Blocks選單中點選Built-in下的變數(Variables)，在的拼圖式程式區塊中選取set向下拉至global answer，接著請到左側點選數學(Math)，在的拼圖式程式區塊中選取radom integer from 1 to 100。在左側number1的拼圖式程式區塊中選取set number1.Text to，再從數學(Math)裡面選取0，放在to的後面。在左側number2的拼圖式程式區塊中選取set number2.Text to，再從數學(Math)裡面選取100，放在to的後面。在左側Image1的拼圖式程式區塊中選取set Image1.Visible to，並到邏輯(Logic)中選取false，卡在to的後面。在左側Screen1的拼圖式程式區塊中選取set Screen1.BackgroundColor to，並到顏色(Colors)中選取白色，卡在to的後面。在左側HorizontalArrangement1的拼圖式程式區塊中選取set HorizontalArrangement1.Visible to，並到邏輯(Logic)中選取true，卡在to的後面。在左側HorizontalArrangement2的拼圖式程式區塊中選取set HorizontalArrangement2.Visible to，並到邏輯(Logic)中選取true，卡在to的後面。請在左側HorizontalArrangement3的拼圖式程式區塊中選取set HorizontalArrangement3.Visible to，並到邏輯(Logic)中選取false，卡在to的後面。在左側HorizontalArrangement5的拼圖式程式區塊中選取set HorizontalArrangement5.Visible to，並到邏輯(Logic)中選取true，卡在to的後面。

設定條件：

Blocks/Screen1/Image1/set Image1.Visible to

Blocks/Built-in/Logic/false

Blocks/Screen1/HorizontalArrangement1/set HorizontalArrangement1.Visible to

Blocks/Built-in/Logic/true

Blocks/Screen1/HorizontalArrangement2/set HorizontalArrangement2.Visible to

Blocks/Built-in/Logic/true

Blocks/Screen1/HorizontalArrangement3/set HorizontalArrangement3.Visible to

Blocks/Built-in/Logic/false

Blocks/Screen1/HorizontalArrangement5/set HorizontalArrangement5.Visible to

Blocks/Built-in/Logic/true

Blocks/Screen1/set Screen1.BackgroundColor to

Block/Built-in/Colors/white

29.  接著做Button2(Lucky!的繼續按鈕)。

在左側Blocks選單中點選Screen1中的Button2，在的拼圖式程式區塊中選取whenButton2.Click。在左側Blocks選單中點選Built-in下的變數(Variables)，在的拼圖式程式區塊中選取set向下拉至global answer，接著請到左側點選數學(Math)，在的拼圖式程式區塊中選取radom integerfrom 1 to 100。在左側number1的拼圖式程式區塊中選取set number1.Text to，再從數學(Math)裡面選取0，放在to的後面。在左側number2的拼圖式程式區塊中選取set number2.Text to，再從數學(Math)裡面選取100，放在to的後面。在左側Image1的拼圖式程式區塊中選取set Image1.Visible to，並到邏輯(Logic)中選取false，卡在to的後面。在左側HorizontalArrangement1的拼圖式程式區塊中選取set HorizontalArrangement1.Visible to，並到邏輯(Logic)中選取true，卡在to的後面。在左側HorizontalArrangement2的拼圖式程式區塊中選取set HorizontalArrangement2.Visible to，並到邏輯(Logic)中選取true，卡在to的後面。請在左側HorizontalArrangement3的拼圖式程式區塊中選取set HorizontalArrangement3.Visible to，並到邏輯(Logic)中選取false，卡在to的後面。在左側HorizontalArrangement5的拼圖式程式區塊中選取set HorizontalArrangement5.Visible to，並到邏輯(Logic)中選取true，卡在to的後面。

◎  解釋：這裡我們要讓當他猜出來的數字加1或減1時會出現Lucky!的字和圖，因此我們要設定讓Image2變成true。

設定條件：

Blocks/Screen1/Image2/set Image2.Visible to

Blocks/Built-in/Logic/false

Blocks/Screen1/HorizontalArrangement1/set HorizontalArrangement1.Visible to

Blocks/Built-in/Logic/true

Blocks/Screen1/HorizontalArrangement2/set HorizontalArrangement2.Visible to

Blocks/Built-in/Logic/true

Blocks/Screen1/HorizontalArrangement3/set HorizontalArrangement3.Visible to

Blocks/Built-in/Logic/false

Blocks/Screen1/HorizontalArrangement5/set HorizontalArrangement5.Visibleto

Blocks/Built-in/Logic/true

Blocks/Screen1/set Screen1.BackgroundColor to

Block/Built-in/Colors/white

※完整程式碼：

程式專案檔QRcode：

手機執行檔QRcode：