2014年5月6日 星期二

App Inventor 2 的範例程式 -Squared Operator


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

程式功能分析: 
設計一個遊戲,有33列共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個,接著依序將名稱改為X1Symbol1X2Symbol2X3Symbol3ANS1X為答案提示,Symbol為運算符號,ANS為運算答案,以X1為例,點選屬性(Properties)中的字型大小(FontSize)屬性改為20 Text 屬性,將方框中預設的文字清除,可見度(Visible)改為hidden,寬度(Width)高度(Height)各改為40pixelsX的屬性皆與X1相同。
步驟六:Symbol1為例,點選屬性(Properties)中的字型大小(FontSize)屬性改為40Text屬性,將方框中預設的文字清除,改為+,寬度(Width)高度(Height)個改為40pixelsSymbol的屬性皆與Symbol1相同,Symbol2Symbol3Text屬性依序改為×= 
步驟七:ANS1為例,點選屬性(Properties)中的字型大小(FontSize)屬性改為25Text屬性,將方框中預設的文字清除,寬度(Width)高度(Height)個改為40pixelsANS的屬性皆與ANS1相同。
步驟八:到視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的文本框(TextBox)元件,按住滑鼠不放將其拖曳至預覽(Viewer)中,以TextBox1為例,點選屬性(Properties)中的字型大小(FontSize)屬性改為25,將Hint屬性的方框中預設文字清除,寬度(Width)高度(Height)各改為40pixelsTextBox的屬性皆與TextBox1相同。
步驟九:重複步驟四,接著再到視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的標籤(Label)元件,按住滑鼠不放將其拖曳至預覽(Viewer)中,總共新增6個,接著依序將名稱改為Symbol4black1Symbol5black2Symbol6Label1,重複步驟六,但為了版面對齊,其中Label1的寬度(Width)改為80Symbol的屬性皆與Symbol1相同,Symbol4Symbol5Symbol6Text屬性依序改為+×+
black1為例,找到屬性(Properties)中的背景顏色(BackgroundColor)屬性改為黑色(Black),再將Text屬性方框中預設的文字清除,最後寬度(Width)高度(Height)各改為40pixelsblack的屬性皆與black1相同。
步驟十:重複步驟四到步驟八,接著依序將名稱改為X4、Symbol7、X5、Textbox4、Symbol8、X6、Textbox5、Symbol9、ANS2,而Symbol7、Symbol8、Symbol9的Text依序改為+、+、= ,其中再到X4點選屬性(Properties)中的可見度(Visible)改為showing,這裡我們設定X4和X8為題目提示。
步驟十一:重複步驟九,接著依序將名稱改為Symbol10black3Symbol11black4Symbol12Label2,重複步驟六,Symbol的屬性皆與Symbol1相同,Symbol10Symbol11Symbol12Text屬性依序改為×+×
步驟十二:重複步驟四到步驟八,接著依序將名稱改為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
Label3Symbol17Label4Symbol18Label5Symbol的屬性皆與Symbol1相同,其中Label3Label4的寬度(Width)高度(Height)各改為40pixels,但Label5的寬度(Width)請改為80pixels
步驟十四:到視窗左側的元件面板(Palette)中,點選使用者介面(UserInterface)中的標籤(Label)元件,按住滑鼠不放將其拖曳至預覽(Viewer)中,總共新增6個,接著依序將名稱改為ANS4
Label6ANS5Label7ANS6Label8ANS的屬性皆與ANS1相同,其中Label6Label7的寬度(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。
恭喜完成此次範例程式!

3 則留言:

  1. 能和您要source code参考嗎?
    感謝!

    Ted

    ted9921@kpvs.tp.edu.tw

    回覆刪除
  2. 感謝Roger Yen提供source code,我們的課程網站已連結至貴站:

    Ted's Bu BU(泰布布)
    https://sites.google.com/site/lct4246/home/courses/ai2

    回覆刪除