手機 App 程式設計- AppInventor2 -井字遊戲

主題

        設計一個井字遊戲(Tictactoe)。

功能

• 預設為 O 方先玩。如果九宮格中有三個可以連成一條線，就判斷誰勝利。
• 可重複玩。

執行畫面

素材

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

符號:

o.jpg

x.jpg

none.jpge

進入 Appinventor 

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

選 「Create Apps」。

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

開新專案，Projects/Start new projec，輸入專案的名稱，如 tictactoe，按 「OK」鈕 。
(專案的名稱只能使用大小寫字母、數字及「 _」符號，名稱的第一個字元必須是英文字母，不能使用中文字。)

Designer  (畫面編排)

Screen1:

Screen1 元件相關屬性表

元件	類別	屬性	功能
Screen1		Title:井字遊戲 AppName: tictactoe，可以改成 「井字遊戲」 (出現在手機上面的App名稱) Icon :tictactoe.jpg。	1個Screen元件就是1個螢幕 (畫面)。
HorizontalArrangement1	Layout(介面配置)	AlignVertical:Center:2(垂直對齊，居中:2 )。 Width:Fill Parent (填滿)	水平配置元件，讓裏面的元件可以水平對齊。
Label1	User Interface(使用者介面)	Text:假設Ｏ符號先玩	標籤
Button_Replay	User Interface	Text:再玩一次	按鈕
TableArrangement1	Layout(介面配置)	Columns(行數):3 Width:Fill Parent (填滿) Rows(列數):3	表格配置元件，設定行數和列數。如本例可放9個元件。
Button1	User Interface	Height:100 pixels Width: 100 pixels Text:	按鈕
Button2	User Interface	Height:100 pixels Width: 100 pixels Text:	按鈕
Button3	User Interface	Height:100 pixels Width: 100 pixels Text:	按鈕
Button4	User Interface	Height:100 pixels Width: 100 pixels Text:	按鈕
Button5	User Interface	Height:100 pixels Width: 100 pixels Text:	按鈕
Button6	User Interface	Height:100 pixels Width: 100 pixels Text:	按鈕
Button7	User Interface	Height:100 pixels Width: 100 pixels Text:	按鈕
Button8	User Interface	Height:100 pixels Width: 100 pixels Text:	按鈕
Button9	User Interface	Height:100 pixels Width: 100 pixels Text:	按鈕
Notifier1	User Interface		對話框元件

註:在TableArrangement，  如果選 Button1， 按 Ctrl+C, 再按 Ctrl +V , 會出問題。本來相似的元件可以用這種方法快速複製建造出來，但本例不適用。

輸入文字

 方獲勝! 結果 確定

Blocks(程式設計)拼塊

跟元件有關的拼塊，要先點選該元件後，再選擇是那一個拼塊;不是元件的拼塊，可以根據拼塊的顏色，判斷是屬於那一個類別。

Screen1:

----------------------------------------------------------------

說明:

全域性變數CircleF，O符號的旗標預設為false。當按鈕按下後，再把值反過來，就變成 true，即一開始按下去是 O符號先出現。

全域性變數 Who_Win，誰勝利，預設為空字串，即沒有勝利者。

----------------------------------------------------------------

----------------------------------------------------------------

說明:

Clear程序用來設定預設值。9個按鈕的圖片都是空的。

----------------------------------------------------------------

----------------------------------------------------------------

說明:

Screen1_initialize :當Screen1 出現時，呼叫Clear程序。

Button_Replay此按鈕被按下去，呼叫Clear程序。

----------------------------------------------------------------

----------------------------------------------------------------

說明:

Result程序用來顯示結果，即判斷誰勝利。

以Button1為主，1-2-3、1-4-7、1-5-9 如果是連成一條線，就顯示誰勝利。

以Button2為主，2-5-8 如果是連成一條線，就顯示誰勝利。

以Button3為主，3-5-7 、3-6-9如果是連成一條線，就顯示誰勝利。

以Button4為主，4-5-6 如果是連成一條線，就顯示誰勝利。

以Button7為主，7-8-9 如果是連成一條線，就顯示誰勝利。

Button1.Image不是空白 且 Button1.Image = Button2.Image  且 Button1.Image=   Button3.Image

即 1-2-3 連成一條線。

----------------------------------------------------------------

--------------------------------------------------------------

說明:

當按了 Button1，

如果沒有勝利者而且Button1的圖片是空的 然後

     把CircleF反相，真的變假的，假的變真的。
     如果 CircleF是真的，Button1的圖片是 O

     否則 Button1的圖片是 X

      呼叫 Result程序，判斷誰是勝利者。

下面 Button2 .... Button9 的 Click 事件程序，請參考上面。

----------------------------------------------------------------

程式改良

可修改成和電腦玩，電腦玩法最簡單的演算法就是使用亂數。

類似畫面:

比較難的是使用Game Tree的資料結構。