examples/declarative/follow/pong.qml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<Rect id="Page" width="640" height="480" color="#000000">
    <!-- Make a ball to bounce -->
    <Rect id="Ball" x="20" width="20" height="20" color="#00ee00" z="1">
        <properties>
            <!-- Add a property for the target y coordinate -->
            <Property name="targetY" value="{Page.height-10}"/>
            <Property name="direction" value="right"/>
        </properties>
        <x>
            <!-- Move the ball to the right and back to the left repeatedly -->
            <SequentialAnimation running="true" repeat="true">
                <NumericAnimation to="{Page.width-40}" duration="2000"/>
                <SetPropertyAction target="{Ball}" property="direction" value="left"/>
                <NumericAnimation to="20" duration="2000"/>
                <SetPropertyAction target="{Ball}" property="direction" value="right"/>
            </SequentialAnimation>
        </x>
        <y>
            <!-- Make y follow the target y coordinate, with a velocity of 200 -->
            <Follow source="{Ball.targetY}" velocity="200"/>
        </y>
        <onTopChanged>
            <!-- Detect the ball hitting the top or bottom of the view and bounce it -->
            if (y &lt;= 0)
                targetY = Page.height-20;
            else if (y &gt;= Page.height-20)
                targetY = 0;
        </onTopChanged>
    </Rect>
    <!--
    Place bats to the left and right of the view, following the y
    coordinates of the ball.
    -->
    <Rect id="LeftBat" color="#00ee00" x="2" width="20" height="90">
        <y>
            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'left'}"/>
        </y>
    </Rect>
    <Rect id="RightBat" x="{Page.width-22}" color="#00ee00" width="20" height="90">
        <y>
            <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'right'}"/>
        </y>
    </Rect>

    <!--
    The rest, to make it look realistic, if neither ever scores...
    -->
    <Rect color="#00ee00" width="40" height="60" x="{320-80}"/>
    <Rect color="#000000" width="20" height="40"  x="{320-70}" y="10"/>
    <Rect color="#00ee00" width="40" height="60" x="{320+40}"/>
    <Rect color="#000000" width="20" height="40"  x="{320+50}" y="10"/>
    <Repeater dataSource="{24}">
        <Rect color="#00ee00" width="10" height="10" x="{320-5}" y="{index*20}"/>
    </Repeater>
</Rect>