实现京东狗下落的动画

港控/mmm° 2022-05-19 13:07 66阅读 0赞

点击屏幕任意位置，出现京东狗，京东狗从点击的位置开始下落。京东狗掉下来的时候不断的变小，回弹的时候不断的变大，直至能量耗尽。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>京东狗掉下来的时候不断的变小，回弹的时候不断的变大</title>
    </head>
    <body onload="start()">
    <div id="box" style="margin: auto;width: 850px;height: 600px;background-color: #cccccc">
    
    </div>
    </body>
    <script>
        //1,获得游戏盒子
        var box = document.getElementById('box');
        //2,创建一个狗的数组
        var dogBox=[];
        box.onclick=function (ev) {
            //1,鼠标点击后，创建一个狗的对象
            var dog = new Dog();
            //2,数据初始化
            dog.init(box,ev.clientX,ev.clientY);
    
            dogBox.push(dog);
        }
    
        function Dog() {
            var JUMP_UP = 0;
            var JUMP_DOWN = JUMP_UP+1;
            var state = JUMP_DOWN;
    
            var widthDog = 80;
            var heightDog = 80;
            //设置狗的坐标
            var dogX;
            var dogY;
            //狗的图片
            var dog;
    
            //狗跳下去的时间
            var time=0;
            this.init=function (box,x,y) {
                dogX = x;
                dogY = y;
                //1，创建一个图片元素
                dog = document.createElement('img');
                //2,设置图片元素的来源
                dog.src='../00images/02-1.png';
                //3,设置图片元素的大小
                dog.style.width=widthDog+"px";
                dog.style.height=heightDog+"px";
                //4,设置图片的坐标
                dog.style.position="absolute";
                dog.style.left=dogX+"px";
                dog.style.top=dogY+"px";
                //5,把当前的图片元素添加到box
                box.appendChild(dog);
            }
    
            this.run=function () {
                switch (state) {
                    case JUMP_DOWN:
                        time++;
                        //1,不断的更改狗的纵坐标
                        dogY = dogY + 1 / 2 * 10 * time * time;
                        widthDog = widthDog-5;
                        heightDog = heightDog-5;
                        dog.style.width=widthDog+"px";
                        dog.style.height=heightDog+"px";
                        if (dogY > 600) {
                            //设置纵坐标
                            dogY = 550;
                            dog.style.top = dogY + "px";
                            //更改运动状态
                            if(time<=4){
                                state = -1;
                            }
                            else {
                                state = JUMP_UP;
                            }
    
                            //能量损耗
                            time = time -1;
                        }
                        else {
                            dog.style.top = dogY + "px";
                        }
                        break;
                    case JUMP_UP:
                        time --;
                        dogY = dogY - 1 / 2 * 10 * time * time;
                        widthDog = widthDog+5;
                        heightDog = heightDog+5;
                        dog.style.width=widthDog+"px";
                        dog.style.height=heightDog+"px";
                        if(time<=0) {
                            state = JUMP_DOWN;
                        }
                        dog.style.top = dogY + "px";
                        break;
                }
    
    
            }
        }
    
        function start() {
            setInterval('run()',100);
        }
    
        function run() {
            //1,获得狗
            dogBox.forEach(function (dog) {
                dog.run();
            })
        }
    
    </script>
    </html>