App Inventor 2 的範例程式 - Number Games

Number Games 是一個考驗反應能力的數字遊戲，歡迎大家來挑戰喔！

遊戲內容： 遊戲開始後，便會開始計時，並出現1~25的數字混排，要從數字最小的1開始依序找出到25，測試你的反應是否能在愈短的時間內完成。

程式功能分析：

設計一個遊戲，會出現1~25的數字亂排列，要從數字最小的1依序找到25。結束遊戲後會出現所花的秒數，按再來一次的按鈕回到主頁且可繼續遊戲。


開發步驟：  

步驟一：請先新增一個名稱為「number_games」的專案，按下 OK 後，即可進入 App Inventor 的 Designer 視窗。(註：專案名稱開頭不能是數字；專案名稱中可用底線但不能有空格或其它特殊字元)




步驟二：請點選在視窗右側的屬性(Properties)，點選對齊方式(AlignHorizontal)的置中(Center)，這樣之後的物件會以中心線排列，再來點選背景顏色(BackgroundColor)，設為Light Gray。



步驟三：在視窗左側的元件面板(Palette)中，點選頁面布局(Layout)中的垂直排列(VerticalArrangement)元件，按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗中，接著按重新命名(Rename)將其名字改為 Startpage。



步驟四：請在視窗右側的屬性(Properties)中，更改寬度(Width)和高度(Height)都設定為 Fill parent，水平對齊方式(AlignHorizontal)設定為Center。



步驟五：請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的標籤(Label)元件，將其拖曳至中間的畫面預覽(Viewer)視窗 Startpage 裡，接著請在視窗右側的屬性(Properties)中，將FontBold屬性打勾， FontSize屬性改成20， Text 屬性改成Number search Basic， FontTypeface屬性設定為serif，TextAlignment 屬性設定為Center，Width屬性設定為 Fill parent，Height屬性設定為 100 pixels。

步驟六：請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的按鈕(Button)元件，按住滑鼠不放將其拖曳至中間的畫面預覽(Viewer)視窗的Number search Basic 下方，接著到右邊的元件庫(Components)中，點重新命名(Rename)將其名字改為 StartButton。



步驟七：請在視窗右側的屬性(Properties)中，點選背景顏色(BackgroundColor)， 設定為Orange， FontSize 屬性改成20，(Shape)設定為 rounded， (Text)改成Click to start your game ，高度(Height)設定為 100 pixels。


步驟八：在視窗左側的元件面板(Palette)中，點選頁面布局(Layout)中的垂直排列(VerticalArrangement)元件，拖曳至中間的畫面預覽(Viewer)視窗Screen1中，接著按重新命名(Rename)將其名字改為 Gamepage，接著請在視窗右側的屬性(Properties)中，更改寬度(Width)和高度(Height)都設定為 Fill parent，水平對齊方式(AlignHorizontal)設定為Center。



步驟九：請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的標籤(Label)元件，將其拖曳至中間的畫面預覽(Viewer)視窗 Startpage 裡，接著請在視窗右側的屬性(Properties)中，將FontSize 屬性改成23，Text 屬性改成 Please find out 。


步驟十：請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的標籤(Label)元件，將其拖曳至中間的畫面預覽(Viewer)視窗 Please find out 的下方，並將其名字改為 Number，接著請在視窗右側的屬性(Properties)中，將FontBold 屬性打勾，FontSize 屬性改成23，Text 屬性改成 1，TextAlignment 屬性設定為Center，Width 屬性設定為 50 pixels。



步驟十一：請在視窗左側的元件面板(Palette)中，點選頁面布局(Layout)中的表格布局(TableArrangement)元件，將其拖曳至中間的畫面預覽(Viewer)視窗中1的下方，接著在視窗右側的屬性(Properties)中，將欄(Columns) 和列(Rows) 都改成5。



步驟十二：請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的按鈕(Button)元件，將其拖曳至中間的畫面預覽(Viewer)視窗 TableArrangement元件中，接著到右邊的元件庫(Components)中，點重新命名(Rename)將其名字改為 A1，再來請在視窗右側的屬性(Properties)中，將 Text 屬性中的文字刪除，寬度(Width)和高度(Height)都設定為 50 pixels。

