2014年12月25日 星期四

第九章 數字遊戲

數字遊戲
1.1專題介紹:數字遊戲
  數字遊戲是一個讓數字1~25隨機排列,玩家要點選最小的1依序點到25,並且程式會計時顯示使用者花費的時間,而在遊戲結束後可再回到主目錄再次進行遊戲,是一個測試反應能力的遊戲,也可讓玩家認識、熟悉數字排列。



1.2專題重點
能夠利用按鈕元件
能夠利用計時器
能夠使用變數

2專題實作:數字遊戲
2.1專題總覽
  執行程式後,按Click to start your game開始進行遊戲,遊戲開始後便會開始計時,使用者便可以開始依序點選數字1~25,直到點到數字25時遊戲結束。

2.2專題建置
1.新增專案:NumberGames
按下Start new projects,新增「專題名稱:NumberGames」的專案。
進入App inventorDesigner視窗
(註:專案名稱開頭不能是數字;專案名稱中可用底線,但是不能使用空格或其他特殊字元)
2.更改元件Screen1屬性
點選視窗右側的元件屬性(Properties)裡面的水平對齊(AlignHorizontal),選取置中(Center),這是為了讓所有的物件會以中心線排列。再來點選背景顏色(BackgroundColor),選取Light Gray

讓所有物件置中排列:Properties/AlignHorizontal/Center
背景顏色/灰色:Properties/BackgroundColor/LightGray

2.3介面配置
本專題共有三個頁面:主畫面(StartPage)、遊戲進行畫面(GamePage)、遊戲結束畫面(FinishPage),設計時都是把這三個頁面都放置於同一個Screen元件中,而將同一個頁面的元件都放在一個VerticalArrangement元件內,要顯示某一個頁面時,就設定該頁面VerticalArrangement元件的Visible屬性為true,再設定其他頁面VerticalArrangement元件的Visible屬性為false,就達成顯示指定頁面的功能。
主畫面(StartPage)
主畫面(StartPage)的所有元件都位於StartPage元件裡面。


3.增加元件StartPage(主畫面)
點選視窗左側的組件面板(Palette)裡面的Layout,選擇直向排列(VerticalArrangement)元件,按住滑鼠不放將其拖曳至中間的工作面板(Viewer)視窗中。接著點選Components下方的Rename,將其名字改為StartPage

增加主畫面(StartPage)Palette/Layout/VerticalArrangement(拖曳至Viewer)
重新命名:Components/VerticalArrangement/RenameStartPage

4.更改元件StartPage屬性
在視窗右側的元件屬性(Properties)中,更改寬度(Width)和高度(Height)都設定為Fillparent,水平對齊(AllignHorizontal)設定為Center

使畫面填充整個頁面:Properties/Width/Fillparent
Properties/Height/Fillparent
讓所有元件置中:Properties/AllignHorizontal/Center


5.增加元件Label1(主畫面之標題),並修改其屬性
在視窗左側的組件面板(Palette)中,點選用戶介面(User Interface)中的文字(Label)元件,將其拖曳至中間的工作面板(Viewer)視窗StartPage裡。在視窗右側的元件屬性(Properties)中,將粗體(FontBold)屬性打勾,字體大小(FontSize)屬性改成20,文字(Text)屬性改成Number search Basic,字體(FontTypeface)屬性設定為serif,文字對齊(Text Alignment)屬性設定為Center,寬度(Width)屬性設定為Fillparent,高度(Height)屬性設定為100pixels

增加元件Label1Palette/UserInterface/Label(拖曳至Viewer/StartPage)
Label1屬性更改:Properties/FontBold:勾選
FontSize20
FontTypefaceserif
TextNumbersearchBasic
TextAlignmentcenter
WidthFillparent
Height100pixels

6.增加元件StartButton(主畫面之開始遊戲按鈕)
在視窗左側的組件面板(Palette)中,點選用戶介面(User Interface)中的按鈕(Button)元件,將其拖曳至中間的工作面板(Viewer)視窗StartPageNumber search Basic的下方。接著點選Components下方的Rename,將其名字改為StartButton

增加元件Label1Palette/UserInterface/StartButton
                (拖曳至Viewer/StartPage/Label1的下方)
重新命名:Components/VerticalArrangement/Button1/RenameStartButton

