js 实现边缘撞击检测动画

js 实现边缘撞击检测动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小潘</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            overflow: hidden; /* 防止撞击产生滚动条 */
        }
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var speedx = 3;
        var speedy = 5;
        const move = () => {
            var div = window.getComputedStyle(document.getElementsByTagName("div")[0]);
            check(div);
            var tleft = parseInt(div.left);
            var left = speedx + tleft;
            var ttop = parseInt(div.top);
            var top = speedy + ttop;
            document.getElementsByTagName("div")[0].style.left = left + 'px';
            document.getElementsByTagName("div")[0].style.top = top + 'px';
        }
        var mymove = setInterval(() => {
                        move();
                    }, 20);
        const check = (div) => {
            var left = parseInt(div.left);
            var top = parseInt(div.top);
            var w = parseInt(div.width);
            var h = parseInt(div.height);
            if (left < 0) {
                speedx *= -1;
                left = 0;
            }
            if (top < 0) {
                speedy *= -1;
                top = 0;
            }
            if(left > window.innerWidth - w) {
                left = window.innerWidth - w;
                speedx *= -1;
            }
            if(top > window.innerHeight - h) {
                top = window.innerHeight - h;
                speedy *= -1;
            }
        }
    </script>
</body>
</html>
posted @ 2020-04-22 21:20  clienter  阅读(130)  评论(0)    收藏  举报