重複上述步驟，直到做出25個按鈕為止(A1 A2~A5  B1~B5  C1~C5  D1~D5  E1~E5)如下圖

步驟十三：請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的標籤(Label)元件，將其拖曳至中間的畫面預覽(Viewer)視窗 TableArrangement元件下方，接著請在視窗右側的屬性(Properties)中，將FontSize 屬性改成23， Text 屬性改成 Time。

步驟十四：請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的標籤(Label)元件，將其拖曳至中間的畫面預覽(Viewer)視窗Time 的下方，並重新命名(Rename)將其名字改為 Time，接著請在視窗右側的屬性(Properties)中，將FontBold 屬性打勾， FontSize屬性改成23， Text 屬性改成0， TextColor 屬性設定為 Red。

步驟十五：加入時鐘。請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的時鐘(Clock)元件，將其拖曳至中間的畫面預覽(Viewer)視窗中，接著在視窗右側的屬性(Properties)中，將TimerEnabled 屬性打勾取消。

步驟十六：在視窗左側的元件面板(Palette)中，點選頁面布局(Layout)中的垂直排列(VerticalArrangement)元件，將其拖曳至中間的畫面預覽(Viewer)視窗Screen1中，接著重新命名(Rename)將其名字改為 Finishpage ，接著請在視窗右側的屬性(Properties)中，更改Width屬性設定為 Fill parent，AlignHorizontal屬性設定為Center。

步驟十七：請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的標籤(Label)元件，將其拖曳至中間的畫面預覽(Viewer)視窗 Finishpage中，並再重複做一次，接著到右邊的元件庫(Components)中，點選 Label4，並在視窗右側的屬性(Properties)中，將 FontSize 屬性改成30， Text 屬性改成 Well done! ， TextColor 屬性設定為白色；同理，點選 Label5，在視窗右側的屬性(Properties)中，將 FontSize 屬性改成30， Text 屬性改成 You completed in 。

步驟十八：請在視窗左側的元件面板(Palette)中，點選頁面布局(Layout)中的水平排列(HorizontalArrangement)元件，將其拖曳至中間的畫面預覽(Viewer)視窗中 You completed in 的下方，並將其名字改為Timeblock，接著點選使用者介面(User Interface)中的標籤(Label)元件，將其拖曳至中間的畫面預覽(Viewer)視窗 Finishpage中，並再重複做一次，接著到右邊的元件庫(Components)中，點選 Label6，並將其名字改為TimeNumber，再來請在視窗右側的屬性(Properties)中，將 FontSize 屬性改成30， Text 屬性中的文字刪除；同理， 也將Label7的 FontSize 屬性改成30， Text 屬性中的文字改成 .  seconds 。

步驟十九：請在視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的按鈕(Button)元件，將其拖曳至中間的畫面預覽(Viewer)視窗 Timeblock元件下方，接著在視窗右側的屬性(Properties)中，點選 BackgroundColor 屬性設定為Orange， FontSize 屬性改成24，Shape 屬性設定為 rounded， Text 屬性中的文字改成 Try again， Text Color 屬性，設定為 Dark Gray ，Height屬性設定為 100 pixels 。

步驟二十：請在視窗右側的元件庫(Components)中，點選 Finishpage，接著在視窗右側的屬性(Properties)中，將 Visible 屬性改成 hidden；同樣的，元件庫(Components)中的Gamepage也依此步驟改為hidden。

接下來我們就可以開始編寫程式囉！請點擊右上方的Blocks切換到程式頁面。

步驟二十一：
請在左側Blocks選單中點選Screen1下的Clock1，在彈出的拼圖式程式區塊中選取 when Clock1.Timer do，置於預覽視窗中。接著在左側Blocks選單中，點選Screen1下Gamepage中，選 TableArrangement裡面的 Time，在彈出的拼圖式程式區塊中選取 set Time.Text to，並卡入其中。再來在左側Blocks選單中點選Built-in下的Math，在彈出的拼圖式程式區塊中選取+，卡入其中。最後點選Screen1下Gamepage中，選 TableArrangement裡面的 Time，在彈出的拼圖式程式區塊中選取 Time.Text ，並卡入+的前面。並在將 Built-in下的Math，在彈出的拼圖式程式區塊中選取0，置於預覽視窗中，將"0"改成"1"並卡入+的後面。

