網頁

2017年11月15日 星期三

手機 App 程式設計- AppInventor2-畫布的應用-擲球 (Fling ball)

範例圖片:

建立新專案
在  Projects , 選 「Start  new project」。

輸入 專案的名稱,名稱只能使用大小寫字母、數字及「 _」符 號,名稱的第一個字元必須是英文字母,很像 Visual Basic 命名規則,但不能使用中文字。
我輸入 : flingball,按 「OK」。
將 Screen1 元件的 title改為 擲球

在  Drawing and Animation  選單下面 選 「Canvas」(畫布)元件。



選 Canvas1  此元件,右邊的 Properties 屬性視窗,有很多此元件的屬性可改。
  • Width 改成 Fill parent (實際寬度將以所包含元件的母元件寬度來自動決定)。
  • Height:Fill parent。

在  Drawing and Animation  選單,選「ImageSprite」元件,拖曳到介面設計區,此元件名稱預設為ImageSprite1。

選 ImageSprite1此元件,右邊的 Properties 屬性視窗,有很多此元件的屬性可改。

Picture:None(表示 沒有圖片),按下面的 Upload File,按「選擇檔案」,選 一張圖片上傳,如「ball-s.gif」。

結果如下:

將  ImageSprite1此元件的 Picture屬性設為 剛才 上傳的圖片 ball-s.gif。

選 Canvas1  此元件,將 BackgroudColor 設為 Pink。



按螢幕 右上方的 Blocks, 切換到 Blocks 模式。

選 ImageSprite1,按 「when  ImageSprite1.Flung 」 此block。(flung 是 fling 的被動式,fling:擲 )

選 ImageSprite1,按 「set  ImageSprite1.heading to 」 此block。
滑鼠移到 heading 上面 出現 「get heading」,將此 block 插入到 「set  ImageSprite1.heading to 」的後面。

將 「set  ImageSprite1.heading to 」移入到 「when  ImageSprite1.Flung 」 此block內。
選 ImageSprite1,按 「set  ImageSprite1.speed to 」 此block。
選 Built-in 的 Math,按 「相乘 」block,並插入到 「set  ImageSprite1.speed to 」的後面。

滑鼠移到 speed 上面 出現 「get speed」,將此 block 插入到 「相乘  」block內。

選 Built-in 的 Math,按 「number」block,並插入到 「相乘」block 的第2個位置。

 輸入 20
選 ImageSprite1,按 「set  ImageSprite1.Rotates to 」 此block。
選 Built-in 的 Logic,按 「true」block,並插入到 「set  ImageSprite1.Rotates to 」的後面。

「when  ImageSprite1.Flung 」 此block內容如下:
選 ImageSprite1,按 「  when ImageSprite1.EdgeReached 」 此block。
選 ImageSprite1,按 「call ImageSprite1.Bounce」 此block並將之插入到 「  when ImageSprite1.EdgeReached 」 此block內。

滑鼠移到 edge  上面 出現 「get edge」,將此 block 插入到 「call ImageSprite1.Bounce」block的 edge 後面。
 
下面的 Show Warnings 都是0,表示沒有錯誤。

如果 Connect /Emulator ,是灰色
請先按 Connect / Reset Connection , 再按  Connect /Emulator

如果你沒有先啟動 aiStarter,會有下列的訊息,請先執行 aiStarter此程式。
當初在安裝 aiStarter ,若有在桌面上建立捷徑,可直接選捷徑執行。
若桌面上沒有 aiStarter 此捷徑,那就在「開始功能表/所有應用程式」 找。

 aiStarter  啟動後,再按 Connect /Emulator

執行結果如下,滑動此球會改變行進的方向和速度(上一次速度的20倍),碰到邊緣會反射回來且會旋轉。
如何讓球體撞到邊緣時,發出聲音?
選 Media/Sound  此元件,拖曳 Sound元件到 元件設計區, 預設名稱 為 Sound1,會掉到下面的Non-visible components區。

 按 Upload File , 上傳 聲音檔 (如hit.wav)。

按 Screen1 此物件, 選 「when Screen1.Initialize do」此block。

按 Sound1 此物件, 選 「 set Sound1.Source to」此block。
按 Text  , 選 「 text string」此block,插入到 「 set Sound1.Source to」此block的後面,並輸入聲音檔的檔名,如 hit.wav。


將 「 set Sound1.Source to」block,插入到 「when Screen1.Initialize do」block 內。

如果 「 set Sound1.Source to」獨立在外面,不插入到  「when Screen1.Initialize do」block 內,會有錯誤訊息。

-----------------------------------------------------------------------------------------------
參考:設定物件聲音檔 另一種方式,但最好會在程式內設定物件的聲音檔。
將 Sound1 的 Source 改為 hit.wav 。

--------------------------------------------------------------------------------------------------
按 Sound1 此物件, 選 「 call Sound1.Play」此block,並插入到「  when ImageSprite1.EdgeReached 」 block內 。

最後 block 畫面為:
手機的執行結果:



沒有留言 :

張貼留言