yckj
/
demo_list


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
							<!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 canvasType = location.search.indexOf("dom") != -1 ? "div" : "canvas";

        var canvas = Hilo.createElement(canvasType);


        console.log("#debug#🚀 ~ file: index.vue:17 ~ init ~ init:开始啊", Hilo);

        var stage = new Hilo.Stage({

            renderType: renderType,

            container: gameContainer,

            width: stageWidth,

            height: stageHeight

        });

        console.log("#debug#🚀 ~ file: index.vue:24 ~ init ~ stage:", stage);


        var ticker = new Hilo.Ticker(60);

        ticker.addTick(stage);

        ticker.start();


        var font = "14px arial";

        var content = "Hello World! Hilo是一款HTML5 2D游戏引擎，欢迎使用。";

        var text = new Hilo.Text({

            font: font,

            text: content,

            lineSpacing: 0,

            width: 250,

            height: 100,

            x: 40,

            y: 50

        }).addTo(stage);


        /* 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);


        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>