7.修改元件StartButton(主畫面之開始遊戲按鈕)之屬性
在視窗右側的元件屬性(Properties)中,點選背景顏色(BackgroundColor)Orange,字體大小(FontSize)屬性改成20,形狀(Shape)選取圓角(rounded),文字(Text)屬性改成Click to start your game,字體(FontTypeface)屬性設定為serif,文字對齊(Text Alignment)屬性設定為Center,高度(Height)屬性設定為100pixels

StartButton屬性更改:Properties/BackgroundColorOrange
FontSize20
FontTypefaceserif
Shaperounded
TextClick to start your game
TextAlignmentcenter
Height100pixels

遊戲進行畫面(GamePage)
遊戲進行畫面(GamePage)的所有元件都位於GamePage元件裡面。




8.增加元件GamePage,並更改其屬性
點選視窗左側的組件面板(Palette)裡面的Layout,選擇直向排列(VerticalArrangement)元件,按住滑鼠不放將其拖曳至中間的工作面板(Viewer)視窗Screen1(StartPage的上方)。接著點選Components下方的Rename,將其名字改為GamePage。在視窗右側的元件屬性(Properties)中,更改寬度(Width)和高度(Height)都設定為Fillparent,水平對齊(AllignHorizontal)設定為Center

增加遊戲畫面(GamePage)Palette/Layout/VerticalArrangement
                         (拖曳至Viewer中的Screen1StartPage的上方)
重新命名:Components/VerticalArrangement/RenameGamePage
使畫面填充整個頁面:Properties/Width/Fillparent
                    Properties/Height/Fillparent
讓所有元件置中:Properties/AllignHorizontal/Center

9.增加元件Label2(遊戲畫面之標題),並修改其屬性
在視窗左側的組件面板(Palette)中,點選用戶介面(UserInterface)中的文字(Label)元件,將其拖曳至中間的工作面板(Viewer)視窗GamePage裡。在視窗右側的元件屬性(Properties)中,字體大小(FontSize)屬性改成23,文字(Text)屬性改成Please find out

增加元件Label2Palette/UserInterface/Label(拖曳至Viewer/GamePage)
Label2屬性更改:Properties/FontSize23
TextPleasefindout

10.增加元件Number(遊戲畫面之要尋找的數字),並修改其屬性
在視窗左側的組件面板(Palette)中,點選用戶介面(UserInterface)中的文字(Label)元件,將其拖曳至中間的畫面預覽(Viewer)視窗GamePage裡,元件Label2(Pleasefindout)的下方。接著點選Components下方的Rename,將其名字改為Number。在視窗右側的元件屬性(Properties)中,將粗體(FontBold)屬性打勾,字體大小(FontSize)屬性改成23,文字(Text)屬性改成1,文字對齊(TextAlignment)屬性設定為Center,寬度(Width)屬性設定為50pixels

增加元件Label3Palette/UserInterface/Label
                (拖曳至Viewer/GamePageLabel2Pleasefindout的下方)
重新命名:Components/VerticalArrangement/Label3/RenameNumber
Number屬性更改:Properties/FontBold:勾選
FontSize23
Text1
TextAlignmentCenter
Width50pixels

11.增加一個元件TableArrangement(表格排列方式),並更改其屬性
在視窗左側的組件面板(Palette)中,點選Layout中的表格排列(TableArrangement)元件,將其拖曳至中間的工作面板(Viewer)視窗GamePage裡,元件Number(1)的下方。在視窗右側的元件屬性(Properties)中,將列(Columns)和行(Rows)都改成5

增加元件TableArrangementPalette/Layout/TableArrangement
                           (拖曳至Viewer/GamePageNumber1的下方)
更改屬性:Properties/Columns/5
          Properties/Rows/5

12.製作25個按鈕(A1~A5B1~B5C1~C5D1~D5E1~E5)
在視窗左側的組件面板(Palette)中,點選用戶介面(UserInterface)中的按鈕(Button)元件,將其拖曳至中間的工作面板(Viewer)視窗TableArrangement元件裡。接著點選Components下方的Rename,將其名字改為A1。在視窗右側的元件屬性(Properties)中,將文字(Text)屬性中的文字刪除,寬度(Width)和高度(Height)都設定為50pixels

增加元件ButtonPalette/UserInterface/Button
                 (拖曳至Viewer/GamePage/TableArrangement)
重新命名:Components/VerticalArrangement/Button1/RenameA1
按鈕屬性更改:Properties/Text
Width50pixels
Height50pixels

重複此步驟,製作出A1~A5B1~B5C1~C5D1~D5E1~E5,共25個按鈕(如下圖)