步驟二十二：請在左側Blocks選單中點選Built-in下的Variables，在彈出的拼圖式程式區塊中選取 initialize global name to，置於預覽視窗中，並將"name "改為"K"，再從 Built-in下的Math，在彈出的拼圖式程式區塊中選取0，卡入其中。

步驟二十三：：請在左側Blocks選單中點選Built-in下的Variables，在彈出的拼圖式程式區塊中選取 initialize global name to，置於預覽視窗中，並將“name ”改為“ buttonlist “，再從左側Blocks選單中點選Built-in下的Lists，在彈出的拼圖式程式區塊中選取create empty list卡入其中。

變數K(表示紀錄點擊的算術運算值，初始值為0)
變數buttonlist(表示創建一個空的列表)

步驟二十四：請在左側Blocks選單中點選Built-in下的 Procedures，在彈出的拼圖式程式區塊中選取 to procedure do ，並將"procedure"改為"makenumber"，並在底下卡入由左側Blocks選單中點選Built-in下的Contral，在彈出的拼圖式程式區塊中選取 for each number from，並將number改成"i"，還有原本後面的數字1、5、1依序改成25、1、-1。(因為要從1取到25)，再來點選Built-in下的Variables，在彈出的拼圖式程式區塊中選取 set__to ，卡入do 右邊，並將空格處改為global K，再從 Built-in下的Math，在彈出的拼圖式程式區塊中選取random integer from，卡入其中，最後再將100改成Variables中的 get __，將空格處改為 i。

步驟二十五：請在左側Blocks選單中，點選Any component左邊的+，再選Any Button，在彈出的拼圖式程式區塊中選取 set Button.Text of component to ，再從左側Blocks選單中點選Built-in下的Lists，在彈出的拼圖式程式區塊中選取 select list item list index，再將Variables中的 get __，卡入共3個，空格依序改成 global buttonlist 、 global K、i，底下再從左側Blocks選單中點選Built-in下的Lists，在彈出的拼圖式程式區塊中選取 remove list item list index，一樣再將Variables中的 get __，卡入共2個，空格依序改成 global buttonlist 、 global K。

步驟二十六：請在左側Blocks選單中，點選Screen1下 Startpage 中的 StartButton，在彈出的拼圖式程式區塊中選取 when StartButton.Click do，置於預覽視窗中。
接著在左側Blocks選單中，點選Screen1下的 Startpage ，在彈出的拼圖式程式區塊中選取set Startpage.Visible to ，並在它後面嵌入Logic裡的false，再複製此步驟，然後將"Startpage"改成"Gamepage"，"false"改成"true"。

步驟二十七：請在左側Blocks選單中點選Built-in下的Variables，在彈出的拼圖式程式區塊中選取 set__to ，卡在Gamepage下方並將空格處改為global buttonlist，再從左側Blocks選單中點選Built-in下的Lists，在彈出的拼圖式程式區塊中選取 make a list，卡入to後面，又因為總共有25個按鈕要卡入，所以必須增加卡入的槽，先點選深藍色框框，在將item卡入list中，最後再將A1~E5 共25個按鈕卡入。

步驟二十八：請在左側Blocks選單中點選Built-in下的 Procedures，在彈出的拼圖式程式區塊中選取 call makenumber，並卡入 set global buttonlist to下方，接著在左側Blocks選單中點選Screen1下的Clock1，在彈出的拼圖式程式區塊中選取 set Clock1.TimerEnabled to，並卡入 call makenumber下方，在它後面再嵌入Logic裡的 true。

步驟二十九：請在左側Blocks選單中點選Built-in下的 Procedures，在彈出的拼圖式程式區塊中選取 to procedure do ，並將"procedure"改為"check"並增加一個卡入的槽，先點選深藍色框框，在將input卡入inputs中，並將"x"改為"btclick"。

