網頁

2022年6月29日 星期三

手機 App 程式設計- AppInventor2 -井字遊戲(人和電腦對玩)，使用元件清單

主題

本篇是延續 「手機 App 程式設計- AppInventor2 -井字遊戲」的作品，修改為 :人和電腦可以對玩。原本祇有「O」方或「X」方勝利二種結局，現在加入「平手」，即九宮格都滿格，雙方都無法連成一條線。

學習目標

學習如何使用 TableArrangement(表格配置)元件、元件清單 和 Anycomponent 的程式設計技巧。 

功能

  • 可以選擇誰先玩，使用者或電腦。先玩的符號預設為Ｏ，後玩的符號為X。如果九宮格中有三個可以連成一條線，就判斷誰勝利。如果九宮格已滿，仍然無法分出勝負，就出現平手的訊息。
  • 可重複玩。

執行畫面











素材

本 app的 icon (圖示)，可自己繪製或網路搜尋。以下是阿旺師繪製的圖片:


符號:
o.jpg

x.jpg

none.jpge

進入 Appinventor 

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


選 「Create Apps」。


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

你應該先看此篇文章 「手機 App 程式設計- AppInventor2 -井字遊戲」。

開啟原來的舊專案(My Projects/My projects)，選舊專案，如 tictactoe，按一下，打開此專案。另存新專案(My Projects/ Save project  as... )，輸入新專案的名稱，如 tictactoe_u2c，按 「OK」鈕 。專案的名稱只能使用大小寫字母、數字及「 _」符號，名稱的第一個字元必須是英文字母，不能使用中文字。

Designer  (畫面編排)

Screen1:




Screen1 元件相關屬性表

元件

類別

屬性

功能

Screen1

 

Title:井字遊戲

AppName: tictactoe_u2c，可以改成 「井字遊戲」(出現在手機上面的App名稱)

Icon :tictactoe_u2c.gif。

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

HorizontalArrangement_Set

Layout(介面配置)

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

Width:Fill Parent (填滿)

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

Label_First

User Interface(使用者介面)

Text:誰先玩?

標籤

CheckBox_User

User Interface

Text:使用者

核取方塊(複選盒)

CheckBox_Computer

User Interface

Text:電腦

核取方塊(複選盒)

Button_Play

User Interface

Text:開始玩

按鈕

HorizontalArrangement_Result

Layout(介面配置)

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

Width:Fill Parent (填滿)

水平配置元件

Label_Who

User Interface(使用者介面)

Text:先玩的符號為Ｏ

標籤

Label_Result

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 , 會出問題。本來相似的元件可以用這種方法快速複製建造出來，但本例不適用。

輸入文字

 先玩，符號為O。 滿格，平手 結果 確定

Blocks(程式設計)拼塊

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

Screen1:


----------------------------------------------------------------
說明:
CheckBoxes是由CheckBox_User、CheckBox_Computer這二個元件組成的清單。
ButtonsInTable是由Button1.....Button9這9個元件組成的清單。
---------------------------------------------------------------










----------------------------------------------------------------
說明:
全域性變數 Player_Order 清單，表示玩者的順序，例如 使用者先玩，其內容為 "使用者","電腦"。
全域性變數 Who_Win，誰勝利，"O"、"X"、"滿格,平手" 有三種情形。預設為空字串。
全域性變數 First_Play，誰先玩?
全域性變數 PutNumber，九宮格中有多少格已被放置符號。
全域性變數 UserPlayF，使用者旗標，如果是 true，表示輪到使用者可以玩，否則就是電腦玩。
----------------------------------------------------------------

---------------------------------------------------------------
說明:
Screen1_initialize :當Screen1 出現時，隱藏 HorizontalArrangement_Result、TableArrangement1這二個元件( visible(可見性) 設為 false )。
---------------------------------------------------------------

---------------------------------------------------------------
說明:
CheckBox 本來可以複選，經過上述程式，改成為單選，因為一次祇能一位玩，是使用者或電腦先玩。
如何找到 any CheckBox.Changed?
Any component /Any CheckBox

如何找到 CheckBox.Checked 和 set CheckBox.Checked ?
Any component /Any CheckBox






當任意複選盒(目前被點到CheckBox) 的狀態被改變時，如果是 Checked(有選中)，就把 CheckBoxes 清單的其它項目的Checked 都改成 false(未選中(取)的狀態)。
---------------------------------------------------------------


----------------------------------------------------------------
說明:
Clear程序用來設定預設值。9個按鈕的圖片都是空的。
ButtonsInTable是一個清單，內有9個按鈕。把每一個按鈕的Image皆設為 none.jpg。
----------------------------------------------------------------



----------------------------------------------------------------
說明:
Button_Replay(再玩一次)此按鈕被按下去，呼叫Clear程序。
----------------------------------------------------------------

----------------------------------------------------------------
說明:
Button_Play(開始玩)此按鈕被按下去，如果有選「誰先玩」才呼叫Clear程序。
----------------------------------------------------------------

----------------------------------------------------------------
說明:
如果 x1.Image不是空白 且 x1.Image = x2.Image  且 x1.Image=   x3.Image， 即 x1-x2-x3 連成一條線，然後  如果 x1是 o.jpg，就傳回 "o"，否則，就傳回 "x"。
如果x1、x2、x3 三格圖形沒有一樣，就傳回空字串。
如何找到Button.Image ?
Any component /Any Button

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

----------------------------------------------------------------
說明:
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 如果是連成一條線，就顯示誰勝利。
----------------------------------------------------------------

--------------------------------------------------------------
說明:
當任意按鈕被點選時，如果  UserPlayF 為真 (表示輪到使用者玩)而且Who_Win是空子串(表示尚 未分出誰是勝利者且未滿格) 然後 
    如果圖片是 none.jpg(表示此格未放符號) ，然後
                如果 先玩者是"使用者"  就放 "o.jpg" 否則 放 "x.jpg" (因為先玩者是固定放 "O"此符號)
                呼叫 Result程序，判斷誰是勝利者。
                呼叫 Computer_Play 程序，輪到電腦玩。
   ----------------------------------------------------------------

--------------------------------------------------------------
說明:
Computer_Play程序換電腦玩井字遊戲。

要放的位置是由1到9之間產生的一個亂數。
當  尚未找到位置 時 (not FindF)重複下述的動作。
      如果此位置的圖片是 none.jpg(表示此格未放符號) ，然後
                如果 先玩者是"電腦"  就放 "o.jpg" 否則 放 "x.jpg" (因為先玩者是固定放 "O"此符號)
                 FindF設為 true, 表示找到位置放。
                呼叫 Result程序，判斷誰是勝利者。
                 UserPlayF設為true, 換使用者玩。
--------------------------------------------------------------

程式改良

本範例電腦是用亂數來玩，可修改成讓電腦有思考能力來玩 井字遊戲。
張貼者： 於
標籤：