纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

js弹跳小球 原生js实现弹跳小球

余斯内克   2021-09-12 我要评论
想了解原生js实现弹跳小球的相关内容吗余斯内克在本文为您仔细讲解js弹跳小球的相关知识和一些Code实例欢迎阅读和指正我们先划重点:js,弹跳小球下面大家一起来学习吧

突发奇想写了个小球来回弹跳的案例供大家参考具体内容如下

主要就是利用了margin-left / top 值进行位移当然也可以使用定位去做

本案例所用到的有:

  • DOM元素获取
  • DOM样式操作
  • .offsetWidth 获取元素宽度
  • .offsetHeight 获取元素高度
  • setInterval() 定时器

上代码

整体使用原生js

<style> //style样式
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 500px;
            height: 600px;
            background-color: #eee;
            box-shadow: 0 0 10px 0 #000;
            margin: auto;
            overflow: hidden;
            position: relative;
            margin-top: 50px;
        }

        #box div {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
        }
    </style>
    <body>
    <div id="box">
        <div id="cir"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
<script>
var box = document.getElementById("box");
var cir = document.getElementById("cir")
var cirs = box.querySelectorAll("div");
collMove(box, cir, 6);
collMove(box, cirs[1], 7);
collMove(box, cirs[2], 8);
collMove(box, cirs[3], 9);
collMove(box, cirs[4], 10);
collMove(box, cirs[5], 10);
collMove(box, cirs[6], 11);
/**
 * 元素遇边界弹开
 * 弹开的同时改变元素颜色
 * @param {容器获取} box 
 * @param {容器内弹跳元素获取} cir 
 * @param {弹跳速度} speed 
 */
function collMove(box, cir, speed) {//方法封装
    var oDiv = box; //获取容器
    var oCir = cir; //获取容器内元素
    var xMax = oDiv.offsetWidth - oCir.offsetWidth; //容器最大X轴边界
    var yMax = oDiv.offsetHeight - oCir.offsetHeight; //容器最大Y轴边界
    var motionX = 0; //元素X轴坐标初始化
    var motionY = 0; //元素y轴坐标初始化
    (() => {
        var speedX = speed; //x轴偏移量
        var speedY = speed; //y轴偏移量
        setInterval(() => {
            motionX += speedX; //进行X轴偏移
            motionY += speedY; //进行y轴偏移
            if (motionX >= xMax) { //检测是否碰到X轴右边界
                motionX = xMax; //碰到边界将X轴坐标设为x轴最大右边界
                speedX = -speedX; //x轴偏移量反转
                randColor(oCir); //改变颜色
            } else if (motionX <= 0) { //检测是否碰到X左边界
                motionX = 0; //碰到边界将X轴坐标设为 0 即左边界初始位置
                speedX = -speedX; //再次反转X轴偏移量
                randColor(oCir); //下方上下边界检测同理
            }
            if (motionY >= yMax) {
                motionY = yMax;
                speedY = -speedY
                randColor(oCir);
            } else if (motionY <= 0) {
                motionY = 0;
                speedY = -speedY;
                randColor(oCir);
            }
            oCir.style.marginLeft = motionX + "px"; //设置元素X轴坐标
            oCir.style.marginTop = motionY + "px"; //设置元素Y轴坐标
        }, 10);
    })();

    function randColor(obj) { //封装一个随机色彩改变颜色直接调用
        var op = Math.random() * 7 + 3;

        function color() {
            return Math.floor(Math.random() * 256);
        }
        return obj.style.backgroundColor = `rgba(${color()},${color()},${color()},${op})`;
    }
}
</script>

整个方法中最主要的就是理解元素位置与容器边界的检测与判断这一部分搞懂剩下的就很简单了
有个小提示:容器不要设置成标准的正方形不然会因为角度的原因小球只能从左上角到右下角来回弹动
整个方法都已封装需要用时只需要复制整个方法或者外链进去 然后直接使用方法名依照对应参数调用即可一个元素一次调用. 闲麻烦可直接写一个for循环去循环调用

抛个砖:

for(var i = 1 ; i<=10;i++){
 collMove(box,cirs[i],i);
}

相关文章

猜您喜欢

  • Java面试题 Java面试题冲刺第二十九天--JVM3

    想了解Java面试题冲刺第二十九天--JVM3的相关内容吗_陈哈哈在本文为您仔细讲解Java面试题的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Java面试题,JavaJVM下面大家一起来学习吧..
  • js网页播放器 JavaScript实现网页播放器

    想了解JavaScript实现网页播放器的相关内容吗信仰柴神的人在本文为您仔细讲解js网页播放器的相关知识和一些Code实例欢迎阅读和指正我们先划重点:js,播放器下面大家一起来学习吧..

网友评论

Copyright 2020 www.sopisoft.net 【绿软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式