2014年12月25日 星期四

第八章 終極密碼

終極密碼

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/Renamestart
Components/Button2/Renamechange

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

顯示BingoPalette/UserInterface/Label1
Properties/TextBingo
Textcolorred

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

新增按鈕:Palette/UserInterface/Button
Properties/Text:繼續

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

顯示LuckyPalette/UserInterface/Label2
Properties/TextLucky
Textcolorred

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/Renamenumber1
Components/Label4/Renamenumber2

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

新增圖片:Palette/UserInterface/Image

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

放入圖片:Properties/Image/Picture:boom.jpg
Visiblehidden
Width300
Height300
Properties/Image/Picturelucky.jpg
Visiblehidden
Width300
Height300

15.  調整visible屬性
接著請到右邊的屬性(Properties)面板上,找到Visible屬性,請分別將HorizontalArrangement3HorizontalArrangement4、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
Visiblehidden
Label1
TextBingoTextcolorred
Button1
Text:繼續
HorizontalArrangement4
Visiblehidden
Label2
TextLuckyTextcolorred
Button2
Text:繼續
HorizontalArrangement5

Label3
Text提示:
number1
Text0
Label5
Text<
Label6
TextANSWER
Label7
Text<
number2
Text100
Image1
Visiblehidden
Pictureboom.jpg
Visible取消勾選
Width300
Height300
Image2
Visiblehidden
Picturelucky.jpg
Visible取消勾選
Width300
Height300

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.TextTextbox1.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.TextTextbox1.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/thenand卡在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




1 則留言:

  1. 影音解說網址:
    Part1 https://youtu.be/PhM0WgMbDgU
    Part2 https://www.youtube.com/watch?v=rw6FMcEdX3A

    原始碼(.aia)下載連結:
    https://drive.google.com/file/d/0Bz_3MvZ2YjRncWJ1YWRVczFzbXM/view?usp=sharing

    執行檔(.apk)下載連結:
    https://drive.google.com/file/d/0Bz_3MvZ2YjRndzlOWE9wNG9YeTg/view?usp=sharing

    Ted Lee
    URL:https://sites.google.com/site/lct4246/
    FB:https://www.facebook.com/ted.lee.10420321
    Blog:http://lct4246.blogspot.tw/

    回覆刪除