13.增加元件Label3(遊戲畫面之時間的標題),並修改其屬性
在視窗左側的組件面板(Palette)中,點選用戶介面(UserInterface)中的文字(Label)元件,將其拖曳至中間的工作面板(Viewer)視窗GamePage裡,元件TableArrangement的下方。在視窗右側的元件屬性(Properties)中,將字體大小(FontSize)屬性改成23,文字(Text)屬性改成Time

增加元件Label3Palette/UserInterface/Label(拖曳至Viewer/GamePage
(拖曳至Viewer/GamePageTableArrangement的下方)
Label3屬性更改:Properties/FontSize23
TextTime
14.增加元件Time(遊戲畫面之秒數),並修改其屬性
在視窗左側的組件面板(Palette)中,點選用戶介面(UserInterface)中的文字(Label)元件,將其拖曳至中間的工作面板(Viewer)視窗GamePage裡,元件Time的下方。接著點選Components下方的Rename,將其名字改為Time。在視窗右側的元件屬性(Properties)中,將粗體(FontBold)屬性打勾,將字體大小(FontSize)屬性改成23,文字(Text)屬性改成0,文字顏色(TextColor)屬性選取Red

增加元件Label4Palette/UserInterface/Label(拖曳至Viewer/GamePage
(拖曳至Viewer/GamePage/TableArrangementLabel2Time的下方)
重新命名:Components/VerticalArrangement/Label4/RenameTime
Time屬性更改:Properties/FontBold:勾選
FontSize23
Text0
TextColorRed

15.加入時鐘
在視窗左側的組件面板(Palette)中,點選Sensors中的時鐘(Clock)元件,將其拖曳至中間的工作面板(Viewer)視窗裡。在視窗右側的元件屬性(Properties)中,將啟用計時(TimerEnabled)屬性取消打勾。

增加元件ClockPalette/Sensors/Clock(拖曳至Viewer)
Clock屬性更改:Properties/TimerEnabled:取消勾選




遊戲結束畫面(FinishPage)
遊戲結束畫面(FinishPage)的所有元件都位於FinishPage元件裡面。



16.增加元件FinishPage(遊戲結束畫面),並更改其屬性
點選視窗左側的組件面板(Palette)裡面的Layout,選擇直向排列(VerticalArrangement)元件,按住滑鼠不放將其拖曳至中間的工作面板(Viewer)視窗Screen1(GamePage的上方)。接著點選Components下方的Rename,將其名字改為FinishPage。在視窗右側的元件屬性(Properties)中,更改寬度(Width)和高度(Height)都設定為Fillparent,水平對齊(AllignHorizontal)設定為Center

增加遊戲結束畫面(FinishPage)Palette/Layout/VerticalArrangement
(拖曳至Viewer中的Screen1GamePage的上方)
重新命名:Components/VerticalArrangement/RenameFinishPage
使畫面填充整個頁面:Properties/Width/Fillparent
Properties/Height/Fillparent
讓所有元件置中:Properties/AllignHorizontal/Center


17.增加元件Label4Label5(遊戲結束畫面之文字),並修改其屬性
在視窗左側的組件面板(Palette)中,點選用戶介面(UserInterface)中的文字(Label)元件,將其拖曳至中間的工作面板(Viewer)視窗FinishPage裡,重複此動作兩次。在視窗右側的元件屬性(Properties)中,點選Label4,確定字體反白,為編輯狀態,將字體大小(FontSize)屬性改成30,文字(Text)屬性改成Welldone!,文字顏色(TextColor)屬性選取White;點選Label5,將字體大小(FontSize)屬性改成30,文字(Text)屬性改成You completed in

增加元件Label4Palette/UserInterface/Label(拖曳至Viewer/FinishPage)
增加元件Label5Palette/UserInterface/Label(拖曳至Viewer/FinishPage)
Label4屬性更改:Properties/FontSize30
TextWelldone!
TextColorWhite
Label5屬性更改:Properties/FontSize30
TextYou completed in

18.增加元件TimeblockTimeNumberLabel5(遊戲結束畫面顯現秒數的文字區塊),並修改其屬性
在視窗左側的組件面板(Palette)中,點選Layout中的橫向排列(HorizontalArrangement)元件,將其拖曳至中間的工作面板(Viewer)視窗FinishPageLabel5Youcompletedin的下方。接著點選Components下方的Rename,將其名字改為Timeblock。在視窗左側的組件面板(Palette)中,點選用戶介面(UserInterface)中的文字(Label)元件,將其拖曳至中間的工作面板(Viewer)視窗FinishPage裡的Timeblock中,重複此動作兩次。接著點選Components下方的Rename,將Label6的名字改為TimeNumberLabel7則無需更改。在視窗右側的元件屬性(Properties)中,點選Label6,將字體大小(FontSize)屬性改成30,文字(Text)屬性中的文字刪除;點選Label7,將字體大小(FontSize)屬性改成30,文字(Text)屬性改成.seconds

增加元件HorizontalArrangementPalette/Layout/HorizontalArrangement
                    (拖曳至Viewer/FinishPageLabel5Youcompletedin的下方)
重新命名:Components/HorizontalArrangement/RenameTimeblock
增加元件Label6Palette/UserInterface/Label(拖曳至Viewer/FinishPage)
增加元件Label7Palette/UserInterface/Label(拖曳至Viewer/FinishPage)
重新命名:Components/Timeblock/Label6/RenameTimeNumber
TimeNumber屬性更改:Properties/FontSize30
                                 Text
Label7屬性更改:Properties/FontSize30
                           Text.seconds

19.製作重新開始按鈕
在視窗左側的組件面板(Palette)中,點選用戶介面(UserInterface)中的按鈕(Button)元件,將其拖曳至中間的工作面板(Viewer)視窗FinishPage元件裡,Timeblock元件的下方。在視窗右側的元件屬性(Properties)中,將背景顏色(BackgroundColor)屬性選取Orange,字體大小(FontSize)屬性改成24,形狀(Shape)屬性選取圓角(rounded),文字(Text)屬性中的文字改成Try again,文字顏色(TextColor)屬性選取DarkGray,高度(Height)都設定為100pixels

增加元件Button1Palette/UserInterface/Button
                  (拖曳至Viewer/FinishPage/Timeblock元件的下方)
按鈕屬性更改:Properties/BackgroundColorOrange
FontSize24
Shaperounded
TextTryagain
TextColorDarkGray
Height100pixels

20.將遊戲啟動時未要看見的畫面隱藏
Components中,點選元件FinishPage,看向視窗最右側的元件屬性(Properties)中,將Visible屬性取消勾選,這是為了在程式起始時看不到FinishPage;同理,GamePage也依相同步驟將Visible屬性取消勾選,這也是為了在程式起始時看不到GamePage

選取元件FinishPageComponents/FinishPage
更改屬性:Properties/Visible/取消勾選
選取元件GamePageComponents/GamePage
更改屬性:Properties/Visible/取消勾選


使用元件及其重要屬性
名稱
屬性
說明
Screen1
AlignHorizontal/Center
BackgroundColor/LightGray

StartPage
AlignHorizontalCenter
WidthFillparent
HeightFillparent
主畫面
Label1
FontBold:勾選
FontSize20
FontTypefaceserif
TextNumbersearchBasic
TextAlignmentcenter
WidthFillparent
Height100pixels
主畫面標題:Number search Basic
StartButton
BackgroundColorOrange
FontSize20
FontTypefaceserif
ShaperoundedTextClicktostartyourgame
TextAlignmentcenter
Height100pixels
主畫面之遊戲開始按鈕
GamePage
Width/Fillparent
Height/Fillparent
AllignHorizontal/Center
Visible/hidden
遊戲畫面
Label2
FontSize23
TextPleasefindout
遊戲畫面標題
Number
FontBold:勾選
FontSize23
Text1
TextAlignmentCenter
Width50pixels
要找尋的數字
TableArrangement
Columns/5
Rows/5
排放按鈕之表格
A1~E5
Text
Width50pixels
Height50pixels
要按之按鈕
Label3
Properties/FontSize23
TextTime
時間標題
Time
FontBold:勾選
FontSize23
Text0
TextColorRed
所花費之時間
Clock
TimerEnabled:取消勾選
計時器
FinishPage
Properties/Width/Fillparent
Height/Fillparent
AllignHorizontal/Center
Visible/hidden
遊戲結束畫面
Label4
FontSize30
TextWelldone!TextColorWhite
遊戲結束畫面之標題
Label5
FontSize30
TextYoucompletedin
遊戲畫面之文字
Timeblock

所花費之時間
TimeNumber
FontSize30
Text
秒數
Label7
FontSize30
Text.seconds
單位
Button1
BackgroundColorOrangeFontSize24
Shaperounded
TextTryagain
TextColorDarkGray
Height100pixels
重新開始按鈕

2.4專題分析和程式拼塊說明
21.製作一個會顯示時間的計時器
在左側的Blocks中,點選Clock1,在拼圖式程式區塊中選取when Clock1.Timer do,置於預覽視窗中。在左側的Blocks中,點選Screen1中的GamePage中的TableArrangement1裡面的Time,在拼圖式程式區塊中選取set Time.Text to,並且放在when Clock1.Timer do的裡面,也就是do的旁邊。在左側的Blocks中,點選Built-in中的Math,在拼圖式程式區塊中選取+,並且接在set Time.Text to的後面。在左側的Blocks中,點選Screen1中的GamePage中的TableArrangement1裡面的Time,在拼圖式程式區塊中選取Time.Text,並且卡入+的前面。在左側的Blocks中,點選Built-in中的Math,在拼圖式程式區塊中選取0,並且把 0 改成 1 卡入+的後面。

拉出方塊:Blocks/Clock1/whenClock1.Timerdo
Blocks/Screen1/GamePage/TableArrangement1/Time/setTime.Textto
Blocks/Built-in/Math/+
Blocks/Screen1/GamePage/TableArrangement1/Time/Time.Text
Blocks/Built-in/Math/0
將方塊 0 改成 1


22.設一個變數K,表示記錄點擊的算術運算值,初始值為0
在左側的Blocks中,點選Built-in中的Variables,在拼圖式程式區塊中選取initialize global name to,置於預覽視窗中。並且把name改成K。在左側的Blocks中,點選Built-in中的Math,在拼圖式程式區塊中選取0,並且放置在initialize global K to的後面。

拉出方塊:Blocks/Built-in/Variables/initialize global name to
name改成K
Blocks/Built-in/Math/0


23.創建一個空的清單,在隨機排列後填入按鈕時使用
在左側的Blocks中,點選Built-in中的Variables,在拼圖式程式區塊中選取initialize global name to,置於預覽視窗中。並且把 name 改成 buttonlist 。在左側的Blocks中,點選Built-in中的List,在拼圖式程式區塊中選取create empty list,並且放置在initialize global buttonlist to的後面。

拉出方塊:Blocks/Built-in/Variables/initializeglobalnameto
name 改成 buttonlist
Blocks/Built-in/List/createemptylist



24.使變數有值(1~25)
在左側的Blocks中,點選Built-in中的Procedures,在拼圖式程式區塊中選取to procedure do,置於預覽視窗中。並且把 procedure 改成 makenumber 。在左側的Blocks中,點選Built-in中的Control,在拼圖式程式區塊中選取for each number from,並且放置在to make number do的裡面,也就是do的旁邊。並且將 number 改成 i from 1 改成 25 to 5 改成 1 by 1 改成 -1 。在左側的Blocks中,點選Built-in中的Variables,在拼圖式程式區塊中選取set    to,並且放置在for each number from的裡面,也就是do的旁邊。在左側的Blocks中,點選Built-in中的Variables,在拼圖式程式區塊中選取get   。並且將空格改成i,放置在random integer from 1t o 50的裡面,也就是to的右邊,數字50原本的位置。

拉出方塊:Blocks/Built-in/Procedures/to procedure do
procedure 改成 makenumber
Blocks/Built-in/Control/for each number from
number 改成 i
from 1 改成 25 to 5 改成 1 by 1 改成 -1
Blocks/Built-in/Variables/set   to
將空格改成globalK
Blocks/Built-in/Math/random integer from
Blocks/Built-in/Variables/get
將空格改成i

25.把要放入按鈕中的數字做排序
在左側的Blocks中,點選Any component中的Any Button,在拼圖式程式區塊中選取set Button.Text of component,放置在set global K to的下方。在左側的Blocks中,點選Built-in中的List,在拼圖式程式區塊中選取select list item list index,將其擺放至set Button.Text of componentcomponent右邊。在左側的Blocks中,點選Built-in中的Variables,在拼圖式程式區塊中選取get   ,選取3次,個別擺放至listindexto的右邊。並且將list旁的get   改成 global buttonlist 、將index旁的get   改成 global K 、將to旁的get   改成 i 。在左側的Blocks中,點選Built-in中的List,在拼圖式程式區塊中選取remove list item list index,並且放置在set Button.Text of component的下方。在左側的Blocks中,點選Built-in中的Variables,在拼圖式程式區塊中選取get   ,選取2次,分別擺放至listindex的右邊。並且將list旁的get    改成 global buttonlist 、將index旁的get    改成 global K

拉出方塊:Blocks/Anycomponent/AnyButton/set Button.Text of component
Blocks/Built-in/List/select list item list index
Blocks/Built-in/Variables/get
list旁放入一個get  改成 global buttonlist
index旁放入一個get   改成 global K
to旁放入一個get   改成 i
Blocks/Built-in/List/remove list item list index
Blocks/Built-in/Variables/get
list旁放入一個get  改成 global buttonlist
index旁放入一個get  改成 global K


26.在開始遊戲後,顯現出開始遊戲的畫面,隱藏主畫面
在左側的Blocks中,點選Screen1中的StartButton,在拼圖式程式區塊中選取when StartButton.Click do,置於預覽視窗中。在左側的Blocks中,點選Screen1中的StartPage,在拼圖式程式區塊中選取set StartPage.Visible to,放入when StartButton.Click do中,也就是do的右邊。在左側的Blocks中,點選Built-in中的Logic,在拼圖式程式區塊中選取false,放入set StartPage.Visible to的右邊。同理的,在左側的Blocks中,點選Screen1中的GamePage,在拼圖式程式區塊中選取set GamePage.Visible to,放在set StartPage.Visible to的下方。在左側的Blocks中,點選Built-in中的Logic,在拼圖式程式區塊中選取true,放入set GamePage.Visible to的右邊。

拉出方塊:Blocks/Screen1/StartButton/when StartButton.Click do
Blocks/Screen1/StartPage/set StartPage.Visible to
Blocks/Built-in/Logic/false
Blocks/Screen1/GamePage/set GamePage.Visible to
Blocks/Built-in/Logic/true



27.把數字放在按鈕上
在左側的Blocks中,點選Built-in中的Variables,在拼圖式程式區塊中選取set    to,放在set Gamepage.Visible to的下方。並且將空格改成 global buttonlist 。在左側的Blocks中,點選Built-in中的Lists,在拼圖式程式區塊中選取makealist,放在set global buttonlist to的右邊。為了讓清單有25個項目,因此要增加可卡入的槽,點選深藍色框框,將item拖曳到list/item的下方,重複至總數達到25個。在左側的Blocks中,點選Screen1中的GamePage裡面的TableArrangement1,在拼圖式程式區塊中選取A1,放在makealist的右邊。重複動作到A1~E5,共25個按鈕皆放入。

拉出方塊:Blocks/Built-in/Variables/set  to
將空格改成 globalbuttonlist
Blocks/Built-in/Lists/makealist
增加makealist卡入的槽(25)
點選深藍色框框,將item放在list/item的下方,重複至總數達到25
Blocks/Screen1/GamePage/TableArrangement1/A1(~E5)


28.遊戲開始時開始計算時間
在左側的Blocks中,點選Built-in中的Procedures,在拼圖式程式區塊中選取call make number,放在set global buttonlist to的下方。在左側的Blocks中,點選Screen1中的Clock1,在拼圖式程式區塊中選取set Clock1.TimeEnabled to,放在call make number的下方。在左側的Blocks中,點選Built-in中的Logic,在拼圖式程式區塊中選取true,放在set Clock1.TimeEnabled to的右邊。

拉出方塊:Blocks/Built-in/Procedures/call make number
Blocks/Screen1/Clock1/set Clock1.TimeEnabled to
Blocks/Built-in/Logic/true




29.做一個副程式,讓主程式變的比較簡潔
在左側的Blocks中,點選Built-in中的Procedures,在拼圖式程式區塊中選取to procedure do,置於預覽視窗中。點選深藍色框框,將input放在inputs的裡面,並將 x 改成 btclick

拉出方塊:Blocks/Built-in/Procedures/to procedure do
procedure 改成 check
增加input可卡入的槽:
點選深藍色框框,將input放在inputs的裡面,並將 x 改成 btclick

30.當按鈕按下去時和要所指定的數字一樣
在左側的Blocks中,點選Built-in中的Control,在拼圖式程式區塊中選取ifthen,放入to check do裡面。在左側的Blocks中,點選Built-in中的Math,在拼圖式程式區塊中選取=,放在if的右邊。在左側的Blocks中,點選Any component中的Any Button,在拼圖式程式區塊中選取Button.Text of component to,放在=的左邊。在左側的Blocks中,點選Built-in中的Variables,在拼圖式程式區塊中選取get   ,將其空格改成btclick ,再放Button.Text of component to的右邊。在左側的Blocks中,點選Screen1中的GamePage裡面的Number,在拼圖式程式區塊中選取Number.Text,放在=的右邊。

拉出方塊:Blocks/Built-in/Control/ifthen
Blocks/Built-in/Math/=
Blocks/Anycomponent/AnyButton/Button.Textofcomponentto
Blocks/Built-in/Variables/get 
將空格改成btclick
Blocks/Screen1/GamePage/Number/Number.Text

31.讓要題目的數字遞增,也讓按鈕的數字消失
在左側的Blocks中,點選Screen1中的GamePage中的Number,在拼圖式程式區塊中選取set Number.Text to,放入if/then的裡面。在左側的Blocks中,點選Built-in中的Math,在拼圖式程式區塊中選取+,放在set Number.Text to的右邊。在左側的Blocks中,點選Screen1中的GamePage中的Number,在拼圖式程式區塊中選取Number.Text,放+的左邊。在左側的Blocks中,點選Built-in中的Math,在拼圖式程式區塊中選取0,將0改成1,放在+的右邊。在左側的Blocks中,點選Any component中的Any Button,在拼圖式程式區塊中選取set Button.Text of component to,放set Number.Text to的下方。在左側的Blocks中,點選Built-in中的Variables,在拼圖式程式區塊中選取get   ,放在of component的右邊。在左側的Blocks中,點選Built-in中的Text,在拼圖式程式區塊中選取"",放在to的右邊。

拉出方塊:Blocks/Screen1/GamePage/Number/set Number.Text to
Blocks/Built-in/Math/+
Blocks/Screen1/GamePage/Number/Number.Text
Blocks/Built-in/Math/0
0改成1
Blocks/Anycomponent/AnyButton/set Button.Text of component to
Blocks/Built-in/Variables/get 
將空格改成btclick
Blocks/Built-in/Text/" "

32.1~25都選取完後,進到遊戲結束畫面,並在畫面顯示所花費之時間
在左側的Blocks中,點選Built-in中的Control,在拼圖式程式區塊中選取if/then,放入to check do裡面,if/then的下面。在左側的Blocks中,點選Built-in中的Math,在拼圖式程式區塊中選取=,放在剛拉下的if/thenif的右邊。在左側的Blocks中,點選Built-in中的Math,在拼圖式程式區塊中選取0,將0改成26放在等號的右邊。在左側的Blocks中,點選Screen1中的GamePage裡面的Number,在拼圖式程式區塊中選取Number.Text,放在等號的右邊。在左側的Blocks中,點選Screen1中的GamePage,在拼圖式程式區塊中選取set GamePage.Visible to,放在if/then的裡面,then的右邊。在左側的Blocks中,點選Built-in中的Logic,在拼圖式程式區塊中選取false,放在set GamePage.Visible to的右邊。在左側的Blocks中,點選Screen1中的FinishPage,在拼圖式程式區塊中選取set FinishPage.Visible to,放在set GamePage.Visible to的下方。在左側的Blocks中,點選Built-in中的Logic,在拼圖式程式區塊中選取true,放在set FinishPage.Visible to的右邊。在左側的Blocks中,點選Screen1中的Timeblock裡面的TimeNumber,在拼圖式程式區塊中選取set TimeNumber.Text to,放在set FinishPage.Visible to的下方。在左側的Blocks中,點選Screen1中的GamePage裡面的Time,在拼圖式程式區塊中選取Time.Text,放在set TimeNumber.Text to的右邊。

拉出方塊:Blocks/Built-in/Control/if-then
Blocks/Built-in/Math/=
Blocks/Built-in/Math/0
0改成26
Blocks/Screen1/GamePage/Number/Number.Text
Blocks/Screen1/GamePage/setGamePage.Visibleto
Blocks/Built-in/Logic/false
Blocks/Screen1/FinishPage/setFinishPage.Visibleto
Blocks/Built-in/Logic/true
Blocks/Screen1/Timeblock/TimeNumber/setTimeNumber.Textto
Blocks/Screen1/GamePage/Time/Time.Text




33.當按鈕按下時,在左側的Blocks中,點選Screen1中的GamePage裡面的TableArrangement下面的A1,在拼圖式程式區塊中選取when A1.Click do,置於預覽視窗中。在左側的Blocks中,點選Built-in中的GamePage裡面的Procedures,在拼圖式程式區塊中選取call check btclick,放在when A1.Click do的裡面。在左側的Blocks中,點選Screen1中的GamePage裡面的TableArrangement下面的A1,在拼圖式程式區塊中選取A1,放在call checkbt click的右邊。

拉出方塊:Blocks/Screen1/GamePage/TableArrangement/A1/whenA1.Clickdo
Blocks/Built-in/Procedures/callcheckbtclick
Blocks/Screen1/GamePage/TableArrangement/A1/A1


重複此步驟25次,做出A1~E5,共25個,如下圖所示。


34.按下按鈕時會重新開始遊戲,所以要跳出遊戲結束畫面,進入主畫面
在左側的Blocks中,點選Screen1中的FinishPage裡面的Button1下面的A1,在拼圖式程式區塊中選取when Button1.Click do,置於預覽視窗中。在左側的Blocks中,點選Screen1中的FinishPage,在拼圖式程式區塊中選取when Button1.Click do,放在when Button1.Click do的裡面。在左側的Blocks中,點選Built-in中的Logic,在拼圖式程式區塊中選取false,放在set FinishPage.Visible to的右邊。在左側的Blocks中,點選Screen1中的StartPage,在拼圖式程式區塊中選取set StartPage.Visible to,放在set FinishPage.Visible to的下面。在左側的Blocks中,點選Built-in中的Logic,在拼圖式程式區塊中選取true,放在set StartPage.Visible to的右邊。

拉出方塊:Blocks/Screen1/FinishPage/Button1/when Button1.Click do
Blocks/Screen1/FinishPage/set FinishPage.Visible to
Blocks/Built-in/Logic/false
Blocks/Screen1/StartPage/set StartPage.Visible to
Blocks/Built-in/Logic/true

35.當遊戲重來時的初始設定
在左側的Blocks中,點選Screen1中的GamePage裡面的Number,在拼圖式程式區塊中選取set Number.Text to,放在set StartPage.Visible to的下面。在左側的Blocks中,點選Built-in中的Math,在拼圖式程式區塊中選取0,將0改成1,放在set Number.Text to的右邊。在左側的Blocks中,點選Screen1中的GamePage裡面的Time,在拼圖式程式區塊中選取set Time.Text to,放在set Number.Text to的下面。在左側的Blocks中,點選Built-in中的Math,在拼圖式程式區塊中選取0,放在set Number.Text to的右邊,將0改成1。在左側的Blocks中,點選Screen1中的Timeblock裡面的TimeNumber,在拼圖式程式區塊中選取set TimeNumber.Text to,放在set Time.Text to的下面。在左側的Blocks中,點選Built-in中的Math,在拼圖式程式區塊中選取0,放在set TimeNumber.Text to的右邊。在左側的Blocks中,點選Screen1中的Clock1,在拼圖式程式區塊中選取set Clock1.TimerEnable to,放在set TimeNumber.Text to的下面。在左側的Blocks中,點選Built-in中的Logic,在拼圖式程式區塊中選取false,放在set Clock1.TimerEnable to的右邊。

拉出方塊:Blocks/Screen1/GamePage/Number/setNumber.Textto
Blocks/Built-in/Math/0
0改成1
Blocks/Screen1/GamePage/Time/setTime.Textto
Blocks/Built-in/Math/0
Blocks/Screen1/Timeblock/TimeNumber/setTimeNumber.Textto
Blocks/Built-in/Math/0
Blocks/Screen1/Clock1/setClock1.TimerEnableto
Blocks/Built-in/Logic/false

3.其他應用
1.簡單:簡易計時器
2.普通:數字改成英文字母或注音的遊戲
3.進階:欲選取的數字為變數排列,使順序為隨機,不為1~25
完整程式碼:

程式專案檔QRcode


手機執行檔QRcode









3 則留言:

  1. 作者已經移除這則留言。

    回覆刪除
  2. 影音解說網址:https://youtu.be/gSc6v8QwV8U
    原始碼(.aia)下載連結:https://drive.google.com/file/d/0Bz_3MvZ2YjRnY25QbjdZVjl1dHc/view?usp=sharing
    執行檔(.apk)下載連結:https://drive.google.com/file/d/0Bz_3MvZ2YjRneGcxLWtGUmR4ZFE/view?usp=sharing

    Ted Lee
    URL:https://sites.google.com/site/lct4246/
    FB:https://www.facebook.com/ted.lee.10420321
    Blog:http://lct4246.blogspot.tw/

    回覆刪除
  3. 請問如果要做一個label顯示按的次數
    和 每點一次數字(不管有沒有按對)
    數字就隨機換位置
    該如何改程式呢?

    回覆刪除