2014年12月25日 星期四

W12:數列遊戲


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屬性設定serifTextAlignment 屬性設定為CenterWidth屬性設定為 Fill parentHeight屬性設定為 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 屬性改成23Text 屬性改成 Please find out


步驟十:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的標籤(Label)元件,將其拖曳至中間的畫面預覽(Viewer)視窗 Please find out 的下方,並將其名字改為 Number,接著在視窗右側的屬性(Properties)中,將FontBold 屬性勾,FontSize 屬性改成23Text 屬性改成 1TextAlignment 屬性設定為CenterWidth 屬性設定為 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 parentAlignHorizontal屬性設定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 屬性中的文字刪除;同理 也將Label7FontSize 屬性改成30 Text 屬性中的文字改成 seconds


步驟十九:請在視窗左側的元件面板(Palette)中,點選使用者介面(User Interface)中的按鈕(Button)元件將其拖曳至中間的畫面預覽(Viewer)視窗 Timeblock元件下方,接著在視窗右側的屬性(Properties),點選 BackgroundColor 屬性設定為Orange FontSize 屬性改成24Shape 屬性設定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。



恭喜完成此次範例程式!

沒有留言:

張貼留言