App Inventor 2 的範例程式 -Squared Operator

遊戲內容： 

本遊戲是採取九宮格方式的運算式子，此遊戲為了降低難度僅採用乘法和加法觀念，玩家需要從遊戲中題目的6個答案去完整式子，各有3行和3列，其中會有2格為提示，玩家需要繼續完成其他7格，每格數字皆為1到9的數字，運算只能以直和橫的方式，不以斜的列為考慮! 

程式功能分析： 

設計一個遊戲，有3行3列共6個式子，式子中需填滿2個提示之外的其他7個空格。一開始按New Game可以啟動遊戲，按Finish檢查答案是否正確，按Answer就會將答案顯現，最後按New遊戲的按鈕重新開始新的題目。 

開發步驟： 

步驟一：請先新增一個名稱為「Squared_operator」的專案，按下確定後，即可進入應用程序發明家的設計 視窗。(註：專案名稱開頭不能是數字；專案名稱中可用底線但不能有空格或其它特殊字元)。

步驟二:點選組件(Components)中的Screen1，接著找到屬性(Properties)中水平對齊(AlignHorizontal)改為center。

步驟三：:到視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的按鈕(Button)元件，按住滑鼠不放將其拖曳至預覽(Viewer)中，點選組件(Components)，將Button1名稱改為new_game，接著找到屬性(Properties)中的背景顏色(BackgroundColor)屬性改為自己喜歡的顏色，範例以黃色為例，再依序找字型大小(FontSize)屬性改為30， Text 屬性，將方框中預設的文字改為New Game，最後找到字型校準(TextAlignment)屬性改為center。

步驟四:到視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的設計(Layout)將橫向排列(HorizontalArrangement)按住滑鼠不放將其拖曳至預覽(Viewer)中，點選屬性(Properties)中的高度(Height)改為50pixels。

步驟五:到視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的標籤(Label)元件，按住滑鼠不放將其拖曳至預覽(Viewer)中，總共新增7個，接著依序將名稱改為X1、Symbol1、X2、Symbol2、X3、Symbol3、ANS1，X為答案提示，Symbol為運算符號，ANS為運算答案，以X1為例，點選屬性(Properties)中的字型大小(FontSize)屬性改為20， Text 屬性，將方框中預設的文字清除，可見度(Visible)改為hidden，寬度(Width)高度(Height)各改為40pixels，X的屬性皆與X1相同。

步驟六:以Symbol1為例，點選屬性(Properties)中的字型大小(FontSize)屬性改為40，Text屬性，將方框中預設的文字清除，改為+，寬度(Width)高度(Height)個改為40pixels，Symbol的屬性皆與Symbol1相同，Symbol2、Symbol3的Text屬性依序改為×和=。 

步驟七:以ANS1為例，點選屬性(Properties)中的字型大小(FontSize)屬性改為25，Text屬性，將方框中預設的文字清除，寬度(Width)高度(Height)個改為40pixels，ANS的屬性皆與ANS1相同。

步驟八:到視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的文本框(TextBox)元件，按住滑鼠不放將其拖曳至預覽(Viewer)中，以TextBox1為例，點選屬性(Properties)中的字型大小(FontSize)屬性改為25，將Hint屬性的方框中預設文字清除，寬度(Width)高度(Height)各改為40pixels，TextBox的屬性皆與TextBox1相同。

步驟九:重複步驟四，接著再到視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的標籤(Label)元件，按住滑鼠不放將其拖曳至預覽(Viewer)中，總共新增6個，接著依序將名稱改為Symbol4、black1、Symbol5、black2、Symbol6、Label1，重複步驟六，但為了版面對齊，其中Label1的寬度(Width)改為80，Symbol的屬性皆與Symbol1相同，Symbol4、Symbol5、Symbol6的Text屬性依序改為+、×和+。

以black1為例，找到屬性(Properties)中的背景顏色(BackgroundColor)屬性改為黑色(Black)，再將Text屬性方框中預設的文字清除，最後寬度(Width)高度(Height)各改為40pixels，black的屬性皆與black1相同。

步驟十:重複步驟四到步驟八，接著依序將名稱改為X4、Symbol7、X5、Textbox4、Symbol8、X6、Textbox5、Symbol9、ANS2，而Symbol7、Symbol8、Symbol9的Text依序改為+、+、= ，其中再到X4點選屬性(Properties)中的可見度(Visible)改為showing，這裡我們設定X4和X8為題目提示。

步驟十一:重複步驟九，接著依序將名稱改為Symbol10、black3、Symbol11、black4、Symbol12、Label2，重複步驟六，Symbol的屬性皆與Symbol1相同，Symbol10、Symbol11、Symbol12的Text屬性依序改為×、+和×。

步驟十二:重複步驟四到步驟八，接著依序將名稱改為X7、Textbox6、Symbol13、X8、Symbol14、X9、Textbox7、Symbol15、ANS3，而Symbol13、Symbol14、Symbol15的Text依序改為×、+、= ，其中再到X8點選屬性(Properties)中的可見度(Visible)改為showing，這裡我們設定X4和X8為題目提示。

步驟十三:到視窗左側的元件面板(Palette)中，點選使用者介面(UserInterface)中的標籤(Label)元件，按住滑鼠不放將其拖曳至預覽(Viewer)中，總共新增6個，接著依序將名稱改為Symbol16、

Label3、Symbol17、Label4、Symbol18、Label5，Symbol的屬性皆與Symbol1相同，其中Label3、Label4的寬度(Width)高度(Height)各改為40pixels，但Label5的寬度(Width)請改為80pixels。

