简单的碰壁反弹效果

最新推荐文章于 2021-06-09 15:38:29 发布

weixin_30824599

最新推荐文章于 2021-06-09 15:38:29 发布

阅读量136

点赞数

原文链接：http://www.cnblogs.com/duenyang/p/5819509.html

版权

可以使用js来实现简单的碰壁反弹效果，具体的内容请大家参考代码部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>碰撞小球</title>
    <style>
    #box{
        width: 1000px;
        height: 800px;
        position: relative;
        border:1px solid red;
        margin:50px auto 0;
    }
    #boll{
        width: 50px;
        height: 50px;
/*        border-radius: 25px;*/
        border:1px solid green;
        position: absolute;
        top: 66px;
        left: 88px;
    }
    </style>
</head>
<body>
    <div id="box">
        <div id="boll"></div>
    </div>
    <script>
        var box=document.getElementById('box');
        var boll=document.getElementById('boll');
        var x=88,y=66,timer1=null,movex=1,movey=1;
        console.log(box.clientWidth-boll.clientWidth);
        console.log(box.clientWidth-boll.offsetWidth);
            timer1=setInterval(function(){
                if (movex) {//判断方向
                    x++;
                    if (x>=box.clientWidth-boll.clientWidth) {
                        movex=0;
                    }boll.style.left=x+'px';}
                    else{
                        x--;
                        if (x<=0) {
                            movex=1;
                        }boll.style.left=x+'px';
                    }
                if (movey) {
                    y++;
                    
                    if (y>=box.clientHeight-boll.clientHeight) {
                        movey=0;
                    }boll.style.top=y+'px';
                }else{
                        y--;
                        if (y<=0) {
                            movey=1;
                        }boll.style.top=y+'px';
                    }
            },1)
    </script>
</body>
</html>

其中movex和movey两个变量是判断运动的方向。

转载于:https://www.cnblogs.com/duenyang/p/5819509.html

weixin_30824599

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的碰壁反弹效果

可以使用js来实现简单的碰壁反弹效果，具体的内容请大家参考代码部分。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>碰撞小球</title> <style> #box{...
复制链接

扫一扫