![App Inventor 角色左右移動 + 跳躍 功能 前篇 App Inventor 角色左右移動 + 跳躍 功能 前篇](https://i0.wp.com/i.imgur.com/JwcXGkx.png?resize=1024%2C538&ssl=1)
App Inventor 角色左右移動 + 跳躍 功能 前篇
前陣子有介紹過,讓在畫布上的圖像角色,做左右移動及跳躍的教學,今天要示範將兩個功能給合起來。
那麼請跟著以下的教學:
1. 開啟 App Inventor,並新增一個專案「MarioJump」。
要新增的元件有點多,所以我們先上傳素材,等等新增元件時,再一併設定屬性。
下載完後把所有素材上傳到 App Inventor
![](https://i0.wp.com/i.imgur.com/5cHkTlb.png?w=960&ssl=1)
接著開始新增元件
主要元件為畫布、圖像精靈(我拉了十六個磚塊、一個 Mario)、六個計時器及三顆按鈕。
標籤元件我當間距用,高度都為 10 像素。
![](https://i0.wp.com/i.imgur.com/QMhYn8K.png?w=960&ssl=1)
圖像精靈可以不用拉到那麼多,但起碼要十個,因為每個人模擬起來寬度都不盡相同,如果磚塊太少,可能會看到地板鋪不滿的情況。
看到那麼多計時器先不用慌,腦袋放空就好,因為每個實作都很簡單。
接著來設定屬性
首先先從 Screen1 開始好了
Screen1 設定:
設定畫面為橫向、設定背景圖片為 BackGround.jpg
![](https://i0.wp.com/i.imgur.com/OQZO8mW.png?w=960&ssl=1)
畫布元件設定:
設定背景顏色、高度 66 %、寬度 56 %
![](https://i0.wp.com/i.imgur.com/QWcKRln.png?w=960&ssl=1)
圖像精靈元件設定:
所有磚塊的圖片都設為 g.jpg、只有 Mario 設為 marioRight.png
g.jpg 的高寬都是 32 像素、marioRight and marioLeft 為 40 x 34
P.S. 整個範例實作完我才發現,我都在程式區使用任意元件了!在那裡一併設定圖片就好,結果我居然還一個一個手動設定…… 哈哈哈
![](https://i0.wp.com/i.imgur.com/HJEH5R6.png?w=960&ssl=1)
對話框元件設定:
都透明~~~
![](https://i0.wp.com/i.imgur.com/SKbHwxs.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/y3NFNzp.png?w=960&ssl=1)
計時器元件設定:
![](https://i0.wp.com/i.imgur.com/xnZApIW.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/Fm3ynBn.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/7viokfr.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/VWSAWGH.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/fcXW5I1.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/sWauuke.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/JjTIMYe.png?w=960&ssl=1)
![](https://i0.wp.com/i.imgur.com/SDn0NJV.png?w=960&ssl=1)
To Be Continued…
預計 2021/10/30 新增後篇教學
如果覺得文章內容還不錯的話,麻煩請幫我點個讚!感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
![App Inventor 角色左右移動 + 跳躍 功能 後篇 App Inventor 角色左右移動 + 跳躍 功能 後篇](https://i0.wp.com/i.imgur.com/JwcXGkx.png?resize=75%2C75&ssl=1)
![使用 App Inventor 的 ListView 新功能,做出購物商品清單。Part 2 使用 App Inventor 的 ListView 新功能,做出購物商品清單。Part 2](https://i0.wp.com/i.imgur.com/EINWeLn.png?resize=75%2C75&ssl=1)