cec/demo-web/package_nokissy_raphael.html at master · hongru/cec · GitHub

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<style>
body {margin:0;}
</style>

<script type="text/javascript" src="../build/cec/cec.ra.js"></script>
</head>

<body>

<script>
        CEC.forceRaphael();

        var canvas = CEC.createCanvas({
            id: 'canvas',
            width: 962,
            height: 640,
            marginLeft: 'auto',
            marginRight: 'auto'
        });
        document.body.appendChild(canvas);

        var Ticker = CEC.Ticker,
            RectSprite = CEC.Sprite.Rect,
            AnimSprite = CEC.Sprite.Anim;

        var stage = new RectSprite('canvas');

        var bg1 = new RectSprite({
            x: 0,
            y: 0,
            width: 962,
            height: 171,
            backgroundImage: './images/package/pkg_01.jpg',
            backgroundRepeat: 'no-repeat'
        }).appendTo(stage);

        var bg2 = new RectSprite({
            x: 0,
            y: 435,
            width: 962,
            height: 205,
            backgroundImage: './images/package/pkg_05.png',
            backgroundRepeat: 'no-repeat'
        }).appendTo(stage);

        var repeat = new RectSprite({
            x: 0,
            y: 171,
            width: 962,
            height: 265,
            backgroundImage: './images/package/repeat.png',
            backgroundRepeat: 'repeat-x'
            //backgroundSize: 'auto 100%'
        }).appendTo(stage);

        var pkgCont = new RectSprite({
            x: 0,
            y: 170,
            width: 962,
            height: 250
        }).appendTo(stage);

        function addPkgs (x) {
            x = x || 1000;
            var pkg = new AnimSprite({
                name: 'package',
                x: x,
                y: 0,
                width: 300,
                height: 250,
                backgroundImage: './images/package/4.png',
                // animConfig  如果包涵imgWidth, imgHeight 字段，不配置frameData的话,会自动依据图片高宽　和　帧排列方向生成frame 数据
                animConfig: {
                    autoPlay: true,
                    frameNum: 4,
                    frameRate: 8,
                    loop: true,
                    imgWidth: 2002,
                    imgHeight: 502,
                    arrangeDir: 'h'
                }

            }).appendTo(pkgCont);
        }

        function checkPkgs () {
            repeat.setBackgroundPositionX('-5')

            for (var i = 0; i < pkgCont.children.length; i ++) {
                var o = pkgCont.children[i];
                o.setX('-5')
                o.x < -300 && o.remove();
            }
            if (pkgCont.children.length < 4) {
                var n = 4 - pkgCont.children.length;
                for (var i = 0; i < n; i ++) {
                    addPkgs(pkgCont.children[pkgCont.children.length-1].x + 350);
                }
            }
        }

        addPkgs();

        stage.delegate('click', function (e) {
            if (e.targetSprite.name == 'package') {
                e.targetSprite.play();
            }
        }).delegate('touchstart', function (e) {
            if (e.targetSprite.name == 'package') {
                e.targetSprite.play();
            }
        });

        Ticker.singleton.on('tick', function (dt) {
            stage.clear();
            checkPkgs();
            stage.render(dt);
        });


</script>
</body>
</html>