JavaScript小球左右弹

最新推荐文章于 2024-07-22 14:50:39 发布

BUGliuzongyuan

最新推荐文章于 2024-07-22 14:50:39 发布

阅读量269

点赞数

分类专栏： JavaScript 文章标签： JavaScript小球左右弹

本文链接：https://blog.csdn.net/Year98Programmer/article/details/103058099

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: red;
            border-radius: 50%;
            position: absolute;
            left: 50px;
            top: 50px;
        }

        .wall {
            position: absolute;
            width: 5px;
            height: 500px;
            left: 1300px;
            background: #000;
        }

        .wl {
            left: 45px;
        }
    </style>
</head>

<body>
    <button>开始</button>
    <div id="box"></div>
    <div class="wall wr"></div>
    <div class="wall wl"></div>
</body>
<script>
    var t;
    //找小球
    var o = document.getElementById('box');
    //找墙
    var s1 = document.getElementsByClassName('wall wl')[0];
    var s2 = document.getElementsByClassName('wall wr')[0];
    //点击
    var btn = document.querySelector('button')
    console.log(o, s1, s2, btn)
	//temp小球每次运行速度，site判断小球为正负
    var temp = 2, site = temp;
    //点击开始小球向右移动
    btn.onclick = function () {
        t=setInterval(function () {
            //小球
            var o1 = o.offsetLeft;
            //右墙
            var o3 = s2.offsetLeft-o.offsetWidth;
            //左墙
            var o2 = s1.offsetLeft + s1.offsetWidth;
                o.style.left = o.offsetLeft + site + 'px';
                //往左回走
            if (o1 >=  o3) {
                site=-temp;
                //往右走
            }else if(o1<=o2){
                site=temp;
            }
        }, 1)
    }
</script>

</html>