yckj
/
demo_list


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
							<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />
    <title>用画布实现动画</title>
    <link rel="stylesheet" type="text/css" href="./static/css/sytle.css">
    <script type="text/javascript" src="./static/js/hilo-standalone.min.js"></script>
    <img src="./static/images/fish.png" alt="" id="fish" style="display:none">

</head>

<body>

    <div id="game-container"></div>
    <div style="padding: 20px; text-align: center;">
        <button onclick="reset()">重播</button>
    </div>
    <script type="text/javascript" src="./static/js/demo.js"></script>
    <script type="text/javascript">

        var stage = new Hilo.Stage({
            renderType: renderType,
            container: gameContainer,
            width: stageWidth,
            height: stageHeight
        });

        //start stage ticker
        var ticker = new Hilo.Ticker(60);
        ticker.addTick(stage);
        ticker.start();

        //添加背景
        var bmp = new Hilo.Bitmap({
            image: './static/images/map.jpg',
            rect: [0, 0, stageWidth, stageHeight],
            x: 0,
            y: 0
        }).addTo(stage);


        var zidanImg = [];
        var zidan = [];
        var zidanStep = 0;
        for (i = 0; i < 3; i++) {
            zidanImg[i] = new Hilo.TextureAtlas({
                image: './static/images/zidan.png',
                width: 64,
                height: 64,
                frames: {
                    frameWidth: 64,
                    frameHeight: 64,
                    numFrames: 1
                },
                sprites: {
                    zidanImg: { from: 0, to: 0 }
                }
            });


            zidan[i] = new Hilo.Sprite({
                frames: zidanImg[i].getSprite('zidanImg'),
                x: 10 * (i + 1),
                y: 100 + 10 * (i + 1),
                interval: 10,
                timeBased: true,
                loop: true,
                onUpdate: function () {
                    if (this.x < 200) {
                        // console.log("#debug#🚀 ~ file: index.html:84 ~ init ~ this:", this.style)
                        if (this.x > stage.width - this.pivotX) {
                            this.x = 0;
                        } else {
                            var paoWuXianRes = paoWuXian(this.x + 3);
                            // console.log("#debug#🚀 ~ file: index.html:88 ~ init ~ paoWuXianRes:", paoWuXianRes)
                            this.x = paoWuXianRes.x;
                            // this.y = paoWuXianRes.y;
                            //this.x += 3;

                        }
                    } else {
                        manStart = true;
                    }


                }
            }).addTo(stage);
            //text wrapped in dom element
        }

        // 子弹


        //init texture atlas
        var atlas = new Hilo.TextureAtlas({
            image: './static/images/man.png',
            width: 100,
            height: 88,
            frames: {
                frameWidth: 100,
                frameHeight: 88,
                numFrames: 1
            },
            sprites: {
                fish: { from: 0, to: 0 }
            }
        });
        var manStart = false;
        var fish = new Hilo.Sprite({
            frames: atlas.getSprite('fish'),
            x: 0,
            y: 300,
            interval: 6,
            timeBased: true,
            loop: true,
            onUpdate: function () {
                if (manStart) {
                    if (this.x < 200) {
                        this.x += 3;
                        this.y -= 3;
                    }
                }

            }
        }).addTo(stage);
        console.log("#debug#🚀 ~ file: index.html:135 ~ fish:", fish)


        var man1 = new Hilo.TextureAtlas({
            image: './static/images/man1.png',
            width: 204,
            height: 375,
            frames: {
                frameWidth: 204,
                frameHeight: 375,
                numFrames: 13
            },
            sprites: {
                man: { from: 0, to: 12 }
            }
        });

        var man1Sprite = new Hilo.Sprite({
            frames: man1.getSprite('man'),
            x: 0,
            y: 100,
            interval: 20,
            timeBased: true,
            loop: true,
            onUpdate: function () {
                console.log("#debug#🚀 ~ file: index.html:160 ~ onUpdate:", this.x, this.y)
                if (this.x > 200) {
                    this.x = 0;
                }
                this.x += 1;

            }
        }).addTo(stage);
        console.log("#debug#🚀 ~ file: index.html:163 ~ man1Sprite:", man1Sprite)

        function manStart() {
            manStart = true;
        }

        function reset() {
            manStart = false;
            for (i = 0; i < zidanImg.length; i++) {
                zidan[i].x = 10 * (i + 1);
                zidan[i].y = 100 + 10 * (i + 1);

            }
            fish.x = 0;
            fish.y = 300;
        }
        function paoWuXian(x) {

            // var y = 1 * x * x + 1 * x + 2;
            return {
                x, y: 100
            }

        }


    </script>
</body>

</html>