步驟十四:到視窗左側的元件面板(Palette)中，點選使用者介面(UserInterface)中的標籤(Label)元件，按住滑鼠不放將其拖曳至預覽(Viewer)中，總共新增6個，接著依序將名稱改為ANS4、

Label6、ANS5、Label7、ANS6、Label8，ANS的屬性皆與ANS1相同，其中Label6、Label7的寬度(Width)高度(Height)各改為40pixels，但Label8的寬度(Width)請改為80pixels。

步驟十五：:到視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的按鈕(Button)元件，按住滑鼠不放將其拖曳至預覽(Viewer)中，點選組件(Components)，將Button名稱改為Finish，接著找到屬性(Properties)中的背景顏色(BackgroundColor)屬性改為自己喜歡的顏色，範例以黑色為例，再依序找字型大小(FontSize)屬性改為30， Text 屬性，將方框中預設的文字改為Finish，最後找到字型校準(TextAlignment)屬性改為center。

步驟十六:到視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的標籤(Label)元件，按住滑鼠不放將其拖曳至預覽(Viewer)中，將名稱改為result，作為當按下Finish後顯示玩家是否答對，最後字型大小(FontSize)屬性改為30。

步驟十七：:到視窗左側的元件面板(Palette)中，點選使用者介面(User Interface)中的按鈕(Button)元件，按住滑鼠不放將其拖曳至預覽(Viewer)中，點選組件(Components)，將Button名稱改為Answer，接著找到屬性(Properties)中的背景顏色(BackgroundColor)屬性改為自己喜歡的顏色，範例以黑色為例，再依序找字型大小(FontSize)屬性改為30， Text 屬性，將方框中預設的文字改為Answer，最後找到字型校準(TextAlignment)屬性改為center。

恭喜你，我們終於將版面設計完成囉!現在就開始程式的部分吧!

步驟十八：請在左側Blocks選單中點選new_game，在彈出的拼圖式程式區塊中選取when new_game Click do。
步驟十九:請在左側Blocks選單中點選X1，在彈出的拼圖式程式區塊中選取set X1.Visible to 

然後再到logic中選取false接在後面，再複製6個，將名稱分別改為X2、X3、X5、X6、X7、X9。

解釋:一開始我們必須讓標準答案先隱藏。

步驟二十:請在左側Blocks選單中點選TextBox1，在彈出的拼圖式程式區塊中選取setTextBox1.Visible to 然後再到logic中選取true接在後面，再複製6個，將名稱分別改為TextBox2、TextBox3、TextBox4、TextBox5、TextBox6、TextBox7

其中再點選X4，在彈出的拼圖式程式區塊中選取set X4.Text to移至TextBox3的下方，再點選text的 " "接在後方， 最後點選X8，在彈出的拼圖式程式區塊中選取set X8.Text to移至TextBox6的下方，再點選text的 " "接在後方。

解釋:我們讓空格顯現，讓玩家可以輸入。

步驟二十一:請在左側Blocks選單中點選RESULT，在彈出的拼圖式程式區塊中選取set RESULT.Text to 然後再點選Text的 " "接在後方，再複製7個，將名稱分別改為TextBox1、TextBox2、TextBox3、TextBox4、TextBox5、TextBox6、TextBox7。

步驟二十二:請在左側Blocks選單中點選control，在彈出的拼圖式程式區塊中選取for each number from，將數字依序改為1、9、1

解釋:讓步驟二十三中的九個式子，從1到9運算。

步驟二十三:請在左側Blocks選單中點選TextBox1，在彈出的拼圖式程式區塊中選取set TextBox1.Text to，再複製8個，將名稱分別改為TextBox2、TextBox3、TextBox4、TextBox5、TextBox6、TextBox7、TextBox8、TextBox9，然後在左側Blocks選單中點選Math，在彈出的拼圖式程式區塊中選取random integer from 1 to 100，將100改為9，再複製8個接到set TextBox1.Text to後方，如下圖所示。

解釋:我們讓每格的數字只有個位數，同學可依自己喜歡更改數字。

步驟二十四:請在左側Blocks選單中點選ANS1，在彈出的拼圖式程式區塊中選取set ANS1.Text to 再複製5個，名稱分別為ANS2、ANS3、ANS4、ANS5、ANS6，依照先前版面配置的運算完成，如下圖紅線處。

步驟二十五:請在Blocks選單中點選Finish，在彈出的拼圖式程式區塊中選取when Finish Click do，再到Control選取if then至於其中，最後必須讓你輸入的數字(TextBox)和本來提示(X)等於答案，再依序放入再and的空格中。

步驟二十六:請在Blocks選單中點選RESULT在彈出的拼圖式程式區塊中選取set RESULT.Text to，再到Text點選" "，若答案相符顯示Congratulations! Got it，若答案不符程式則顯示Sorry! You are wrong。

步驟二十七:請在Blocks選單中點選Answer，在彈出的拼圖式程式區塊中選取when Answer Click do，請在左側Blocks選單中點選TextBox1，在彈出的拼圖式程式區塊中選取setTextBox1.Visible to ，將名稱分別改為TextBox2、TextBox3、TextBox4、TextBox5、TextBox6、TextBox7，然後再到logic中選取false接在後面，最後請點選X1，在彈出的拼圖式程式區塊中選取set X1.Visible to ，然後再到logic中選取true接在後面，再複製6個，將名稱分別改為X2、X3、X4、X5、X6、X7、X8、X9。

恭喜完成此次範例程式!