步驟三十：請在左側Blocks選單中點選Built-in下的Contral，在彈出的拼圖式程式區塊中選取 if then 再來在左側Blocks選單中點選Built-in下的Math，在彈出的拼圖式程式區塊中選取 =，卡入其中。接著在左側Blocks選單中，點選Any component左邊的+，再選Any Button，在彈出的拼圖式程式區塊中選取 Button.Text of component to ，再將Variables中的 get __ 卡入，空格改成 btclick，再依起卡入=左邊，再來點選Screen1下Gamepage中，選 Number，在彈出的拼圖式程式區塊中選取 Number.Text ，並卡入=的後面。

步驟三十一：請在左側Blocks選單中點選Screen1下Gamepage中，選 Number，在彈出的拼圖式程式區塊中選取  set Number.Text to ，並卡入，並在將 Built-in下的Math，在彈出的拼圖式程式區塊中選取 +，卡入其中。再複製剛剛的 Number.Text 卡入+的左邊，再將 Built-in下的Math，在彈出的拼圖式程式區塊中選取 0，並將"0"改成"1"並卡入+的右邊。接著在左側Blocks選單中，點選Any component 下的Any Button，在彈出的拼圖式程式區塊中選取 set Button.Text of component to ，再複製剛剛的 get btclick 卡入其中，再從左側Blocks選單中點選Built-in下的Text，在彈出的拼圖式程式區塊中選取 "  "，卡入其中。

步驟三十二：請在左側Blocks選單中點選Built-in下的Contral，在彈出的拼圖式程式區塊中選取 if then 再來將 Built-in下的Math，在彈出的拼圖式程式區塊中選取 =，卡入其中，= 的左邊卡入，數字26，= 的右邊卡入剛剛的 Number.Text ，接著在左側Blocks選單中，點選Screen1下的 Gamepage ，在彈出的拼圖式程式區塊中選取set Gamepage.Visible to ，並在它後面嵌入Logic裡的false，再複製此步驟，然後將"Gamepage"改成"Finishpage"，"false"改成"true"，卡入，再將Timeblock下的 TimeNumber，在彈出的拼圖式程式區塊中選取  set TimeNumber.Text to ，並卡入，再複製剛剛的 Number.Text 卡入，再將"Number"改成"Time"卡入其中。

步驟三十三：監控25個按鈕。請在左側Blocks選單中，點選Screen1下Gamepage中，選 TableArrangement裡面的A1，在彈出的拼圖式程式區塊中選取 when A1.Click do，置於預覽視窗中。接著在左側Blocks選單中點選Built-in下的 Procedures，在彈出的拼圖式程式區塊中選取call check btclick，並卡入其中，再一樣從 Screen1下Gamepage中，點選 TableArrangement裡面的A1，在彈出的拼圖式程式區塊中選取 A1，並卡入 call check btclick 中。

重複上述步驟，直到做出A1~E5 (共有25個)，如下圖所示

步驟三十四：請在左側Blocks選單中，點選Screen1下Finishpage裡的Button1，在彈出的拼圖式程式區塊中選取when Button1.Click do，置於預覽視窗中。
接著點選Screen1下Finishpage，在彈出的拼圖式程式區塊中選取set Finishpage.Visible to ，卡入其中，並在它後面嵌入Logic裡的false，而再點選Screen1下Startpage，在彈出的拼圖式程式區塊中選取set Startpage.Visible to ，將其卡在Finishpage下方，並在它後面嵌入Logic裡的true。
解釋：按下Button1會重新開始遊戲，所以結束的畫面要隱藏，遊戲開始的畫面要顯示出來。

步驟三十五：
請在左側Blocks選單中，點選Screen1下Gamepage裡的Number，在彈出的拼圖式程式區塊中選取set Number.Text to，並在複製2個，分別將"Number"改成Time和TimeNumber，並在他們後面分別嵌入數字"1"、數字"0"、數字"0"，最後再點選Screen1下的Clock1，在彈出的拼圖式程式區塊中選取set Clock1.TimerEnable to ，將其卡在TimeNumber下方，並在它後面嵌入Logic裡的false。

恭喜完成此次範例程式!