Creating Animated Apps (II) 靜宜大學資管系 楊子青

Presentation on theme: "Creating Animated Apps (II) 靜宜大學資管系 楊子青"— Presentation transcript:

1 Creating Animated Apps (II) 靜宜大學資管系 楊子青 2013.4.29.

2 打Mole不打Ladybug (III): Aphid移動、判斷是否遇到邊界

3 加入Aphid (蚜蟲)

4 1. 讓Aphid每秒往左移動10個像素

5 2. 偵測是否遇到邊界 使用EdgeReached(number edge)事件
Event handler called when the sprite reaches an edge of the screen. The edge argument tells which edge (or corner) was reached, encoded as follows: north = 1 northeast = 2 east = 3 southeast = 4 south = -1 southwest = -2 west = -3 northwest = -4

6 蚜蟲遇到邊界，回到原點重新開始

7 練習 利用隨機亂數，讓蚜蟲每次左移5-20個像素 讓蚜蟲往左上角隨機移動(x軸與y軸均隨機減少)，並判斷碰到左邊、上方還是左上方之邊界

8 打Mole不打Ladybug (IV)： 讓使用者控制Ladybug移動

9 ImageSprite的Heading與Speed屬性
indicates the direction in which the ImageSprite should move, in degrees. For example, 0 means due right, 90 means straight up, 180 means due left, and so on. Speed specifies how many pixels the ImageSprite should move whenever its Interval passes.

10 不同方向對應之Heading角度值 45 90 135 180 225 270 315

11 加入Clock2，每隔0.1秒觸發一次

12 方法一：設計方向按鈕

13 設定速度及方向

14 方法二：傾斜手機 (需有手機測試，部分手機 無法偵測)：加入OrientationSensor (方向感應器)

15 Two OrientationSensor’s most useful properties
Angle (傾斜角度) indicates the direction in which the phone is tilted (in degrees). Magnitude (傾斜量) indicates the amount of tilt, ranging from 0 (no tilt) to 1 (maximum tilt) Multiplying the Magnitude by 100 tells the ladybug that it should move between 0 and 100 pixels in the specified Heading (direction) whenever its TimerInterval

16 利用OrientationSensor 調整Ladybug前進角度及速度

17 方法三：搖晃手機 (需有手機測試)： 加入AccelerometerSensor (加速感應器)

18 AccelerationChanged事件，以傳回參數判斷搖晃方向
XAccel>0 XAccel<0 45 90 135 180 225 270 315 yAccel<0 yAccel>0

19 利用搖晃手機，讓Ladbug往四個 斜角方向移動

20 練習 請設計加速及減速按鈕 若Ladybug碰撞到Aphid，則Aphid被吃掉 得10分 Aphid回到原始位置
Ladybug隨機出現在Canvas的某個位置

21 打Mole不打Ladybug (V)： Ladybug生命線

22 Canvas畫圖的相關屬性 BackgroundColor FontSize LineWidth PaintColor
The color of the canvas background. FontSize The font size of text drawn on the canvas. LineWidth The width of lines drawn on the canvas. PaintColor The color in which lines are drawn

23 Canvas畫圖的相關方法 Clear() DrawCircle(number x, number y, number r)
Clears anything drawn on this Canvas but not any background color or image. DrawCircle(number x, number y, number r) Draws a circle (filled in) at the given coordinates on the canvas, with the given radius. DrawLine(number x1, number y1, number x2, number y2) Draws a line between the given coordinates on the canvas. DrawPoint(number x, number y) Draws a point at the given coordinates on the canvas. DrawText(text text, number x, number y) Draws the specified text relative to the specified coordinates using the values of the FontSize and TextAlignment properties.

24 1. 定義EnergyLine，傳入顏色與長度 會在右邊邊界畫一條寬20的線條

25 2. 定義Setup進行初始化設定 (畫一條紅色，長度300的線條)
倒數計時60秒

26 3. 每秒紅色生命線減少長度5 (以白線取代)

27 執行結果

28 練習 若Ladybug吃到Aphid，則時間再度從60秒開始倒數，生命線重設為滿檔 倒數計時到0，則Game Over