2014年4月25日 星期五

App Inventor 2 的範例程式 - GotMath(1) - GUI 介面設計

GotMath是一支數學遊戲程式。

程式並非只有一種寫法,本範例只是提供參考,歡迎同學挑戰!

程式功能分析:
程式一開始會提供一個題目與六個數字,玩家必須利用這六個數字,在五個步驟中,利用加減乘除的運算求出與題目相符的數字。




例如:上圖程式題目為目標值為64,下方可用的數字組合有 3, 20, 10, 23, 1 和 8 六個數。玩家必須先選一個數,再選加減乘除四個運算元中的一個,再選第二個數字後完成第一個運算。在所有數字只能使用一次且都要使用的條件下,組合出目標值64。這個遊戲玩法簡單,但若要寫出這樣的遊戲,除了程式的四則運算邏輯要清楚外,會多次使用到亂數取值與條件判斷IF的程式技巧,適合已經學會基礎程式設計的進階挑戰!

開發步驟:


步驟一首先設計出Screen1,如下圖





(1) TA_Program

動作:點選Layout中的TableArrangement元件,將其命名為TA_Program。
屬性:
  • Columns設為2 / Rows 設為6
  • Visible設為showing
  • Width設為326 pixels
目的:可以整齊放置12個Label元件。

(2) LB_Q

動作:點選User Interface中的Label元件,將其命名為LB_Q。
屬性:
  • BackgroundColor設為Red
  • FontSize設為30
  • Text設為 Q
  • TextAlignment設為center
  • TextColor設為White
  • Width設為50 pixels / Height設為50 pixels
目的:顯示Q。介面美化。

(3) LB_Question

動作:點選User Interface中的Label元件,將其命名為LB_Question。
屬性:
  • BackgroundColor設為Pink
  • FontSize設為30
  • Text清除預設值
  • TextAlignment設為centerWidth設為268 pixels / Height設為50 pixels
目的:顯示題目。

(4) LB_T1~LB_T5

動作:點選User Interface中的Label元件,將其分別命名為LB_T1~LB_T5。
屬性:
  • Text分別設為 1.、2.、3.、4.、5.
  • TextAlignment設為center
目的:顯示運算式的編號。美化介面。

(5) LB_F1~LB_F5

動作:點選User Interface中的Label元件,將其分別命名為LB_F1~LB_F5。
屬性:
  • FontSize設為30
  • Text清除預設值
  • TextAlignment設為center
  • Width選擇Fill parent / Height設為50。
目的:顯示運算式的編號。美化介面。

(6) VA_Control

動作:點選Layout中的VerticalArrangement元件,將其命名為VA_Control。
目的:可以整齊放置3個TableArrangement元件。

(7) TA_Number

動作:點選Layout中的TableArrangement元件,將其命名為TA_Number。
屬性:
  • Columns設為3 / Rows 設為2
目的:可以整齊放置6個數字按鈕元件。

(8) BN_N1~BN_N6

動作:點選User Interface中的Button元件,將其分別命名為BN_N1~BN_N6。
屬性:
  • BackgroundColor設為Light Gray
  • Enabled取消選擇
  • FontSize設為15
  • Shape設為rounded
  • Text分別設為 N1、N2、N3、N4、N5、N6
  • TextAlignment設為center
  • TextColor設為White
  • Width設為104 pixels / Height設為50 pixels
目的:顯示六個數字以利遊戲的進行。

(9) TA_Operate

動作:點選Layout中的TableArrangement元件,將其命名為TA_Number。
屬性:
  • Columns設為4 / Rows 設為1
目的:可以整齊放置4個運算元按鈕元件。

(10) BN_Add、BN_Sub、BN_Mul、BN_Div

動作:點選User Interface中的Button元件,將其分別命名為
          BN_Add、BN_Sub、BN_Mul、BN_Div。
屬性:
  • BackgroundColor設為Light Gray
  • Enabled取消選擇
  • FontBold需要勾選
  • FontSize設為25
  • Shape設為oval
  • Text分別設為 +、-、×、÷
  • TextAlignment設為center
  • TextColor設為White
  • Width設為78 pixels / Height設為60 pixels
目的:顯示4個運算元以利數值的運算。

(11) TA_Control

動作:點選Layout中的TableArrangement元件,將其命名為TA_Control。
屬性:
  • Columns設為5 / Rows 設為1
目的:可以整齊放置5個控制按鈕元件。

(12) BN_New、BN_Ans、BN_Back、BN_Clean、BN_Ready

動作:點選User Interface中的Button元件,將其分別命名為
          BN_New、BN_Ans、BN_Back、BN_Clean、BN_Ready。
屬性:
  • BackgroundColor
    • BN_New與BN_Ready設為Dark Gray
    • 其它設為Light Gray
  • Enabled除了BN_New外取消選擇
  • FontBold需要勾選
  • FontSize設為15
  • Shape設為rounded
  • Text分別設為 新遊戲、答案、復原、清除、狀態
  • TextAlignment設為center
  • TextColor設為White
  • Width設為
    • BN_New與BN_Ready設為70 pixels
    • 其它設為60 pixels
  • Height設為60 pixels 
目的:BN_New–新遊戲;BN_Ans–顯示程式對於題目的計算過程;
          BN_Back–退回上一步;BN_Clean–清除所有操作紀錄;
          BN_Ready–顯示當前遊戲狀態(加油:遊戲中 / 恭喜:過關 / 有誤:答案與題目不相符)。

(註) 在本程式中BN_Ready只起到了一個Label的作用,但為了排版,仍以Buttoon建構

GotMath程式第一部分 - GUI介面設計完成

沒有留言:

張貼留言