手機 App 程式設計- AppInventor2 -骰子遊戲

題目

電腦和玩家自持有3個骰子，按下「擲骰子」按鈕，6個骰子會隨機出現點數，並計算玩家和電腦所得到的點數和。

執行畫面

原始畫面:

按了「擲骰子」按鈕的結果:

素材

本 app的 icon (圖示)，可自己繪製或網路搜尋。

在Google 輸入關鍵字，如 dice  icon， 選擇 「圖片」，可找到相關的小圖示。

找到圖片，按下去，再按右鍵，選「另存圖片」，就可使用。但要注意著作財產權。

下面為筆者自製的6個骰子的圖形。

進入 Appinventor 

Google 輸入 appinventor 。選 「MIT　App Inventor」。

選 「Create Apps」。

網址為 :http://ai2.appinventor.mit.edu/

開新專案(project)

My projects / Start new project 。

輸入專案的 名稱，如 dice，按 「OK」鈕。

 專案的名稱只能使用大小寫字母、數字及「 _」符號，名稱的第一個字元必須是英文字母，不能使用中文字。

Designer (畫面編排)

Screen1(螢幕或稱為畫面):

AppName:dice，可以改成 「擲骰子」(出現在手機上面的App名稱，可用中文)。

Icon : 可以上傳1個 icon(圖示) (可選背景透明的圖示)，此程式在手機上面的App 圖示。

按 「 Upload File」鈕。

按「選擇檔案」，選一個圖片檔，如 dice1.jpg，按「開啟」，再按「OK」鈕以上傳此圖示。

dice2.jpg、dice3.jpg ...  、dice6.jpg ，這5張圖片，依此類推。

Screen1 元件相關屬性表

有關各個元件的詳細介紹，請參考 App Inventor 中文學習網，https://sites.google.com/a/appinventor.tw/appinvetor/ 。

元件	類別	屬性		功能
Screen1		Title:骰子遊戲AppName:dice(出現在手機上面的App名稱) Icon :dice.gif，可以上傳1個icon圖示。		1個Screen元件就是1個畫面(螢幕)
Button_dice	User Interface(使用者介面)	Width:Fill Parent(填滿) Text:擲骰子 TextAlignment:center:1		按鈕
Canvas_computer	Drawing and Animation(繪圖動畫)	Height:Fill Parent Width:Fill Parent		畫布，提供各式繪圖功能
ImageSprite1	Drawing and Animation	Picture(圖片):dice1.jpg	圖像精靈
ImageSprite2	Drawing and Animation	Picture:dice2.jpg	圖像精靈
ImageSprite3	Drawing and Animation	Picture:dice3.jpg	圖像精靈
Label1	User Interface(使用者介面)	Width:Fill Parent Text:電腦 TextAlignment:center:1		標籤
Canvas_player	Drawing and Animation	Height:Fill Parent Width:Fill Parent		畫布，提供各式繪圖功能
ImageSprite4	Drawing and Animation	Picture:dice4.jpg		圖像精靈
ImageSprite5	Drawing and Animation	Picture:dice5.jpg		圖像精靈
ImageSprite6	Drawing and Animation	Picture:dice6.jpg		圖像精靈
Label2	User Interface(使用者介面)	Width:Fill Parent Text:玩家 TextAlignment:center:1		標籤
HorizontalArrangement1	Layout(介面配置)	Width:Fill Parent		水平配置元件，讓裏面的元件可以水平對齊
Label_ComputerScore	User Interface(使用者介面)	Width:Fill Parent Text:電腦:		標籤
Label_PlayerScore	User Interface(使用者介面)	Width:Fill Parent Text:玩家:		標籤

完整 Blocks(程式設計)拼塊

Screen1