2014年5月5日 星期一

App Inventor 2 的範例程式-終極密碼

遊戲內容:
在1~100的範圍內,猜中答案者為輸,是個適合多人一起玩的遊戲。

程式功能分析:
設計出一個遊戲,遊戲中會有一個答案,在遊戲過程中可選擇是否要換一組數字,猜中數字會出現"BOOM!"圖,若猜的數字加1或減1恰巧等於答案,則會出現"LUCKY!"圖。

需求元件:
請先自行準備好兩張圖,一張上面寫"BOOM!"而另外一張上面寫"LUCKY!"。




開發步驟:
步驟一:請先新增一個名稱為「code」的專案,按下OK後,即可進入app inventor 2 的 Designer視窗。(註:專案名稱開頭不能是數字;專案名稱中可用底線但不能有空格和其他特殊字元)




步驟二:首先,請在視窗左側的元件面板(Palette)中,點選頁面布局(Layout)中的水平排列(HorizontalArrangement)元件,按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗,共拖曳5個。



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



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



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



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



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



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



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


步驟十:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的標籤(Label)元件,按住滑鼠不放將其拖曳至第五個水平排列(HorizontalArrangement)元件中,共拖曳 6 個



步驟十一:請到右邊的屬性(Properties)面板上,找到 Text 屬性。
第一個 Label 請將方框中預設的文字改為"提示:"
第二個 Label 請將方框中預設的文字改為"0"
第三個 Label 請將方框中預設的文字改為"<"
第四個 Label 請將方框中預設的文字改為"ANSWER"
第五個 Label 請將方框中預設的文字改為"<"
第六個 Label 請將方框中預設的文字改為"100 "



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




步驟十三:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的圖片(Image)元件,按住滑鼠不放將其拖曳至最下層,請拖曳 2 個



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



步驟十五:接著請到右邊的屬性(Properties)面板上,找到 Visible 屬性,請分別將HorizontalArrangement3、HorizontalArrangement4、Image1、Imege2 這四個元件的Visible 屬性從showing 調整為 hidden 。



接下來我們就可以開始編寫程式囉!

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


步驟十七:請在左側Blocks選單中點選Screen1中的 start,在彈出的拼圖式程式區塊中選取 when  start .Click 。

步驟十八:請在左側Blocks選單中點選Built-in下的控制(Control)在彈出的拼圖式程式區塊中選取 if then。


步驟十九:在左側Blocks選單中點選數學(Math) 在彈出的拼圖式程式區塊中選取 is a number?將它卡入 if 後面,接著到 Textbox1 中選取 Textbox1.Text,卡在 is a number?後面。

步驟二十:再從 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 的後面。
請在左側 Screen1 彈出的拼圖式程式區塊中選取 set Screen1.BackgroundColor to,並到顏色(Colors)中選取 白色,卡在 to 的後面。
請在左側 HorizontalArrangement1 彈出的拼圖式程式區塊中選取 set HorizontalArrangement1.Visible to,並到邏輯(Logic)中選取 false,卡在 to 的後面。
請在左側 HorizontalArrangement2 彈出的拼圖式程式區塊中選取 set HorizontalArrangement2.Visible to,並到邏輯(Logic)中選取 false,卡在 to 的後面。
請在左側 HorizontalArrangement5 彈出的拼圖式程式區塊中選取 setHorizontalArrangement5.Visible to,並到邏輯(Logic)中選取 false,卡在 to 的後面。

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

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




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

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


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

步驟二十三:請先在左側Blocks選單中點選數學(Math) ,在裡面選取 + ,再到Textbox1 中選取 Textbox1.Text,將它卡在 +的前面。再從左側Blocks選單中點選數學(Math) ,在裡面選取 — ,再到Textbox1 中選取 Textbox1.Text,將它卡在 — 的前面。再從數學(Math)裡面選取 0 ,將 0 改為 1 後分別放在+和-的後面。
步驟二十四:在左側Blocks選單中點選數學(Math) ,在裡面選取 =,將上面的 Textbox1.Text + 1放在 = 的前面,再到變數(Variables)中選取 get 向下拉出 global answer,將它卡在 = 的後面。
在左側Blocks選單中點選數學(Math) ,在裡面選取 =,將上面的將上面的 Textbox1.Text - 1 放在 = 的前面,再到變數(Variables)中選取 get 向下拉出 global answer,將它卡在 = 的後面。
到邏輯(Logic)中選取 or,將上面兩個分別卡在 or 的前面和後面

步驟二十五
再從 control 中選取一個 if then ,將 and 卡在 if 的後面。
請在左側 Image2 彈出的拼圖式程式區塊中選取 set Image2.Visible to,並到邏輯(Logic)中選取 true,卡在 to 的後面。
請在左側 HorizontalArrangement4 彈出的拼圖式程式區塊中選取 set HorizontalArrangement4.Visible to,並到邏輯(Logic)中選取 true,卡在 to 的後面。
請在左側 Screen1 彈出的拼圖式程式區塊中選取 set Screen1.BackgroundColor to,並到顏色(Colors)中選取 白色,卡在 to 的後面。
請在左側 HorizontalArrangement1 彈出的拼圖式程式區塊中選取 set HorizontalArrangement1.Visible to,並到邏輯(Logic)中選取 false,卡在 to 的後面。
請在左側 HorizontalArrangement2 彈出的拼圖式程式區塊中選取 set HorizontalArrangement2.Visible to,並到邏輯(Logic)中選取 false,卡在 to 的後面。
請在左側 HorizontalArrangement5 彈出的拼圖式程式區塊中選取 setHorizontalArrangement5.Visible to,並到邏輯(Logic)中選取 false,卡在 to 的後面。
解釋:這裏我們要讓當他猜出來的數字加1或減1時會出現 Lucky!的字和圖,因此我們要設定讓Image2變成 true。
請在左側 Textbox1 中選取 set Textbox1.Text to ,接著在到左側 Text 中彈出的拼圖式程式區塊中選取 " " (空白格)將空白格卡入 to 的後面後,在將這一列放在這一個 if then 的後面。


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

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

步驟二十六:請在左側Blocks選單中點選Screen1中的 change,在彈出的拼圖式程式區塊中選取 when  change .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的後面。


接著做 Button1(繼續)按鈕。

步驟二十七:請在左側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 彈出的拼圖式程式區塊中選取 setHorizontalArrangement5.Visible to,並到邏輯(Logic)中選取 true,卡在 to 的後面。
解釋:這裏我們要讓當他猜出來的數字加1或減1時會出現 Lucky!的字和圖,因此我們要設定讓Image2變成 true。

接著做 Button2(繼續)按鈕。

步驟二十八:請在左側Blocks選單中點選Screen1中的 Button2在彈出的拼圖式程式區塊中選取 when  Button2 .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 彈出的拼圖式程式區塊中選取 setHorizontalArrangement5.Visible to,並到邏輯(Logic)中選取 true,卡在 to 的後面。
解釋:這裏我們要讓當他猜出來的數字加1或減1時會出現 Lucky!的字和圖,因此我們要設定讓Image2變成 true。



恭喜完成此次範例程式!

4 則留言:

  1. 請問如何知道電腦隨機產生的數字是幾號?

    謝謝

    回覆刪除
    回覆
    1. 誰都不知道電腦隨機產生的數字是幾號呀!

      刪除