App Inventor學習記錄163-命運轉盤小遊戲1~轉盤旋轉

這次做的轉盤小遊戲有點長,所以拆成三篇來介紹。第一篇我們先讓轉盤圖片可以轉起來。

記錄一下:
App Inventor學習記錄163-命運轉盤小遊戲1~轉盤旋轉


第 1部份的完成範例如下。

這個部份就是讓轉盤可以自動的轉起來。我們要順時鐘轉或逆時鐘轉都是可以的。


畫面配置的部份如下。

image 1,放的就是這個轉盤的圖片。
下方放了 2個按鈕,分別是獎勵版和懲罰版,用來前往不同的螢幕。
計時器元件則是讓轉盤自動動起來的主要關鍵。

這裡把計時器的 timer interval計時間隔,設定成 33ms。所以 1秒會轉動 1000/33=30次左右,看起來會比較流暢一些。如果我們要把轉盤改的更流暢一些的話,就是調整計時間隔跟每次的變化角度。


全部的程式碼如下。


自轉角度這個變數……在這裡沒用上。應該是我忘了刪除……


when screen 1.initialize,當螢幕 1初始化的時候。

設定圖片 1的寬度和高度,都設定成螢幕畫面的一半。
啟動計時器計時。


when clock 1.timer,當計時器開始計時的時候。

set image1.rotation angle to image1.rotation angle +1,
把圖片的旋轉角度,設定成每次計時就加 1。

這裡設定為 +1的話,圖片是順時鐘旋轉,設定為 -1的話則是逆時鐘旋轉。
如果對旋轉角度不熟的話,也可以拉一個標籤出來,顯示當下的旋轉角度。
多試幾次,以後就清楚了。


按鈕按下後。

button 1是獎勵按鈕。button 2是懲罰按鈕。
按下後分別前往 lucky或是 bad螢幕。
這兩個螢幕的寫法是一樣的,這個等下一篇再來說明。


雖然這次把命運轉盤拆成三篇講,但是 aia檔的內容是完整版的,所以下載一次就可以了。

這次的 aia檔的下載連結如下:
NO_163_Spin_wheel.aia

app inventor交流討論群組連結如下(掃描 QR code或是點擊連結皆可)
https://line.me/ti/g2/Loxwrcc2iNRS5-Qd4SFXxQ?utm_source=invitation&utm_medium=link_copy&utm_campaign=default

參考書籍請見博客來書籍介紹頁面:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發佈留言