实现京东狗下落的动画

勋勋勋勋小勋勋

于 2018-07-25 18:35:21 发布

阅读量375

点赞数

文章标签：点击屏幕京东狗下落图片下落动画

本文链接：https://blog.csdn.net/qq_34607371/article/details/81208023

版权

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

<!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>

勋勋勋勋小勋勋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现京东狗下落的动画

点击屏幕任意位置，出现京东狗，京东狗从点击的位置开始下落。京东狗掉下来的时候不断的变小，回弹的时候不断的变大，直至能量耗尽。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;京东狗掉下来的时候不断的变小，回弹的
复制链接

扫一扫