網頁

2022年6月26日 星期日

手機 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

1Screen元件就是1個螢幕 (畫面)

HorizontalArrangement1

Layout(介面配置)

AlignVertical:Center:2(垂直對齊,居中:2 )

Width:Fill Parent (填滿)

水平配置元件,讓裏面的元件可以水平對齊。

Label1

User Interface(使用者介面)

Text:假設O符號先玩

標籤

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的資料結構。